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.