Accessibility

Screen Reader v1.0.7

Utilities for controls whether an element is visually hidden but still accessible to screen readers.

Class

classcss
sr-onlyposition: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border-width: 0
not-sr-onlyposition: 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

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled