Die Barrierefreiheit für Websites ist ein äußerst wichtiges Thema, welches grundsätzlich von allen Website-Betreibern zumindest in einem gewissen zumutbaren Ausmaß ernst genommen werden sollte, auch von Kleinstunternehmen, die vom Barrierefreiheitsgesetz (gültig ab 28. Juni 2025) ausgenommen sind. Einerseits gibt es relativ einfache Möglichkeiten, für eine gewisse Barrierefreiheit auf der eigenen Website zu sorgen. Auf der anderen Seite ist es für alle Website-Betreibende nur von Vorteil, wenn sie möglichst allen Menschen ihre Website gut verständlich zur Verfügung stellen. Ein kleiner, aber wichtiger Aspekt für die Barrierefreiheit ist die Navigation mittels Tabulatortaste über das „tabindex“-Attribut. In diesem Beitrag geht es darum, wie man „tabindex“ auf der eigenen Website anwenden kann.
Grundsätzliches zur Tastatursteuerung mit Tabulatortaste
Die Tastatursteuerung für eine Website, insbesondere mit der Tabulatortaste, ist ein wichtiger Aspekt der Barrierefreiheit. HTML unterstützt dies standardmäßig durch die natürliche Tab-Reihenfolge von Elementen. Dennoch können zusätzliche Anpassungen erforderlich sein.
Grundsätzliche / Natürliche Tab-Reihenfolge:
Die Tabulatortaste springt bei Verwendung standardmäßig, in der Reihenfolge von oben nach unten, zwischen folgenden HTML-Elementen:
- Verlinkungen (<a> mit href)
- Buttons (<button>)
- Formularfeldern (<input>, <textarea>, <select>)
Überschriften (<h2>, <h3>, …) und Absätze (<p>) werden in der standardisierten Tab-Reihenfolge nicht anerkannt. Dafür gibt es unter anderem die Möglichkeit für sogenannte tabindex Attribute, welche man manuell (oder automatisiert) für Überschriften, Absätze und sonstige Elemente verwenden kann.
Verwendung des tabindex Attributes
Mit tabindex können Sie die Tab-Reihenfolge manuell steuern oder zusätzliche Elemente fokussieren:
tabindex="0": Element wird in die natürliche Reihenfolge eingefügt.tabindex="-1": Element wird aus der Tab-Reihenfolge entfernt (kann jedoch per JavaScript fokussiert werden).- Positive Werte (
tabindex="1",tabindex="2", …) bestimmen eine benutzerdefinierte Reihenfolge, sollten jedoch vermieden werden, da sie unübersichtlich werden können.
Grundsätzlich lässt sich damit sagen, dass für die meisten Anwendungsfälle in diesem Bereich die erste Variante tabindex=“0″ am sinnvollsten ist, speziell wenn es darum geht, beispielsweise Überschriften automatisiert damit auszustatten.
WAI-ARIA Attribute für erweiterten Fokus
Für komplexere Anwendungen oder Widgets (z. B. modale Dialoge) können WAI-ARIA-Attribute wie aria-labelledby oder aria-hidden verwendet werden.
Das Tabulator-Symbol: ↹ auf der Tastatur
Das Tabulator-Symbol ↹ ist ein Zeichen, das die Funktion der Tabulatortaste auf jeder handelsüblichen Tastatur symbolisiert. Das Symbol wird oft in technischen oder typografischen Kontexten verwendet, um die Bedeutung oder die Funktion des Tabs zu illustrieren. In Bezug auf die Barrierefreiheit ermöglicht die Tabulatortaste mit jedem „Klick“ ein Weiter-Navigieren in einer barrierefreien Website, die mit entsprechenden „tabindex“-Attributen und ARIA-Attributen ausgestattet ist.
Um das ↹ Symbol zu erzeugen ...
… können Sie folgende Codes verwenden:
HTML-Entität:
↹↹
Unicode-Zeichen:
tabindex Attribut automatisiert in WordPress Elementor Pro verwenden
Wenn man für eine bessere Barrierefreiheit auf der eigenen WordPress-Website etwas tun will, dann kann man mit einer Pro-Version des Elementors beispielsweise jedem gewünschten Element (zB allen Überschriften) automatisch das Attribut tabindex=„0“ hinzufügen. Das funktioniert folgendermaßen:
Überschift im Elementor erstellen
Zunächst wird mit dem Elementor eine einfache Überschrift (zB H2, H3, ..) erstellt und der gewünschte Text im Titelfeld eingegeben.
tabindex Attribut einer Elementor Überschrift hinzufügen
Klicken Sie in der Elementor Optionsleiste auf „Erweitert“ und scrollen Sie bis zum Menüpunkt „Attribute“ hinunter. Hier können Sie das gewünschte tabindex Attribut eingeben, aber Achtung: hier wird ein eigenes Eingabe-Format benötigt. Wenn Sie das tabindex=„0“ Attribut verwenden wollen, dann müssen Sie tabindex|0 in das Feld eingeben. Sie können auch alle anderen Attribute verwenden, stets unter der Berücksichtigung des Trennstrichs |.
Info: dieses Attribute-Feld ist aktuell (Stand: November 2024) nur in der kostenpflichtigen Pro-Version des Elementors verfügbar.
Jetzt haben wir aber zunächst einmal das tabindex Attribut tabindex=„0“ nur für diese eine Überschrift definiert. Wenn Sie wollen, dass künftig jede Überschrift automatisch mit diesem Attribut ausgestattet wird, dann müssen wir nun dem Elementor beibringen, dass er diese Variante der Überschrift als „Standard“ definiert.
Elementor Überschrift mit tabindex Attribut als Standard speichern
Sie können im Elementor jedes Element, und damit auch jede Überschrift, mit der rechten Mouse-Taste anklicken. Klicken Sie nun Ihre neu erstellte Überschrift (in welcher Sie das tabindex Attribut definiert haben) mit der rechten Mouse-Taste an. Es öffnet sich ein Pop-Up-Menü, in welchem sich der Menüpunkt „Als Standard speichern“ befindet. Mit einem Klick darauf wird diese Variante der Überschrift eben als Standard gespeichert. Das bedeutet: jedes Mal wenn Sie künftig eine neue Überschrift verwenden wollen, ist dieses Attribut bereits inkludiert und Sie brauchen es nicht mehr extra jedes Mal auszuwählen. Achtung: bereits bestehende Überschriften sind aber leider nicht nachträglich damit ausgestattet.
Barrierefreie Navigation testen
Wenn Sie mit der Inhaltserstellung fertig sind, dann ist es ratsam, die barrierefreien Funktionen auf der erstellten Seite zu testen. Sie können es auf dieser Seite ausprobieren:
- Der erste „Tab“ in diesem Beitrag fokussiert den kleinen weißen Pfeil des Inhaltsverzeichnisses. Mit der Enter-Taste können Sie das Inhaltsverzeichnis nun öffnen und auch wieder schliessen.
- Bei geöffnetem Inhaltsverzeichnis können Sie nun mit der Tabulatortaste zu jedem Menüpunkt der natürlichen Reihe nach von oben nach unten navigieren.
- Wenn Sie bereits zu weit nach unten navigiert haben, dann können Sie mit der Tastenkombination [Shift + Tab] wieder zurück nach oben navigieren.
- Mit der Enter-Taste können Sie den jeweilig fokussierten Link aktivieren.
- Bei geschlossenem Inhaltsverzeichnis gelangen Sie mit der Tabulator-Taste zum nächsten fokussierbaren Element (egal ob natürlich, oder mit tabindex, ..).
- Mit jedem weiteren Tab gelangen Sie hier zur nächsten Überschrift, beziehungsweise zum nächsten Link.
Das ist bei Weitem nicht alles, was es über barrierefreie Navigation auf Websites zu erzählen gibt, aber es ist ein solider Anfang, um sich mit der Thematik vertraut zu machen.
Fachliche Hilfe benötigt?
Wenn Sie Unterstützung – speziell für Ihre WordPress-Website – benötigen, dann stehe ich Ihnen gerne zu leistbaren Konditionen beratend und auch produktiv zur Verfügung. Senden Sie mir bitte einfach Ihre Anfrage.
