Web Accessibility Cookbook

Chapter 8. Toggling Content Visibility

Limited space and the client’s desire to fit as much information as possible onto a page pushes designers to their limits because there’s only so much you can show at a time. They often reach for conditional content hiding to solve that problem and use design patterns like tabs, accordions, fly-out navigations, or disclosure widgets. While it’s usually just better to show content, sometimes these solutions are unavoidable. When implementing them in HTML, CSS, and JavaScript, you must use the proper hiding technique and communicate the state accordingly.

8.1 Hide Content

Problem

CSS offers many different solutions for hiding content. If you don’t pick the proper technique for the correct use case, it can affect users negatively depending on how they access your site.

• It can be frustrating and confusing for keyboard and screen reader users if they have to navigate content they don’t want to, have to, or should be able to access.

• Tabbing through dozens of “invisible” interactive elements can be cumbersome.

• Screen readers might be unable to retrieve semantic information from an incorrectly hidden element.

Solution

You have to pick the correct hiding technique for the right use case.

Visually hidden

Suppose you want to hide content visually but keep it accessible to screen reader and keyboard users. In that case, you must use a combination of CSS properties (see Example 8-1) because it’s impossible to do it natively in CSS.

Example ...