<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"
}
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>