Rethinking Tabs and Accordions

During an engagement at Amazon, I was tasked with doing an assessment of their online job application process. A portion of it included a multiple-choice/fill-in-the-blank test, whereby the applicant had to choose the proper word or phrase to complete a sentence. Typically, when I encounter an accessibility problem I haven’t seen before, I just do a web search to see how other people have approached the issue. But in this case, I couldn’t find any precedent for it. So I was left scratching my head as to how it could be implemented in an accessible manner.

One of the benefits of working for Amazon is that they have a group of employees known as “Persons with Disabilities” (or PWD for short). The group is comprised of people throughout the company who have a variety of disabilities, and they are a great resource for real-world Q&A, and A/B Testing. When I presented some prototypes to the group, the initial response was a resounding, “you’re making it too complicated”.

The moral of the story is that while well-meaning, we as Accessibility Specialists sometimes try to help too much. And in the process, we actually make things less accessible. There’s a saying in the industry: “no ARIA is better than bad ARIA”. Two examples which (in my opinion) illustrate this are tabs and accordions. The issue with components such as these (as well as navigation menus) is that there is no one set standard, and there’s a lot of disagreement on how best to implement them.

Common Approaches

Both the W3C’s recommended Tabs Pattern and Accordion Pattern utilize buttons to show and hide content, numerous ARIA attributes and roles, and arrow keys for navigation. But in essence, tabs and accordions are nothing more than anchor links, which take users to a section of the current page. So why not just code them as such? This not only simplifies coding for developers and reduces possible defects, but it also reduces the learning curve and level of effort for users. For example, how does someone who has recently lost their sight, or a user who has temporarily lost their ability to use a mouse know that they need to use the arrow keys to navigate a set of tabs?

A better (and simpler) way

Tabs

Here we simply create a <nav> element with a series of links which lead to the corresponding <section>.

<div class="tabs">
  <nav aria-label="Services" id="services" tabindex="-1">
    <ul>
      <li><a href="#panel-one" id="tab-one">Painting</a></li>
      <li><a href="#panel-two" id="tab-two">Roofing</a></li>
      <li><a href="#panel-three" id="tab-three">Foundation Work</a></li>
    </ul>
  </nav>
  <section id="panel-one" tabindex="-1">
     <p>We do both interior and exterior painting</p>
     <p><a href="#services">Back to services menu</a></p>
  </section>
  <section id="panel-two" tabindex="-1">
     <p>We can replace or fix your roof</p>
     <p><a href="#services">Back to services menu</a></p>
  </section>
  <section id="panel-three" tabindex="-1">
     <p>We can fix your driveway or pour a new patio</p>
     <p><a href="#services">Back to services menu</a></p>
  </section>
</div>

Note: depending upon the amount of content in each section, you may want to hide the “back” links for sighted non-keyboard users until they receive focus, much like we do with skip links to reduce clutter and noise.

Accordions

With accordions, we use the same approach, but the links directly precede each section, rather than being contained within a single <nav> element.

<div class="accordion">
  <h2><a href="#section-one">Painting</a></h2>
    <section id="section-one" tabindex="-1">
      <p>We do both interior and exterior painting</p>
    </section>
  <h2><a href="#section-two">Roofing</a></h2>
    <section id="section-two" tabindex="-1">
      <p>We can replace or fix your roof</p>
    </section>
  <h2><a href="#section-three">Foundation Work</a></h2>
    <section id="section-three" tabindex="-1">
      <p>We can fix your driveway or pour a new patio</p>
    </section>
</div>

Now, one could argue that in the case of accordions, having links which merely go to the next element in the cascade order is kind of silly, and I concur. But not any more silly than using buttons with aria-controls, aria-expanded, etc. to accomplish the same task. In both of the examples above, all one needs to do is style the tabs/accordion controls, and show/hide the relevant sections on focus.

Update 7/15/24: initially we recommended the HTML <details> element as an alternative method of building accordions. After further testing, we no longer recommend this method, as headings are not supported inside the <summary>. An updated version of this article will be available soon, along with a fully working example of the technique we recommend above.