Tabs: Tab widget is missing appropriate roles and/or attributes
custom-tabs
Rule
The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.
Background
Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.
How to Fix
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
Fix this issue by using the following roles and attributes:
- The element that serves as the container for the set of tabs has role tablist.
- Each element that serves as a tab has role tab and is contained within the element with role tablist.
- Each element that contains the content panel for a tab has role tabpanel.
- Each element with role tab has the property aria-controls referring to its associated tabpanel element.
- The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
- Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
- If the tablist element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a tablist element is horizontal.
View the full ARIA design pattern including expected keyboard interaction and examples: hhttps://www.w3.org/WAI/ARIA/apg/patterns/tabs/