ARIA for Tabbed components

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

ARIA for Tabbed components

You need to know two things to build or Tabbed components.

  1. Roles for a Tabbed component
  2. aria-selected

Roles for a Tabbed component

There are three roles for a Tabbed component:

  1. Tab
  2. Tablist
  3. Tabpanel

A tab role tells screen reader users they’re on a tab. Tabs should be placed in an element with a tablist role.

<div role="tabslist">
  <button role="tab"> ... </button>
  <button role="tab"> ... </button>
  <button role="tab"> ... </button>
</div>

When a tab is selected, their respective content must be shown. The content must have a tabpanel role.

Aria-selected

aria-selected indicates whether an element is selected. It can either be true or false.

  • true: Element is selected
  • false: Element is not selected

aria-selected can only be used in these four roles:

  1. row
  2. gridcell
  3. option
  4. tab

This means aria-selected can only be used in these three composite roles:

  1. grid
  2. listbox
  3. tablist