ARIA: tabpanel role


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 

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> 

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.


Specification Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'tabpanel' in that specification.
The definition of 'tabpanel' in that specification.

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.

Screen reader support