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.

When to use

Use it for:

• Text for screen-reader users that is not needed visually: a label for an icon, extra context for a bare number.
• A skip link that stays hidden until it receives focus (focusable).

Don’t use it for:

• Hiding content from everyone, including screen readers. Use the hidden attribute or aria-hidden.
• Hiding text to stuff in keywords or duplicate visible content.
• Replacing a visible label when sighted users need it too.

Live Previews

Screen-reader-only text

Visible labelAdditional context for assistive technology only.

<span>Visible label</span> <holo-visually-hidden>Additional context for assistive technology only.</holo-visually-hidden>

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.

Skip to main content

<holo-visually-hidden focusable>
  <a href="#main-content">Skip to main content</a>
</holo-visually-hidden>

Accessibility

The component clips its content to a 1 by 1 pixel box off-screen with CSS (it is not display: none), so the content stays in the accessibility tree and is read by screen readers. The component adds no role and has no behaviour of its own.

With focusable, the element becomes visible while it contains focus (:focus-within): it gets padding, a surface background, a shadow and a high z-index. Put a focusable child, such as an <a href="#main">, inside it to make a skip link.

Key	Action
Tab	Moves focus to the child, revealing the content when focusable is set
Enter	Activates the focused child (for example, follows a skip link)

• Without focusable, nothing inside is revealed. Any interactive child inside would be focusable but invisible, which fails WCAG 2.4.7. Use focusable for interactive content.

You provide:

• Content that is meaningful when read aloud on its own.
• A focusable child (link or button) when you use focusable.
• A visible focus indicator on that child if you restyle it.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-visually-hidden';

Properties

Property	Attribute	Type	Default	Description
focusable	focusable	boolean	false	If true, the slotted content becomes visible when it (or a descendant) receives keyboard focus — the standard "skip link" pattern.

Slots

Slot	Description
(default)	The content to hide visually.

CSS custom properties

Property	Description
--holo-visually-hidden-bg	Background color of the content while it is revealed by focus.
--holo-visually-hidden-color	Text color of the content while it is revealed by focus.
--holo-visually-hidden-focus-padding	Padding of the content while it is revealed by focus.