ARIA: tabpanel role

Draft: This page is not complete.

The ARIA tabpanel role indicates



An element with the tabpanel role

Associated Roles and Attributes

Keyboard interaction

Key Action

Required JavaScript features 

Note: 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.


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>

Added benefits

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


Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'tabpanel' in that specification.
WAI-ARIA Authoring Practices 1.2
The definition of 'tabpanel' 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 precedence over this one, and which property will be overwritten.