Avoid tab groups

Tab groups are a sub-par solution used in a couple of scenarios:

  • A page has become bloated with content and the designer seeks to condense even more information into a tighter space.
  • It’s also possible a product owner still believes it’s the year 1999 and people don’t know how to scroll.

Either way, it’s about trying to cram low quality content into a page until it becomes a high quality experience, which is not a good plan.

Why tab groups are problematic

  • 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.
  • It requires the screenreader user to repeatedly parse the content to consume it.
  • Interaction rates will be exceedingly low for anything but the first tab panel (like a carousel).

What to do instead

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 controls. This will be easier to understand for screenreader users (as is done with this website’s tabs).

Wait, then why are you using tabs on this site?

  • See above: The page has become bloated with content and the designer seeks to condense even more information into a tighter space.

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>