Accessibility
- 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 roletablist
. - Each element that contains the content panel for a
tab
has roletabpanel
. - If the tab list has a visible label, the element with role
tablist
hasaria-labelledby
set to a value that refers to the labelling element. Otherwise, thetablist
element has a label provided byaria-label
. - Each element with role
tab
has the propertyaria-controls
referring to its associatedtabpanel
element. - The active
tab
element has the statearia-selected
set totrue
and all othertab
elements have it set tofalse
. - Each element with role
tabpanel
has the propertyaria-labelledby
referring to its associatedtab
element. - If a
tab
element has a pop-up menu, it has the propertyaria-haspopup
set to eithermenu
ortrue
. - If the
tablist
element is vertically oriented, it has the propertyaria-orientation
set tovertical
. The default value ofaria-orientation
for a tablist element is horizontal. - When focus moves into the tab list, focus is placed on the active tab element. When the tab list contains the focus, focus moves to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.
Was this page helpful?
Thanks for your feedback!