The best way to make information accessible is to not hide it.
When hiding content, we use display: none, hidden, or remove content from the DOM. Sometimes the only way to access this content is by a user action, such as clicking a button. This may seem easy enough, but can be difficult to appropriately label the button. If the user isn’t sure what they might get when clicking on it, they can be confused whether to click it or not. This problem can be seen in typical dropdown menus, tabs, accordions, carousels, and modals.
In this series, we will use new web platform tools to discover better ways to hide and show content visually, without removing the ability to access it directly with focus.
A list of links should be as simple as that, and deserves a heading to label what the list is. Use the tab key and Shift-tab to move focus between focusable elements. Notice that the dropdown is opened and closed automatically based on focus.
Internet Explorer does not support focus-within. I think we can accept that because the preponderance of screen reader users use modern browsers, and often mobile browsers. For Internet Explorer users, we’ll give them the user experience that they remember from those innocent early years of the web: hover.
Part 2: Collapsible sections or carousels? Coming soon…