Accessibility
Screen Reader v1.0.7
Utilities for controls whether an element is visually hidden but still accessible to screen readers.
Class
class | css |
---|---|
sr-only | position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; border-width: 0 |
not-sr-only | position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal |
Usage
Set an element visible to screen reader.
<!-- Example -->
<y class="sr-only">
...
</y>
Set an element hidden from screen reader.
<!-- Example -->
<y class="not-sr-only">
...
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |