How to use USWDS

Accessibility

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

Accessibility for Teams

Everyone who works on government websites has a role to play in making federal resources accessible and inclusive. Visit Accessibility for Teams to learn how to embed accessibility and inclusive design practices into your team’s workflow. Read more: Introducing Accessibility for Teams.

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 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.