Visual Browser vs. Screen Reader
There may be instances to SHOW or HIDE website content, elements, or information visually on the website versus to the screen reader. The following table identifies the web standard techniques to “hide” or “show” content to either the visual browser and/or screen reader.
Caution should be taken when applying these techniques as some browsers and screen readers (or future versions) may act differently. Effective user testing will determine if the browsers and screen readers support the current web standards. Also, hiding and displaying elements visually could affect the placement or alignment of surrounding elements when unhidden.
| Visual Browser | Screen Reader | Techniques |
|---|---|---|
| HIDE | HIDE | Add the boolean hidden attribute to dynamically hide the content from both screen readers and visual website visitors. To display the content, simply remove (or comment out) the attribute.
Example: type=”hidden” |
| SHOW | HIDE | Set the aria-hidden attribute for the content to be visible on the browser while screen readers will skip over it. However, this is different than setting an image the alt-text to null for decorative images.
Example: aria-hidden=”true” |
| HIDE | SHOW | Use the usa-sr-only or sr-only class to make the content available to screen readers but visually hidden from view. This could help in keeping minimal information displayed while providing additional information vital to screen reader users. The class is an absolute 1 pixel fixed to a negative margin.
Example: class=”usa-sr-only” |