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 |