Example of Tabs with Manual Activation
source link: https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Example of Tabs with Manual Activation
The below example section demonstrates a tabs widget that implements the tabs design pattern. In this example, a new panel is displayed only after the user activates a tab with either Space, Enter, or a mouse click. Typically, manual activation of tabs is only necessary when panels cannot be displayed instantly, i.e., not all the panel content is present in the DOM. For additional guidance, see Deciding When to Make Selection Automatically Follow Focus.
Similar examples include:
- Example of Tabs with Automatic Activation: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.
Example
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.
Accessibility Features
To demonstrate the effects of deleting a tab, the third tab, labeled Joke, can be deleted when it has focus by pressing Delete.
Keyboard Support
Key Function Tab- When focus moves into the tab list, places focus on the active
tab
element . - When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the
tabpanel
element.
Space When a tab has focus, activates the tab, causing its associated panel to be displayed. Right Arrow When a tab has focus:
- Moves focus to the next tab.
- If focus is on the last tab, moves focus to the first tab.
- Moves focus to the previous tab.
- If focus is on the first tab, moves focus to the last tab.
Role, Property, State, and Tabindex Attributes
Role Attribute Element Usagetablist
div
Indicates that the element serves as a container for a set of tabs.
aria-label=Entertainment
div
Provides a label that describes the purpose of the set of tabs.
tab
button
- Indicates the element serves as a tab control.
-
Provides a title for its associated
tabpanel
.
aria-selected=true
button
- Indicates the tab control is activated and its associated panel is displayed.
- Set when a user activates a tab.
- Does not change when focus moves in the
tablist
.
aria-selected=false
button
- Indicates the tab control is not active and its associated panel is NOT displayed.
- Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
tabindex=-1
button
- Removes the element from the page Tab sequence.
- Set when a tab is not selected so that only the selected (active) tab is in the page Tab sequence.
- Since an HTML
button
element is used for the tab, it is not necessary to settabindex=0
on the selected (active) tab element. - This approach to managing focus is described in the section on roving tabindex.
aria-controls=IDREF
button
Refers to the tabpanel
element associated with the tab.
tabpanel
div
- Indicates the element serves as a container for tab panel content.
-
Is hidden unless its associated
tab
control is activated.
aria-labelledby=IDREF
div
-
Refers to the
tab
element that controls the panel. - Provides an accessible name for the tab panel.
tabindex=0
div
- Puts the tabpanel in the page Tab sequence.
- Facilitates movement to panel content for assistive technology users.
- Especially helpful if there are panels that do not contain a focusable element.
Javascript and CSS Source Code
HTML Source Code
<div class="tabs">
<div role="tablist" aria-label="Entertainment">
<button role="tab"
aria-selected="true"
aria-controls="nils-tab"
id="nils">
Nils Frahm
</button>
<button role="tab"
aria-selected="false"
aria-controls="agnes-tab"
id="agnes"
tabindex="-1">
Agnes Obel
</button>
<button role="tab"
aria-selected="false"
aria-controls="complexcomplex"
id="complex"
tabindex="-1"
data-deletable="">
Joke
</button>
</div>
<div tabindex="0"
role="tabpanel"
id="nils-tab"
aria-labelledby="nils">
<p>
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.
</p>
</div>
<div tabindex="0"
role="tabpanel"
id="agnes-tab"
aria-labelledby="agnes"
hidden="">
<p>
Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.
</p>
</div>
<div tabindex="0"
role="tabpanel"
id="complexcomplex"
aria-labelledby="complex"
hidden="">
<p>
Fear of complicated buildings:
</p>
<p>
A complex complex complex.
</p>
</div>
</div>
Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK