nicht angemeldet
OrlokHallo Pauli
ähnlich wie vertical_tabs
Das will ich nicht hoffen. Das Beispiel ist Müll. Für Seitenbesucher die sich den Inhalt der Seite vorlesen lassen ist nicht erkennbar, dass es sich hierbei um Tabs handelt. Die Bedienung entspricht nicht den Erwartungen der Besucher.
Es genügt nicht, den Elementen lediglich Klassen zuzuweisen, um die Bedeutung der Elemente kenntlich zu machen und den Zustand der Komponente zu beschreiben. Dafür gibt es spezielle Attribute. Das Markup sollte etwa wie im folgenden Beispiel aussehen.
<!-- tablist should have accessible name -->
<div role="tablist" aria-orientation="vertical">
<button id="tab-1"
type="button"
role="tab"
tabindex="0"
aria-selected="true">
<!-- name of tab 1 -->
</button>
<button id="tab-2"
type="button"
role="tab"
tabindex="-1"
aria-selected="false">
<!-- name of tab 2 -->
</button>
<button id="tab-3"
type="button"
role="tab"
tabindex="-1"
aria-selected="false">
<!-- name of tab 3 -->
</button>
</div>
<section role="tabpanel"
aria-labelledBy="tab-1">
<!-- content of tab 1 -->
</section>
<section role="tabpanel"
aria-labelledBy="tab-2"
hidden="hidden">
<!-- content of tab 2 -->
</section>
<section role="tabpanel"
aria-labelledBy="tab-3"
hidden="hidden">
<!-- content of tab 3 -->
</section>
Die Attribute aria-selected und tabindex auf den Tabs und hidden auf den Panels müssen bei der Bedienung entsprechend angepasst werden. In der Tabliste wird mit den vertikalen Pfeiltasten navigiert. Nur ein Tab ist in der Taborder. Mit der Pseudoklasse :focus muss deutlich hervorgehoben werden, welcher Tab gerade den Fokus hat.
Was bei der Implementierung von Tabs alles zu beachten ist, damit Erkennbarkeit und Bedienbarkeit gewährleistet sind, habe ich vor nicht all zu langer Zeit mal recht ausführlich beschrieben. Hier kannst du es nachlesen: Teil 1 und Teil 2.
Viele Grüße,
Orlok
marctrix