Felix Riesterer: tabbed interfaces - tab auch mit checkbox a11y-konform?

Beitrag lesen

SELF-Forum

tabbed interfaces - tab auch mit checkbox a11y-konform?

Felix Riesterer Homepage des Autors
– Informationen zu den Bewertungsregeln

Liebe Mitlesende,

in seinem Artikel tabbed interfaces stellt Heydon Pickering folgendes Konstrukt vor:

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#section1" id="tab1">Beschriftung</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#section2" id="tab2" aria-selected="true">Beschriftung</a>
  </li>
...
</ul>
<div aria-labelledby="section1" hidden>...</div>
<div aria-labelledby="section2">...</div>
...

Die Tabs sind somit simple Links, deren Ziel eine ID im selben Dokument sind. Die Beschriftung des Ziels erfolgt mit dem Linktext des Tabs, was über eine Rückreferenz geschieht (ID des Links steht im aria-labelledby-Attribut des Ziels).

Das leuchtet mir ein. Nun möchte ich aber die Inhalte der Tabs bei breiten Viewports alle auf einmal anzeigen lassen, so dass die ursprüngliche Funktion der Tabs-Reiter hinfällig wird. Da ich nun aber die Tabs-Inhalte wieder einzeln ausblenden können möchte, hätte es einen Sinn, die Tabs-Reiter als Ausblend-Schalter benutzen zu können. Daher denke ich an die Verwendung von Checkboxen:

<ul role="tablist">
  <li role="presentation">
    <input type="checkbox" id="switch1">
    <label role="tab" for="switch1" href="#section1" id="tab1">
      Beschriftung
    </label>
  </li>
  <li role="presentation">
    <input type="checkbox" id="switch2" checked>
    <label role="tab" for="switch2" href="#section2" id="tab2" aria-selected="true">
      Beschriftung
    </label>
  </li>
...
</ul>
<div aria-labelledby="section1" hidden>...</div>
<div aria-labelledby="section2">...</div>
...

Damit besteht keine Verlinkung mehr vom Tab-Reiter hin zum Tab-Inhalt. Allerdings besteht eine Rückreferenz vom Tab-Inhalt zu seiner Beschriftung (label-Text). Genügt das noch, oder ist das Konstrukt nun hinsichtlich a11y-Konformität kaputt? Ich könnte den Checkboxen als value die ID des Elements für den Tab-Inhalt geben (hier die div-Elemente)...

Bitte um Meinungen und Hinweise. Vielen Dank im Voraus.

Liebe Grüße

Felix Riesterer

Beitrag melden
–
Informationen zu den Bewertungsregeln