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="Zoekopadres" aria-controls="Zoekopadres-tab">Zoek op adres</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Postcodeenhuisnummer" aria-controls="Postcodeenhuisnummer-tab">Postcode en huisnummer</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Kadastraalnummer" aria-controls="Kadastraalnummer-tab">Kadastraal nummer</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Coordinaten" aria-controls="Coordinaten-tab">Coordinaten</a>
</li>
</ul>
<div tabindex="1" role="tabpanel" id="Zoekopadres-tab" aria-labelledby="Zoekopadres">
Inhoud Zoek op adres
</div>
<div tabindex="0" role="tabpanel" id="Postcodeenhuisnummer-tab" aria-labelledby="Postcodeenhuisnummer" hidden>
Inhoud Postcode en huisnummer
</div>
<div tabindex="0" role="tabpanel" id="Kadastraalnummer-tab" aria-labelledby="Kadastraalnummer" hidden>
Inhoud Kadastraal nummer
</div>
<div tabindex="0" role="tabpanel" id="Coordinaten-tab" aria-labelledby="Coordinaten" hidden>
Inhoud Coordinaten
</div>
<!-- Tab Disabled -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Zoekopadres" aria-controls="Zoekopadres-tab">Zoek op adres</a>
</li>
<li class="active" role="presentation">
<a href="#" role="tab" aria-selected="true" id="Postcodeenhuisnummer" aria-controls="Postcodeenhuisnummer-tab">Postcode en huisnummer</a>
</li>
<li role="presentation">
<a href="#" role="tab" aria-selected="false" id="Kadastraalnummer" aria-controls="Kadastraalnummer-tab">Kadastraal nummer</a>
</li>
<li class="disabled" role="presentation">
<a href="#" role="tab" aria-selected="false" id="Coordinaten" aria-controls="Coordinaten-tab">Coordinaten</a>
</li>
</ul>
<div tabindex="0" role="tabpanel" id="Zoekopadres-tab" aria-labelledby="Zoekopadres" hidden>
Inhoud Zoek op adres
</div>
<div tabindex="1" role="tabpanel" id="Postcodeenhuisnummer-tab" aria-labelledby="Postcodeenhuisnummer">
Inhoud Postcode en huisnummer
</div>
<div tabindex="0" role="tabpanel" id="Kadastraalnummer-tab" aria-labelledby="Kadastraalnummer" hidden>
Inhoud Kadastraal nummer
</div>
<div tabindex="0" role="tabpanel" id="Coordinaten-tab" aria-labelledby="Coordinaten" hidden>
Inhoud Coordinaten
</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="{{ 1 if tab.modifiers=='active' else 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: Standaard
tabs:
- label: Zoek op adres
url: '#'
modifiers: active
- label: Postcode en huisnummer
url: '#'
- label: Kadastraal nummer
url: '#'
- label: Coordinaten
url: '#'
/* Tab Disabled */
__title: Tab deactief
tabs:
- label: Zoek op adres
url: '#'
- label: Postcode en huisnummer
url: '#'
modifiers: active
- label: Kadastraal nummer
url: '#'
- label: Coordinaten
url: '#'
modifiers: disabled