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