visually-hidden
Custom element for inclusively hiding content while keeping it accessible to assisitive technology.
Install @acab/visually-hidden (or use import maps).
npm add @acab/visually-hidden
<visually-hidden>content goes here</visually-hidden>By default, the <visually-hidden> element acts just like a <span>. There are two ways to give this element visually-hidden styles.
- Using CSS (recommended):
@import "@acab/visually-hidden/styles.css" layer(visually-hidden);
- Using JS:
import "@acab/visually-hidden";
The CSS way is more robust, more versatile, and it also gives you the ability to use class="visually-hidden" as an equivalent alternative to <visually-hidden>.
<visually-hidden>…</visually-hidden>
<span class="visually-hidden">…</span>The JS way is fully encapsulated and can be used inside other shadow roots, but (obviously) it relies on client-side JavaScript.
If necessary, both ways can be combined, at the expense of a small amount of duplication in the client bundle.