Accessibility
screen-readers
Style utility for imporving the accessibility with screen readers.
Overview
| Class | Declarations |
|---|---|
sr-only | position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
|
Examples
Hide text visually
Use sr-only to keep text available to assistive technologies while removing it from the visual layout.
<button> <span class="sr-only">Open navigation</span> <svg aria-hidden="true">...</svg></button>Generated CSS
@layer utilities { .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0 }}Label icon-only controls
Icon-only buttons need a text alternative. sr-only lets the visual control stay compact without dropping the accessible name.
<button class="inline-grid place-content:center"> <span class="sr-only">Delete item</span> <svg aria-hidden="true">...</svg></button>Avoid hiding interactive content
Use sr-only for labels and descriptions, not for focusable controls that users need to reach visually.
<p id="status-help" class="sr-only">Changes are saved automatically.</p><input aria-describedby="status-help">Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<span class="sr-only sr-only@print sr-only@sm">...</span>