Visually Hidden

Screen-reader-only label example.

Package: @solidiom/visually-hidden
Version: 0.0.1-next.0
Status: stable

Examples

import * as VisuallyHidden from "@solidiom/visually-hidden"

;<button>
  <VisuallyHidden.Root>Close dialog</VisuallyHidden.Root>
  <span aria-hidden="true">&times;</span>
</button>

Hidden heading

Use Visually Hidden to provide headings for screen readers that provide structure without visual clutter.

;<article>
  <VisuallyHidden.Root>
    <h2>Related Articles</h2>
  </VisuallyHidden.Root>
  <ul>
    <li>Article one</li>
    <li>Article two</li>
  </ul>
</article>

Form field instructions

Hide verbose form field instructions visually while keeping them accessible to screen readers.

;<label>
  <VisuallyHidden.Root>Enter your email address</VisuallyHidden.Root>
  <input type="email" placeholder="Email" />
</label>

View source

        export function Root(props: VisuallyHiddenProps) {
  return (
    <span
      class={props.class}
      style={visuallyHiddenStyles}
      {...applySemanticAttrs({ scope: "visually-hidden", part: "root" })}
    >
      {props.children}
    </span>
  )
}