Press/to search

Accessibility

Screen Reader v1.0.7

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

Class

classcss
sr-onposition: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border-width: 0
sr-offposition: 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-on">
  ...
</y>

Set an element hidden from screen reader.

<!-- Example -->
<y class="sr-off">
  ...
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.