ARIA: Tab Role

Draft
This page is not complete.

{{ariaref}}

The ARIA tab role indicates an interactive element that, when activated, displays its associated tab panel.

<div role="tab" 
    aria-selected="true" aria-controls="tabpanel-id"   
    id="tab-id" tabindex="0">Tab label</div>

Description

general description of what it does:Include a complete description of the attribute or role

Details of implementation: By setting an element's role attribute to tab, the element will be exposed as a tab in user agents. The currently selected tab should have its aria-selected-attribute set to true. All other tabs in the tab list (link to tablist?) should have their aria-selected-attribute set to false. The tab’s aria-controls-attribute should point to tab’s associated tab panel ID; this helps users navigate to the tab panel. The tab’s id is used to label the tab panel (link to example of tabpanel). Because divs aren’t in a page’s keyboard-focus order by default tabindex needs to be set to 0.

Associated Roles and Attributes

aria-selected
 
tabpanel
content
aria-controls
content
id
content

Keyboard interaction

Key Action
Tab When focus is outside of the tablist moves focus to the active tab. If focus is on the active tab moves focus to the next element in the keyboard focus order.
Activates the next tab in the tab list. If the current tab is the last tab in the tab list it activates the first tab.
Activates the previous tab in the tab list. If the current tab is the first tab in the tab list it activates the last tab.
Delete When allowed removes the currently selected tab from the tab list.

Required JavaScript features 

Include note about semantic alternatives to using this role or attribute. The first rule of ARIA use is you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. Then post full details in best practices section below.

Examples

Fill in a simple example that nicely shows a typical usage of the property, then perhaps some more complex examples (see our guide on how to add code examples for more information).

<div role="tablist">
<div role="tab" aria-selected="true" aria-controls="tabpanel-id"
id="tab-id" tabindex="0">Tab label</div> 

Accessibility concerns

Optionally, warn of any potential accessibility concerns that exist with using this property, and how to work around them. Remove this section if there are none to list.

Best practices

Optionally, here list any best practices that exist for this role. Remove the section if none exist.

Added benefits

Any additional benefits this feature has for non-typical screen reader users, like Google or mobile speech recognition.

Specifications

Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'tab' in that specification.
Recommendation
WAI-ARIA Authoring Practices
The definition of 'tabs' in that specification.
Working Draft

Precedence order

What are the related properties, and in what order will this attribute or property be read (which property will take precendence over this one, and which property will be overwritten.

Screen reader support

TBD

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, Moiety, chrisdavidmills, estelle
Last updated by: mdnwebdocs-bot,