De rollen tablist
, tab
en tabpanel
tonen de elementen <ul>
, <a>
en <div>
als een verzameling tabbladen en bijbehorende tabbladen in de toegankelijkheidsboom.
De rol presentation
voorkomt dat de <li>
-elementen in kaart worden gebracht in de toegankelijkheidsboom.
Het aria-selected
kenmerk geeft aan welk tabblad momenteel is geselecteerd.
Het tabindex
-attribuut zorgt ervoor dat alleen het momenteel geselecteerde tabblad in de tabvolgorde wordt opgenomen.
Het hidden
attribuut verbergt alles behalve het momenteel weergegeven tabpaneel voor weergave.
Het kenmerk aria-controls
legt een relatie tussen elk tabblad en het bijbehorende tabblad.
Het kenmerk aria-labelledby
hergebruikt de naam van het tabblad als de toegankelijke naam van het bijbehorende tabblad.
De click
- en keydown
- event listeners leggen de verwachte muis- en toetsenbordgebeurtenissen vast voor het activeren van de tabbladen. Scriptend moet ervoor gezorgd worden dat de a daarin niet meer reageert.
Zie ook https://getbootstrap.com/docs/3.3/components/#nav-disabled-links.
<!-- Default -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<!-- Three Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab3" aria-controls="Tab3-tab">Tab 3</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<div tabindex="0" role="tabpanel" id="Tab3-tab" aria-labelledby="Tab3" hidden>
Inhoud Tab 3
</div>
<!-- Four Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab3" aria-controls="Tab3-tab">Tab 3</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab4" aria-controls="Tab4-tab">Tab 4</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<div tabindex="0" role="tabpanel" id="Tab3-tab" aria-labelledby="Tab3" hidden>
Inhoud Tab 3
</div>
<div tabindex="0" role="tabpanel" id="Tab4-tab" aria-labelledby="Tab4" hidden>
Inhoud Tab 4
</div>
<!-- Five Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab3" aria-controls="Tab3-tab">Tab 3</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab4" aria-controls="Tab4-tab">Tab 4</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab5" aria-controls="Tab5-tab">Tab 5</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<div tabindex="0" role="tabpanel" id="Tab3-tab" aria-labelledby="Tab3" hidden>
Inhoud Tab 3
</div>
<div tabindex="0" role="tabpanel" id="Tab4-tab" aria-labelledby="Tab4" hidden>
Inhoud Tab 4
</div>
<div tabindex="0" role="tabpanel" id="Tab5-tab" aria-labelledby="Tab5" hidden>
Inhoud Tab 5
</div>
<!-- Six Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab3" aria-controls="Tab3-tab">Tab 3</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab4" aria-controls="Tab4-tab">Tab 4</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab5" aria-controls="Tab5-tab">Tab 5</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab6" aria-controls="Tab6-tab">Tab 6</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<div tabindex="0" role="tabpanel" id="Tab3-tab" aria-labelledby="Tab3" hidden>
Inhoud Tab 3
</div>
<div tabindex="0" role="tabpanel" id="Tab4-tab" aria-labelledby="Tab4" hidden>
Inhoud Tab 4
</div>
<div tabindex="0" role="tabpanel" id="Tab5-tab" aria-labelledby="Tab5" hidden>
Inhoud Tab 5
</div>
<div tabindex="0" role="tabpanel" id="Tab6-tab" aria-labelledby="Tab6" hidden>
Inhoud Tab 6
</div>
<!-- Seven Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab3" aria-controls="Tab3-tab">Tab 3</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab4" aria-controls="Tab4-tab">Tab 4</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab5" aria-controls="Tab5-tab">Tab 5</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab6" aria-controls="Tab6-tab">Tab 6</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab7" aria-controls="Tab7-tab">Tab 7</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<div tabindex="0" role="tabpanel" id="Tab3-tab" aria-labelledby="Tab3" hidden>
Inhoud Tab 3
</div>
<div tabindex="0" role="tabpanel" id="Tab4-tab" aria-labelledby="Tab4" hidden>
Inhoud Tab 4
</div>
<div tabindex="0" role="tabpanel" id="Tab5-tab" aria-labelledby="Tab5" hidden>
Inhoud Tab 5
</div>
<div tabindex="0" role="tabpanel" id="Tab6-tab" aria-labelledby="Tab6" hidden>
Inhoud Tab 6
</div>
<div tabindex="0" role="tabpanel" id="Tab7-tab" aria-labelledby="Tab7" hidden>
Inhoud Tab 7
</div>
<!-- Eight Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab3" aria-controls="Tab3-tab">Tab 3</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab4" aria-controls="Tab4-tab">Tab 4</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab5" aria-controls="Tab5-tab">Tab 5</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab6" aria-controls="Tab6-tab">Tab 6</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab7" aria-controls="Tab7-tab">Tab 7</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab8" aria-controls="Tab8-tab">Tab 8</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<div tabindex="0" role="tabpanel" id="Tab3-tab" aria-labelledby="Tab3" hidden>
Inhoud Tab 3
</div>
<div tabindex="0" role="tabpanel" id="Tab4-tab" aria-labelledby="Tab4" hidden>
Inhoud Tab 4
</div>
<div tabindex="0" role="tabpanel" id="Tab5-tab" aria-labelledby="Tab5" hidden>
Inhoud Tab 5
</div>
<div tabindex="0" role="tabpanel" id="Tab6-tab" aria-labelledby="Tab6" hidden>
Inhoud Tab 6
</div>
<div tabindex="0" role="tabpanel" id="Tab7-tab" aria-labelledby="Tab7" hidden>
Inhoud Tab 7
</div>
<div tabindex="0" role="tabpanel" id="Tab8-tab" aria-labelledby="Tab8" hidden>
Inhoud Tab 8
</div>
<!-- Nine Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab3" aria-controls="Tab3-tab">Tab 3</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab4" aria-controls="Tab4-tab">Tab 4</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab5" aria-controls="Tab5-tab">Tab 5</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab6" aria-controls="Tab6-tab">Tab 6</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab7" aria-controls="Tab7-tab">Tab 7</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab8" aria-controls="Tab8-tab">Tab 8</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab9" aria-controls="Tab9-tab">Tab 9</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<div tabindex="0" role="tabpanel" id="Tab3-tab" aria-labelledby="Tab3" hidden>
Inhoud Tab 3
</div>
<div tabindex="0" role="tabpanel" id="Tab4-tab" aria-labelledby="Tab4" hidden>
Inhoud Tab 4
</div>
<div tabindex="0" role="tabpanel" id="Tab5-tab" aria-labelledby="Tab5" hidden>
Inhoud Tab 5
</div>
<div tabindex="0" role="tabpanel" id="Tab6-tab" aria-labelledby="Tab6" hidden>
Inhoud Tab 6
</div>
<div tabindex="0" role="tabpanel" id="Tab7-tab" aria-labelledby="Tab7" hidden>
Inhoud Tab 7
</div>
<div tabindex="0" role="tabpanel" id="Tab8-tab" aria-labelledby="Tab8" hidden>
Inhoud Tab 8
</div>
<div tabindex="0" role="tabpanel" id="Tab9-tab" aria-labelledby="Tab9" hidden>
Inhoud Tab 9
</div>
<!-- Ten Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Tab1" aria-controls="Tab1-tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab2" aria-controls="Tab2-tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab3" aria-controls="Tab3-tab">Tab 3</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab4" aria-controls="Tab4-tab">Tab 4</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab5" aria-controls="Tab5-tab">Tab 5</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab6" aria-controls="Tab6-tab">Tab 6</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab7" aria-controls="Tab7-tab">Tab 7</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab8" aria-controls="Tab8-tab">Tab 8</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab9" aria-controls="Tab9-tab">Tab 9</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Tab10" aria-controls="Tab10-tab">Tab 10</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Tab1-tab" aria-labelledby="Tab1">
Inhoud Tab 1
</div>
<div tabindex="0" role="tabpanel" id="Tab2-tab" aria-labelledby="Tab2" hidden>
Inhoud Tab 2
</div>
<div tabindex="0" role="tabpanel" id="Tab3-tab" aria-labelledby="Tab3" hidden>
Inhoud Tab 3
</div>
<div tabindex="0" role="tabpanel" id="Tab4-tab" aria-labelledby="Tab4" hidden>
Inhoud Tab 4
</div>
<div tabindex="0" role="tabpanel" id="Tab5-tab" aria-labelledby="Tab5" hidden>
Inhoud Tab 5
</div>
<div tabindex="0" role="tabpanel" id="Tab6-tab" aria-labelledby="Tab6" hidden>
Inhoud Tab 6
</div>
<div tabindex="0" role="tabpanel" id="Tab7-tab" aria-labelledby="Tab7" hidden>
Inhoud Tab 7
</div>
<div tabindex="0" role="tabpanel" id="Tab8-tab" aria-labelledby="Tab8" hidden>
Inhoud Tab 8
</div>
<div tabindex="0" role="tabpanel" id="Tab9-tab" aria-labelledby="Tab9" hidden>
Inhoud Tab 9
</div>
<div tabindex="0" role="tabpanel" id="Tab10-tab" aria-labelledby="Tab10" hidden>
Inhoud Tab 10
</div>
<ul class="nav nav-tabs" role="tablist">
{%- for tab in tabs %}
<li {{ className(tab.modifiers) }} role="presentation">
<a href="{{ tab.url }}"
role="tab"
aria-selected="{{ true if tab.modifiers=='active' else false }}"
id="{{ tab.label | replace(" ", "") }}"
aria-controls="{{ tab.label | replace(" ", "") }}-tab">
{{- tab.label -}}
</a>
</li>
{%- endfor -%}
</ul>
{%- for tab in tabs %}
<div
tabindex="0"
role="tabpanel"
id="{{ tab.label | replace(" ", "") }}-tab"
aria-labelledby="{{ tab.label | replace(" ", "") }}"
{% if tab.modifiers!='active' %}hidden{% endif %}>
Inhoud {{ tab.label }}
</div>
{%- endfor -%}
/* Default */
__title: Two tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
modifiers: disabled
/* Three Tabs */
__title: Three tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
- label: Tab 3
url: '#'
modifiers: disabled
/* Four Tabs */
__title: Four tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
- label: Tab 3
url: '#'
- label: Tab 4
url: '#'
modifiers: disabled
/* Five Tabs */
__title: Five tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
- label: Tab 3
url: '#'
- label: Tab 4
url: '#'
- label: Tab 5
url: '#'
modifiers: disabled
/* Six Tabs */
__title: Six tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
- label: Tab 3
url: '#'
- label: Tab 4
url: '#'
- label: Tab 5
url: '#'
- label: Tab 6
url: '#'
modifiers: disabled
/* Seven Tabs */
__title: Seven tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
- label: Tab 3
url: '#'
- label: Tab 4
url: '#'
- label: Tab 5
url: '#'
- label: Tab 6
url: '#'
- label: Tab 7
url: '#'
modifiers: disabled
/* Eight Tabs */
__title: Eight tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
- label: Tab 3
url: '#'
- label: Tab 4
url: '#'
- label: Tab 5
url: '#'
- label: Tab 6
url: '#'
- label: Tab 7
url: '#'
- label: Tab 8
url: '#'
modifiers: disabled
/* Nine Tabs */
__title: Nine tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
- label: Tab 3
url: '#'
- label: Tab 4
url: '#'
- label: Tab 5
url: '#'
- label: Tab 6
url: '#'
- label: Tab 7
url: '#'
- label: Tab 8
url: '#'
- label: Tab 9
url: '#'
modifiers: disabled
/* Ten Tabs */
__title: Ten tabs
tabs:
- label: Tab 1
url: '#'
modifiers: active
- label: Tab 2
url: '#'
- label: Tab 3
url: '#'
- label: Tab 4
url: '#'
- label: Tab 5
url: '#'
- label: Tab 6
url: '#'
- label: Tab 7
url: '#'
- label: Tab 8
url: '#'
- label: Tab 9
url: '#'
- label: Tab 10
url: '#'