Tabs

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: '#'