WAI ARIA Practices

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


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


Simply drop the component in your markup.


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