Avoid tab groups

  • Many people who use a screenreader don’t know how to operate a tab group with the arrow keys and can miss parts of the content.
  • Tab groups are a solution used when a page has become bloated with content and designer seek to condense even more information into a tighter space.
  • Interaction rates will be exceedingly low for anything but the first tab panel.
  • Rather than cramming more content into the page, consider breaking the page into more concise sections or separate pages.

Still need a solution?

  • Use radio buttons as tabs. This will be easier to understand for screenreader users (as is done with this website’s tabs).

Code examples

Use semantic HTML where possible

<div class="tabs">
  <div role="tablist">
    <button role="tab"
            aria-selected="true" 
            aria-controls="alpha-tab" 
            id="alpha">
            Alpha
    </button>
    <button role="tab" 
            aria-selected="false" 
            aria-controls="bravo-tab" 
            id="bravo" 
            tabindex="-1">
            Bravo
    </button>
    <button role="tab" 
            aria-selected="false" 
            aria-controls="charlie-tab" 
            id="charlie" 
            tabindex="-1">
            Charlie
    </button>
  </div>
  <div role="tabpanel" 
       id="alpha-tab" 
       aria-labelledby="alpha"
       tabindex="0">
    <p>Alpha is the first letter of the NATO alphabet</p>
  </div>
  <div role="tabpanel" 
       id="bravo-tab" 
       aria-labelledby="bravo"
       tabindex="0">
    <p>Alpha is the first letter of the NATO alphabet</p>
  </div>
  <div role="tabpanel" 
       id="charlie-tab" 
       aria-labelledby="charlie"
       tabindex="0">
    <p>Charlie is the best letter of the NATO alphabet</p>
  </div>
</div>