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

<generic-visually-hidden>I am hidden</generic-visually-hidden>

I am visually hidden!

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

<link rel="stylesheet" type="text/css" href="https://unpkg.com/@generic-components/components@1.0.0/generic-visually-hidden/visually-hidden.css">
<div visually-hidden>I'm hidden!</div>

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

import { visuallyHidden } from '@generic-components/components';

const sheet = new CSSStyleSheet();
sheet.replaceSync(visuallyHidden);

myCustomElement.adoptedStyleSheets = [sheet];