A11Y Area51

Tabs

Tabs that click and tabs that slide,

Must work with keys, not just with pride.

Clear focus styles, roles in place,

That’s how all users keep the pace.

Testing elements

Tabs

What is being tested

  • If tab controls container has role=”tablist”.

  • If tab controls are HTML buttons.

  • If tab controls are in an HTML list or announced as a list by screen readers.

  • If Tab controls have role=”tab” and aria-controls referencing the tab content container ID.

  • If tab panels have role=”tabpanel”.

  • If current tab control button has aria-selected=”true”.

  • If Tab panels have aria-labelledby referencing the button.

  • All focusable elements have a visible keyboard focus.