Press
/
to search

Accessibility

Screen Reader

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
screen-reader-onposition: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border-width: 0
screen-reader-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.

<div class="screen-reader-on">
  ...
</div>
HTML
.dummy {
  @extend
    .screen-reader-on;
}
SCSS

Set an element hidden from screen reader.

<div class="screen-reader-off">
  ...
</div>
HTML
.dummy {
  @extend
    .screen-reader-off;
}
SCSS