Bug 87: Tabs with Wrong ARIA Roles (F15)

WCAG 4.1.2 (Name, Role, Value) | Tab component with incorrect or missing ARIA.

Failure F15: Tabs Without ARIA Roles

Overview

This is the overview section content.

Details

This is the details section.

Comments

Comments section here.

Settings

Settings options.

Issues:

Buttons don't have role="tab"
No aria-selected to indicate active tab
No aria-controls linking to tab panels
Tab panels don't have role="tabpanel"
No aria-labelledby on panels
Screen readers announce as buttons, not tabs
Keyboard navigation unclear (arrow keys?)

Failure F15: Tabs with Wrong Role Attributes

<div role="tabs">  <button role="tabitem">Tab 1</button>  <button role="tabitem">Tab 2</button> </div> <div role="tab">  Content 1 </div>

Issue: Misspelled or incorrect ARIA roles confuse assistive tech.

Failure F15: No Keyboard Navigation

Even with correct ARIA, tabs need keyboard support:

Arrow Right: Next tab
Arrow Left: Previous tab
Home: First tab
End: Last tab
Tab key: Move between tablist and tab panel

Issue: Custom tab components often lack these handlers, making keyboard navigation impossible.

Better Approach (For Reference)

<div role="tablist"> <button role="tab" id="tab1" aria-selected="true" aria-controls="tabpanel1"> Tab 1 </button> <button role="tab" id="tab2" aria-selected="false" aria-controls="tabpanel2" tabindex="-1"> Tab 2 </button> </div> <div role="tabpanel" id="tabpanel1" aria-labelledby="tab1"> Content 1 </div> <div role="tabpanel" id="tabpanel2" aria-labelledby="tab2" hidden> Content 2 </div>

HAL Fixes: HAL adds role="tablist" to container. HAL adds role="tab" to each tab button with aria-selected, aria-controls. HAL adds role="tabpanel" to content divs with aria-labelledby. HAL removes or manages tabindex for inactive tabs. HAL adds keyboard handlers (arrow keys, Home, End).