Orlok: HTML/CSS: Navigation links

Beitrag lesen

Hallo 1unitedpower

Fokus auf dem Tab-Button belassen.

Und wie weisst du, das durch das Aktivieren etwas geschehen ist?

Berechtigte Frage, da fehlen in Orloks Markup noch aria-controls-Attribute auf den Tabs.

Das Attribut aria-controls gibt theoretisch Auskunft darüber, welche Elemente hinsichtlich ihrer Sichtbarkeit durch das Element mit dem Attribut kontrolliert werden. Durch das Setzen des Attributs könnte also eine maschinenlesbare Verbindung zwischen Tab und zugehörigem Tabpanel hergestellt werden, die bei mir im Markup nur in umgekehrter Richtung durch die Verwendung von aria-labelledby gegeben ist. Das Attribut würde man aber nur genau einmal setzen, nämlich dann, wenn die Tabliste erzeugt wird. Dass beim Aktivieren etwas geschehen ist, wird mit aria-selected kenntlich gemacht, bzw. für sehende Benutzer durch das Einblenden des aktuellen Tabpanels.

Der Einsatz von aria-controls ist meines Wissens leider auch nicht so hilfreich, wie es zunächst den Anschein hat. Von den meisten Screen–Readern wird das Attribut wohl gar nicht unterstützt und die Implementierungen die es gibt, verbessern die Bedienbarkeit nicht. Da ich keine Informationen darüber habe, dass sich die Situation diesbezüglich verbessert hat, halte ich es aktuell nicht für sinnvoll, das Attribut zu setzen. Stattdessen setze ich auf die Konvention, dass der einzublendende Inhalt im Dokument und in der Taborder direkt nach dem Element kommt, das die Sichtbarkeit des Inhalts kontrolliert.

Das würde ich übrigens prinzipiell anraten, auch bei anderen Widgets, bei denen die Sichtbarkeit von Elementen durch andere Elemente kontrolliert wird.

Viele Grüße,

Orlok