How do you handle nested tabs and accordions in a way that is not confusing for users with disabilities?
Tabs and accordions are common web design elements that allow users to expand and collapse content sections. They can save space, organize information, and improve user experience. However, they can also pose accessibility challenges for users with disabilities, especially when they are nested inside each other. How do you handle nested tabs and accordions in a way that is not confusing for users with disabilities? In this article, you will learn some best practices for designing and coding accessible tabs and accordions, based on the Web Content Accessibility Guidelines (WCAG).
One of the most important aspects of accessible tabs and accordions is to use clear and descriptive labels and headings for each section. Labels and headings should indicate the content and purpose of each section, and avoid ambiguity or duplication. They should also be visible and readable for all users, regardless of their screen size, zoom level, or color contrast preferences. Labels and headings should be marked up with appropriate HTML elements, such as <h1> to <h6> for headings, and <button> or <a> for labels, to convey their semantic meaning and role to assistive technologies.
-
This is a little confusing to me. When we talk about labels we could be talking about an HTML label element. It would be good to expand on where you would use a heading and where you would use a button or anchor element. You could do this with code examples. It would be good to actually have a working example that portrays this advice. You should also mention that an anchor and button can mean different things semantically. Typically links are for navigation (maybe navigating to another page), whereas a button (which has different types) are good for performing an action (e.g. opening, closing a section).
Another essential feature of accessible tabs and accordions is to provide keyboard and focus support for users who navigate with the keyboard or other input devices. Users should be able to access, activate, and move between tabs and accordions using the tab, arrow, enter, and space keys, as well as the home and end keys for quick navigation. Users should also be able to see where their focus is on the page, by using visible focus indicators, such as outlines or highlights, for the active tab or accordion. Focus should also be managed properly, by moving the focus to the relevant content area when a tab or accordion is expanded, and by trapping the focus within a modal dialog if needed.
Adding aria attributes and roles improves the accessibility and usability of the web elements. Aria attributes and roles are a set of standards that define how web elements are exposed to assistive technologies, such as screen readers or voice assistants. They can provide additional information, such as state, name, value, or description, that may not be obvious from the HTML markup alone. For example, you can use aria-selected, aria-expanded, aria-controls, and aria-labelledby to indicate which tab or accordion is selected, expanded, controlled, or labeled by another element. You can also use aria-hidden to hide irrelevant or redundant content from assistive technologies.
-
Dynamic changes (accordion) on a page is super common but can also confusing if the changes aren’t announced. You can use aria-live to help announce these changes. It may also be worth noting that using no aria is better than using aria incorrectly, which can totally mess with the UX when used improperly.
A fourth and final recommendation is to avoid excessive nesting and complexity that may confuse or overwhelm users with disabilities. Nesting tabs and accordions inside each other can create multiple levels of hierarchy and interaction that may be difficult to perceive, understand, and navigate. It can also increase the cognitive load and memory demand for users who have to remember the state and location of each section. Therefore, you should limit the number of nested tabs and accordions to a minimum, and consider alternative ways to present your content, such as using headings, lists, tables, or graphs.
-
Reworking your initial concept to accommodate assistive technologies like screen readers can sometimes lead to a better result all around. If you have multiple nested tabs and accordions that are not necessary, this process might help you clean that up for everyone. Often times, the inclination to over-organize information (like you might with a folder structure on your computer for example) interferes with good design and user experience, as well as accessibility. e.g. Don't obfuscate content behind unnecessary accordions. But, if you absolutely must, use the appropriate DOM structures (e.g. a list element, appropriate heading levels and paragraphs, etc. as the case may be).
Rate this article
More relevant reading
-
Systems AnalysisHow do you design accessible interfaces for users with disabilities?
-
Product ManagementWhat are the best metrics to measure the accessibility of your product for users with disabilities?
-
User ExperienceWhat techniques can you use to design for people with disabilities?
-
Usability TestingWhat are the most effective ways to include people with disabilities in digital product design?