GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen

Widget Tabs

Live-Beispiel

HTML-Quelltext

<div class="tabs">
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true" aria-controls="tabcontent-104571-695" id="tab-104571-695" >Weitere Angebote</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="tabcontent-104571-696" id="tab-104571-696" tabindex="-1" >Survey Guidelines</button>
    <button type="button" role="tab" aria-selected="false" aria-controls="tabcontent-104571-697" id="tab-104571-697" tabindex="-1" >Forschung</button>
  </div>
  <div tabindex="0" role="tabpanel" id="tabcontent-104571-695" aria-labelledby="tab-104571-695" >
    <ul>
      <li><a href="/angebot/studien-planen-und-daten-erheben/items-und-skalen">Neuentwicklung von sozialwissenschaftlichen Messinstrumenten</a></li>
      <li><a href="/angebot/studien-planen-und-daten-erheben/kognitives-pretesting">Kognitives Pretesting</a></li>
      <li><a href="/angebot/studien-planen-und-daten-erheben/erhebungsinstrumente/uebersetzung">Übersetzung von Messinstrumenten in internationalen Umfragen</a></li>
    </ul>
  </div>
  <div tabindex="0" role="tabpanel" id="tabcontent-104571-696" aria-labelledby="tab-104571-696" class="d-none" >
    <p><strong>Weiterführende Artikel in den GESIS Survey Guidelines: </strong></p>
    <p><a href="/gesis-survey-guidelines/instruments/erhebungsinstrumente/sozio-demographische-merkmale/standardisierung-harmonisierung">Standardisierung und Harmonisierung sozio-demographischer Variablen</a></p>
    <p><a href="/gesis-survey-guidelines/instruments/erhebungsinstrumente/sozio-demographische-merkmale/berufscodierung">Berufscodierung</a></p>
    <p><a href="/gesis-survey-guidelines/instruments/erhebungsinstrumente/sozio-demographische-merkmale/bildung">Messung und Kodierung von Bildung</a></p>
  </div>
  <div tabindex="0" role="tabpanel" id="tabcontent-104571-697" aria-labelledby="tab-104571-697" class="d-none" >
    <p><a href="/forschung/umfragemethodik/survey-instruments">Instrumentenentwicklung und -dokumentation</a></p>
  </div>
</div>

HTML-Aufbau

  • <div class="tabs">: Wrapper dieses Widgets.
    • <div role="tablist">: Wrapper für Kopfzeile, die Tab-Auswahl-Buttons enthält.
      • Attribut role="tablist" : Attribut, um Funktion dieses Elements innerhalb des Widgets an Screenreader etc. zu kommunizieren.
      • Elemente <button type="button" role="tab" aria-selected="false" aria-controls="tabcontent-104571-696" id="tab-104571-696" tabindex="-1">Survey Guidelines</button>: Auswahl-Button eines Tabs:
        • Attribut role="tab" : Attribut, um Funktion dieses Elements innerhalb des Widgets an Screenreader etc. zu kommunizieren.
        • Attribut aria-selected="{true, false}" : Der Button des aktuell angezeigten Tabs ist aria-selected="true", alle anderen Buttons sind aria-selected="false". Exakt ein (1) Tab wird immer angezeigt. Die JavaScript-Bibliothek übernimmt die Aktualisierung dieses Attributes bei Zustandsänderungen.
        • Attribut aria-controls="{Tabpanel-HTML-Element-ID}" : ID jenes HTML-Elements, welches den Tab-Inhalt wrappt, der durch Aktivierung dieses Tab-Buttons angezeigt wird.
        • Attribut id="{Tabbutton-HTML-Element-ID}" : Eine eindeutige ID für diesen Button. Relevant für das Attribut aria-labelledby des Tab-Inhalt-Wrappers.
        • Attribut tabindex="{-1, 0}" : Der Button des aktuell angezeigten Tabs hat tabindex="-1" oder kein tabindex-Attribut (kann also angetabbt werden; standardmäßig, auch ohne tabindex-Attribut, sind <button>-Elemente antabbar), alle anderen Buttons haben tabindex="0" (können also nicht angetabbt werden). Die JavaScript-Bibliothek übernimmt die Aktualisierung dieses Attributes bei Zustandsänderungen.
    • <div tabindex="0" role="tabpanel" id="tabcontent-104571-696" aria-labelledby="tab-104571-696" class="d-none"> ... </div> : Tab-Inhalt-Wrapper. Jeder Tab hat einen solchen Wrapper:
      • Attribut tabindex="0" : Best Practice entsprechend der WAI-ARIA Authoring Practices.
      • Attribut role="tabpanel" : Attribut, um Funktion dieses Elements innerhalb des Widgets an Screenreader etc. zu kommunizieren.
      • Attribut id="{Tabpanel-HTML-Element-ID}" : Eindeutige ID. Wird vom zugeordneten Button in dessen Attribut aria-controls referenziert (siehe oben).
      • Attribut aria-labelledby="{Tabbutton-HTML-Element-ID}" : HTML-Element-ID des zugeordneten Buttons.
      • Attribut class="{d-none, ∅}" : Bestimmt, ob der Tab-Inhalt angezeigt wird. Die JavaScript-Bibliothek übernimmt die Aktualisierung dieses Attributes bei Zustandsänderungen.

Initialisierungscode (mittels globaler Referenzen)

// initializeTabContainers(..) is a globally scoped function
// for initializing an array of .tab HTML elements.
// it returns an array of initialized TabContainer objects
const tabContainersElements = someElement.getElementsByClassName('tabs');
const tabContainers = initializeTabContainers(tabContainersElements);

// ...

// TabContainer(..) is a globally scoped constructor
const anotherTabContainerElement = document.getElementById('another-tab-container');
const anotherTabContainer = new TabContainer(anotherTabContainerElement);

Initialisierungscode (mittels import, z.B. im Rahmen eines webpack-Build)

import { TabContainer } from './js/gesis-tabs.js';

document.addEventListener('DOMContentLoaded', function() {

  const tabContainersElements = document.getElementsByClassName('tabs');
  for (const tabContainerElement of tabContainersElements) {
    const tabContainer = new TabContainer(tabContainerElement);
  }

});

Barrierefreiheit