Typography

VisuallyHidden

Utility primitive that hides content visually while keeping it available to assistive technology, with an optional focusable mode for skip links.

import { VisuallyHidden } from '@lostgradient/cinder/visually-hidden';
typographyaccessibility
01

Overview

Hides content visually while keeping it accessible to screen readers; supports skip-link patterns via the focusable prop.

Usage

svelte 
<script lang="ts">
  import VisuallyHidden from '@lostgradient/cinder/visually-hidden';
</script>

<VisuallyHidden>Screen reader only text</VisuallyHidden>
Live preview
02

When to use

Use when
  • Exposing label or helper text only to screen readers without affecting the visual layout.
  • Implementing a skip-to-content link that appears on keyboard focus.
Avoid when
  • Hiding content from everyone — use the hidden attribute or display none instead.
  • Labelling a form control where a visible label is acceptable — use label directly.
03

Examples

as prop — description list

Visually hidden <dt> inside a narrow description-list layout, where the term is implied by context.

Icon-only button label

Supplemental label for an icon-only button — visible to screen readers, hidden from sighted users.

04

Props

Props for visually-hidden
Name Type Default Required Bindable Description
as 'object''a''abbr''address''article''aside''audio''b''bdi''bdo''blockquote''body''button''canvas''caption''cite''code''colgroup''data''datalist''dd''del''details''dfn''dialog''div''dl''dt''em''fieldset''figcaption''figure''footer''form''h1''h2''h3''h4''h5''h6''head''header''hgroup''html''i''iframe''ins''kbd''label''legend''li''main''map''mark''menu''meter''nav''noscript''ol''optgroup''option''output''p''picture''pre''progress''q''rp''rt''ruby''s''samp''script''search''section''select''slot''small''span''strong''style''sub''summary''sup''table''tbody''td''template''textarea''tfoot''th''thead''time''title''tr''u''ul''var''video' 'span' Element tag to render. Defaults to 'span' (inline-flow safe).
focusable boolean false When true, reveals the element fully on :focus, :focus-within, and :focus-visible. Use for skip-link patterns with as="a" and href. Defaults to false.
children snippet req Required content — must render something assistive technology can announce. The render site uses optional chaining (children?.()) as a JS-consumer safety net, but omitting children defeats the entire purpose of this component: an empty .cinder-sr-only announces nothing to AT. Always provide meaningful content.