Visually hidden styles are only used on regular text if necessary
Context
Some pages may have multiple instances of the same user interface (UI) control. For example, a set of featured events might have the same "learn more" link, or each calendar event has a details page link with the same link text.
Previously to make these links unique, we would use visually hidden styles. This would reduce visual repetition while making sure links had unique text: <a href="//webtech.wwu.edu/...">Get details <span class="visually-hidden">about xyz event</span></a>.
While this can make the link more accessible in text-to-speech tech like screen readers, this approach for UI controls like links and buttons can create barriers for:
- people using speech input. Most speech input or voice control technology requires the full name of the control to activate correctly. If a user can't see the full name of the control that operates it, they won't have the info needed to use that link, button, or other control.
- There are ways in speech input to expose full accessible names, but is an additional step a user has to take and needs to be aware of. It's easier for content editors to present the info to everyone instead, both semantically and visually.
- people using magnifiers or enlarged text. The user's viewport and the page design may isolate the content to just the link, button, or other control. This means the surrounding context is lost, and link text like "read more"/"learn more" may not be understandable on its own.
- people who have cognitive disabilities, or digital literacy concerns. A more descriptive link like "read more about xyz" will tell all users exactly what will happen when used, and eases the cognitive load to figure out its meaning.
Additional Info
Decision
Visually-hidden text may be used on regular text if needed to provide context that is otherwise clear in the design and surrounding content. This may include text in a live region announcing updates that are otherwise visually available, or additional headings that help with navigating a page. However, the hidden info may benefit others users anyway, so site editors should think through the design carefully before using.
If space/layout concerns are the reasons for visually hiding info, we consider adjusting the component or page design first to create space for the content. Visually hiding content should only be the design solution when all other ideas have been tried and don't work.
Visually-hidden styles shouldn't be used on interactive controls like links, buttons, form controls, etc. Either:
- the control's accessible name uses the element's best practice for naming (there are accessibility guides that cover naming for these controls), or
- if using aria-label/aria-labelledby, the visible label must match the ARIA label or be the first part of the complete name.
Status
Consequences
Content editors will need to consider their link text when handling links of similar behavior (learn more, read more, more info, etc.). Providing examples of voice control in accessibility training if not already there may help explain the importance of descriptive links.
WebTech may need to re-evaluate design patterns where similar link or control text crops up, and refactor the design so the links are more descriptive or not needed. Accessibility guides will need updating to reflect this new best practice.