A tab without a state attribute was detected
| Field | Value |
|---|---|
| Rule code | Manual_Tab_State_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
Elements that act as tabs and trigger functionality like tabs require an aria-selected attribute that reflects their active state. When the tab is activated, aria-selected should be set to true, and vice versa. Without the aria-selected attribute, the functionality of tabs will not be recognized by screen readers.
How to fix
Add the aria-selected attribute to all tab elements. Set aria-selected="true" for the currently selected tab and aria-selected="false" for all other tabs. Update these values programmatically when tabs are activated.