generic

generic-visually-hidden

WAI ARIA Practices

There are occasional instances where content should be made available to screen reader users, but hidden from sighted users.

API:

name description
default Provide the text to be visually hidden as lightdom

Usage:

Simply drop the component in your markup.

Default

Under here is some visually hidden text:

Show code

Import as CSS

Alternatively you can import the global CSS file, which allows you to use a visually-hidden attribute on any arbitrary element.

Show code
I'm hidden!

Import as JS

Alternatively you can import the visually-hidden styles as JS string, this can be useful for usage in shadow roots.

Show code