CSS Utility Classes Screen Reader
Use screen reader utilities to hide elements on all devices except screen readers.
Hide an element to all devices except screen readers using the _visually-hidden
utility class. Use the _visually-hidden:focusable
utility variant to show the element again when it’s focused (e.g. when focusing using a keyboard).
<span class="_visually-hidden">
Opens in new tab
</span>
<a class="_visually-hidden:focusable" href="#content">
Skip to main content
</a>
You can extend the provided Sass placeholder as well.
@import '@inkline/inkline/css/mixins';
.skip-navigation {
@extend %visually-hidden;
}