Visually Hidden
Hides content visually while keeping it accessible to screen readers. Use for skip links and accessible labels.
Default
Base
| Class | Description |
|---|---|
.ui-visually-hidden | Base class |
Focusable
| Class | Description |
|---|---|
.ui-visually-hidden--focusable | focusable |
Focusable Skip Link
<!-- Becomes visible when focused - useful for skip links -->
<a class="ui-visually-hidden ui-visually-hidden--focusable" href="#main" style="position: relative;">Skip to main content</a>