Holo Visually Hidden
The <holo-visually-hidden> component wraps slotted content with the standard “visually hidden” clip pattern, so text remains available to screen readers without being visible on screen. Set the focusable attribute to implement the “skip link” pattern, where the content becomes visible once a focusable descendant receives keyboard focus.
Live Previews
Section titled “Live Previews”Screen-reader-only text
Section titled “Screen-reader-only text”<span>Visible label</span> <holo-visually-hidden>Additional context for assistive technology only.</holo-visually-hidden>Focusable skip link
Section titled “Focusable skip link”With focusable, the slotted content is revealed once a descendant (e.g. a link) receives keyboard focus — useful for “skip to main content” links. Tab into the preview below to see it appear.
<holo-visually-hidden focusable> <a href="#main-content">Skip to main content</a></holo-visually-hidden>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | -------------------------------------------------------------------------------------- | --------- | ------- |
| focusable | focusable | If true, the slotted content becomes visible when it (or a descendant) receives focus. | boolean | false |
| Slot Name | Description | | --------- | ------------------------------------------------------------- | | Default | The content to hide visually while keeping it in the AT tree. |