VisuallyHidden
Text that does not show on screen, but screen readers read. It completes what the position on the page already tells sighted people.
On this page
Playground
See as
Background
<label class="feitio-stack" data-gap="2" style="inline-size: min(100%, 20rem)"><span class="feitio-visually-hidden">Filter</span><input class="feitio-input" type="search" placeholder="…"></label>When to use
- To give the context the eye gets from position: "Edit weekly backup" on an "Edit" button inside a table row.
When not to use
- To hide something from everyone: use the
hiddenattribute. - For text everyone should read: if it helps screen readers, it almost always helps everyone. Show it.
Examples
Weekly backup
The full name of an action
Sighted people understand from the row; the screen reader hears "Edit weekly backup".
Show code
<button type="button" class="feitio-button" data-size="small">
Editar<span class="feitio-visually-hidden"> backup semanal</span>
</button>Do and don’t
Do
"Edit" with the row’s name hidden.
Context that only the screen reader was missing.
Don’t
"Save before leaving" hidden, only for screen readers.
A notice only screen readers get: sighted people needed it too.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-visually-hidden" | required | Disappears from the screen and stays for screen readers. |