ARIA-Tastaturmuster

Mit ARIA können Sie nichts über die Tastatur steuern. Du musst alles selbst machen. ARIA zeigt Ihnen aber einige Möglichkeiten, wie Sie vorgehen können. Webkomponenten und Web-Apps sollen sich wie native Betriebssystemkomponenten und -anwendungen verhalten. Dazu gehören auch Modelle für die Barrierefreiheit auf der Tastatur.

Die ARIA-Tastaturmuster sind eine Mischung aus Ideen von Windows, Mac OS und anderen. Das Ziel ist ein Modell, auf das sich alle verlassen können. Hier sind ein paar Grundlagen.

Verwendung von tabindex

Fügen Sie “tabindex” hinzu, um eine zusätzliche Aktivierreihenfolge zu erstellen. Das gilt für alle Schaltflächen, Links und Steuerelemente. Sie finden diese in Schiebereglern, Steuerelementen zum Erweitern und Reduzieren usw. Aber fokussieren Sie nichts, was nicht fokussiert werden soll. Überschriften, Absätze oder Textabschnitte sollten nicht fokussierbar sein.

Manchmal ist es trotzdem gut, den Fokus auf etwas zu legen, auch wenn es nicht in der natürlichen Reihenfolge steht.

Um ein Element über JavaScript fokussierbar zu machen, fügen Sie “tabindex=“-1"" hinzu. Wenn Sie den Fokus auf einen modalen Dialog legen möchten, geben Sie dem Element tabindex=“-1” hinzu. Sie können den Fokus auf die Überschrift oben im Dialogfeld verschieben, solange diese den Wert “0” hat. Sie wollen, dass der Fokus beim Öffnen des Dialogs auf der Überschrift liegt. Wenn ein Benutzer mit der Tabulatortaste navigiert, landet der Fokus nie auf der Überschrift.

Man kann den Tab-Index auch als positive Zahl verwenden, um die Tabulatorreihenfolge zu ändern. Das ist aber nicht empfehlenswert. Das führt zu mehr Problemen.

Logische Tab-Reihenfolge

Die Standard-Tab-Reihenfolge ist übrigens die Reihenfolge, in der Elemente im DOM angezeigt werden. Die Tabulatorreihenfolge ignoriert alle ausgefallenen Dinge, die Sie möglicherweise mit CSS gemacht haben, um die visuelle Platzierung auf dem Bildschirm zu manipulieren. Stellen Sie sicher, dass Ihre Komponente über eine logische Tab-Reihenfolge verfügt, die sowohl vorwärts mit der Tabulatortaste als auch rückwärts mit Umschalttaste und Tabulator erfolgt.

Tastatur-Fallen

Erstellen Sie keine Tastaturfalle. Wenn man mit der Tabulatortaste nicht mehr weiterkommt, egal ob man vorwärts oder rückwärts navigiert. Das ist eine Tastaturfalle. Modale Dialoge sind eigentlich das Gegenteil von dem, was ich gerade gesagt habe. Ein Dialog ist dafür da, alles andere zu unterdrücken und den Benutzer in eine bestimmte Situation zu bringen. Aber wenn Sie es richtig machen, ist das keine echte Tastaturfalle. Der Benutzer sollte immer die Möglichkeit haben, den Dialog zu beenden.

Verschieben des Fokus

Hier ist eine weitere Regel. Lenken Sie den Tastaturfokus nicht auf eine Weise durch die Benutzeroberfläche, die den Benutzer verwirren kann. Wenn es keinen guten Grund gibt, den Fokus zu verschieben, verschieben Sie ihn nicht.

Aber wenn wir schon von guten Gründen sprechen, ist das Öffnen eines Dialogs einer dieser guten Gründe, um den Fokus zu verschieben. Wenn ein Benutzer auf die Schaltfläche klickt, um den Dialog zu öffnen, muss der Fokus auf etwas im Dialog verschoben werden. Was am besten geeignet ist, hängt vom Kontext ab. Wenn es sich um ein Formular handelt und das erste Element im Dialog ein Formularelement ist, kann es logisch sein, den Fokus auf dieses erste Formularelement zu senden. Ich persönlich bevorzuge es, sicherzustellen, dass das erste Element im Dialog eine Überschrift ist, und den Fokus auf diese Überschrift zu lenken, denn auf diese Weise werden Screenreader die Überschrift im Wesentlichen als den Namen oder die Beschriftung des Dialogs ankündigen, um diesen Namen explizit zu machen, fügen Sie übrigens aria-labelledby auf das Element ein, das role=“dialogue” hat, und aria-labelledby würde sich auf die ID der Überschrift beziehen.

Verlieren Sie den Fokus nicht

Wenn ein Element mit dem Tastaturfokus verschwindet, müssen Sie den Fokus an einen anderen Ort senden. In der Regel heißt das, den Fokus wieder auf die Schaltfläche zu setzen, mit der der Dialog geöffnet wurde. Manchmal ist es gut, den Fokus an einen anderen Ort zu senden. Aber normalerweise sollte der Fokus immer wieder auf die ursprüngliche Schaltfläche gesetzt werden.

Zusammengesetzte Komponenten

Mit vielen verschiedenen Elementen wie Tablisten, Optionsfeldern, Kombinationsfeldern, Baumansichten usw. ist die Tastaturbedienung etwas komplizierter.

Das Tastaturmuster der Optionsgruppe

Wir starten mit Radiobutton-Gruppen. Das sind HTML-Elemente, die Sie aber auch mit ARIA und JavaScript erstellen können. Normalerweise ist das nicht nötig, aber wenn Sie sie neu erstellen müssen, machen Sie es richtig.

Hier ist, was es bedeutet: In einer Optionsfeld-Gruppe kann immer nur ein Element ausgewählt werden. Wenn ein Optionsfeld ausgewählt ist, können Benutzer mit der Tabulatortaste nur zu diesem wechseln. Wenn vier Optionsfelder vorhanden sind und eines davon ausgewählt ist, wird der Fokus auf dieses gesetzt, nicht auf das erste. Wenn man die Umschalttaste drückt, wechselt der Fokus zur mittleren Schaltfläche. Um ein anderes Optionsfeld auszuwählen oder zu wechseln, benutzt man die Pfeiltasten.

Manche Leute denken, dass man mit der Tabulatortaste zu jedem Optionsfeld wechseln kann. Das ist aber nicht möglich. Wenn man innerhalb der Optionsfeldgruppe die Pfeiltaste benutzt, wird das Optionsfeld ausgewählt, auf das man den Fokus setzen will. Dieses Muster ist ziemlich komplex. Wenn du eine eigene Radiogruppe erstellen willst, musst du all das nachbauen. Normalerweise ist das mehr Arbeit, als es wert ist. Aber wenn Sie es schon machen, dann machen Sie es richtig.

Das Tastaturmuster der Registerkartenkomponente

Registerkartenkomponenten sind im Wesentlichen Optionsfeldgruppen mit einer anderen Benutzeroberfläche.

Sie können in einer Registerkartenliste immer nur einen Reiter auswählen. Genauso können Sie in einer Optionsgruppe immer nur ein Optionsfeld auswählen. Deshalb kann das Tastaturverhalten Ihrer Registerkartenkomponente genauso sein wie bei einer Optionsfeldgruppe. Sie können festlegen, dass nur ein Reiter ausgewählt werden kann. Sie können dann mit den Pfeiltasten durch die Reiter in einer Registerkartenliste navigieren. Wenn Sie die Pfeiltasten drücken, wird der ausgewählte Reiter ausgewählt. Das ist das Modell, das ich verwende.

Es gibt aber auch ein anderes Modell, bei dem die Pfeiltasten nicht automatisch den Fokus setzen. Sie müssen die Leertaste drücken, um diesen Tab auszuwählen. Diese Art der Umsetzung ist für die meisten Menschen überraschend. Deshalb kann es zu Verwirrung kommen und manche denken, dass es nicht funktioniert. Dieses Modell ist trotzdem gültig, wenn Sie es nutzen möchten.

Können Sie Ihre eigenen Tastaturmuster erfinden?

Manchmal fragen Entwickler oder Designer, ob sie ein Muster aus den ARIA-Empfehlungen verwenden können, das ihnen nicht gefällt. Oder sie haben die Spezifikation nicht gelesen und wollen trotzdem etwas erfinden. Kann man das tun? Kannst du eigene Muster, Tastaturmethoden und ähnliches entwickeln? Ja, das ist erlaubt. Wenn Sie aber etwas erfinden, was niemand sonst kennt, ist das nicht gut.

Wählen Sie eine Methode, die bekannt ist, oder schaffen Sie etwas Neues, das intuitiv ist.

Deaktivierte oder inaktive Steuerelemente

Ein deaktiviertes Steuerelement wird nicht normal angeklickt. Sie können das gleiche Verhalten mit Ihren eigenen deaktivierten Steuerelementen implementieren. Die ARIA-Empfehlungen fügen einige Nuancen hinzu, da Benutzer von Screenreadern häufig mit der Tabulatortaste navigieren oder die Pfeiltasten verwenden, um zu entdecken, was verfügbar ist. Wenn ein Element nicht über die Tabulatortaste oder Pfeiltasten erreichbar ist, wird es vom Benutzer nicht entdeckt. Sie können “aria-disabled=true” zum Steuerelement hinzufügen. So wissen Benutzer, dass sie es nicht benutzen können.

Weitere Überlegungen zur ARIA-Tastatur

Hier finden Sie die wichtigsten Überlegungen zur ARIA-Tastatur. Wenn Sie eigene Komponenten erstellen, lesen Sie am besten den ARIA-Leitfaden.