Accessibility Helper Classes
Visually Hide Content
Developers commonly use display: none to hide content on the page. Unfortunately, this common action can be problematic for people who use screen readers, especially if the hidden content was meant to be for them to discover. (See also How To Hide Content)
TIP
Use .h-visually-hidden or .h-sr-only to hide content visually but keep it accessible to screen readers.
Example:
<div class="h-sr-only">Show info message</div>Hide Content for Screen Readers
TIP
Add the attribute aria-hidden="true" to hide content that is not relevant for screen readers, like decorative icons.
<i class="far fa-envelope" aria-hidden="true"></i>Do not use the title attribute
TIP
The title attribute is not accessible for screen readers. Use aria-label or aria-labelledby instead.
Example:
<button class="c-btn -secondary" aria-label="Close">X</button>Focus Visible Helper Class
.h-focus-visible is a utility class that can be used to style elements that are focused using the keyboard. This is useful for users who navigate the web using a keyboard or other assistive technology.