Visually hidden
Content for screen readers only, or shown on focus for skip links.
<mm-visually-hidden focusable><mm-link href="#main">Skip to main content</mm-link></mm-visually-hidden>
<mm-visually-hidden>Sorted by last run, newest first</mm-visually-hidden>
Guidance
Content for screen readers only: it stays in the accessibility tree but takes no space on screen. Use it to name icon-only controls that cannot take a label, to add context such as "(opens in a new tab)", or to give a table a caption that sighted readers get from the layout.
With focusable, the content appears when something inside it takes keyboard focus, for skip links:
it shows as a small raised panel at the inline-start corner of the nearest positioned ancestor.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
focusable | focusable | boolean | false | Shows the content while something inside it has focus, for skip links. |
Slots
| Slot | Description |
|---|---|
| Default | The hidden content. |
Examples
Every state of mm-visually-hidden in Storybook, with keyboard and screen reader tests.