ARIA tabs widget Example
NOTE: Please provide feedback on this example in issue 114.
Creating a tabs widget using role=tab, role=tablist, and role=tablist.
Authoring Practice Design Patten for Tabs
Note: When using HTML, use the <button> element for tabs. It is recommended that authors not re-purpose other elements to create buttons.
Tabs Example
The following examples are composed by a <div> elements for the tab panels and <button> elements functioning as tabs.
Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.
Helios (Keith Kenniff) is an American composer, multi-instrumentalist, and electronic music producer. He composes ambient/electronic music under the moniker Helios and post-classical piano music under Goldmund. He is also one half of the indie band Mint Julep, and ambient project "A Pale Fire". Keith is also a composer for film, television, dance and performance art. In 2010 he created the record label Unseen.
Fear of complicated buildings:
A complex complex complex.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the active tab or first focusable in the tab panel. |
| left arrow | Moves focus to the previous tab. |
| right arrow | Moves focus to the next tab. |
| home | Moves focus to the first tab. |
| end | Moves focus to the last tab. |
| delete | If deletion is allowed, deletes the current tab element and its associated tab panel. |
ARIA Roles, Properties and States
| Role | Property/State | Component | Usage |
|---|---|---|---|
| tablist |
|
||
| tab |
|
||
| tabpanel |
|
||
| aria-controls | element with role of tab |
|
Source Code
HTML Code
HTML source code is generated by scripting using ID references.