Note that tabs can be given role="tablist"
, role="tab"
and role="tabpanel"
attributes.
These are appropriate for tabbed interfaces, as described in the WAI
ARIA Authoring Practices.
If your control element is targeting a single collapsible element - you should add the aria-controls
attribute to the control element,
containing the id
of the collapsible element.
To confirm the tab content opening you should use aria-selected
property.
If aria-selected="true"
it indicates the tab control is activated and its associated panel is displayed.
If you use a visible text element on the page as a label for a focusable element - you should add aria-labelledby
. It refers to the tab element that controls the panel.
LEFT_ARROW
|
Move focus to previous tab |
RIGHT_ARROW
|
Move focus to next tab |
HOME
|
Move focus to first tab |
END
|
Move focus to last tab |
SPACE or ENTER
|
Switch to focused tab |