We detected an element functioning as a tab missing a tab role

We detected an element functioning as a tab missing a tab role — rule summary

Field	Value
Rule code	Manual_Tab_Role_Missing
WCAG conformance level	A
WCAG success criterion	4.1.2 Name, Role, Value
Must be fixed at source	No

Description

We detected an element that appears to function as a tab but is missing the required 'tab' role. Tabs are interactive elements that allow users to navigate between related content panels. Without the proper ARIA role of 'tab', assistive technologies will not correctly announce the element's purpose, making it difficult for screen reader users to understand the interface structure. Each tab must have role='tab' to properly communicate its function to assistive technologies.

How to fix

Add the role="tab" attribute to all elements functioning as tabs. Ensure each tab is contained within an element with role="tablist" and controls a corresponding element with role="tabpanel".

<div role="tablist">
  <button role="tab" id="tab1" aria-selected="true" aria-controls="panel1">Tab 1</button>
  <button role="tab" id="tab2" aria-selected="false" aria-controls="panel2">Tab 2</button>
</div>

<div id="panel1" role="tabpanel" aria-labelledby="tab1">Tab panel 1 content</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>Tab panel 2 content</div>