UI components

Accessibility

Accessibility tips to help you deliver delightful experiences to all users.

Hiding and showing content

There will be cases in which you will need to selectively "show" and "hide" content by either removing it from the visual flow or preventing screen readers from reading it. We have settled on the following conventions for each use case:

Visual
browsers
Screen
readers
Solution
hide hide Add the boolean hidden attribute attribute to dynamically hide content from all users. Remove the attribute to show it again.
show hide Use the aria-hidden="true" attribute to "hide" content from screen readers while keeping it visually perceivable.
hide show Use the usa-sr-only class to show content to screen readers only. This removes the content from the visual flow of the document but retains its legibility by screen readers.