VisuallyHidden
UtilitiesHides content visually while keeping it accessible to screen readers.
Examples
Icon button with screen reader label
vue
<button type="button" aria-label="Close">
<SomeIcon />
<DsVisuallyHidden>Close dialog</DsVisuallyHidden>
</button>Accessibility
- Content is hidden with CSS but remains in the DOM for screen readers.
- Use for supplemental labels that would be redundant visually.