<div class="u-sc-only">
    This text will be read by a screen-reader but will not be visible.
</div>
<div class="u-sc-only">
  This text will be read by a screen-reader but will not be visible.
</div>
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.",
  "linkTarget": "_self",
  "url": "https://www.unibz.it",
  "image": "/assets/bridge-524-295.jpg"
}
  • Handle: @screen-reader
  • Preview:
  • Filesystem Path: src-fractal/html/04-utilities/screen-reader/screen-reader.hbs

Screen reader utility

Utility to hide elements visually but keep screen reader visibility.

<div class="u-sc-only">
  This text will be read by a screen-reader but will not be visible.
</div>

To achieve the reverse effect, make something invisible to screen readers use the aria-hidden attribute:

<div aria-hidden="true">
  This text will be visible, but will be ignored by screen readers.
</div>