Tastaturnavigation in zusammengesetzten Widgets: Roving Tabindex, Pfeiltasten und Escape

Worum es geht

Der APG-Leitfaden zur Tastaturschnittstelle beschreibt die auf Desktop-Plattformen gemeinsame Konvention: Tab und Umschalt+Tab bewegen den Fokus von einer UI-Komponente zur nächsten, während andere Tasten, vor allem die Pfeiltasten, den Fokus innerhalb einer Komponente mit mehreren fokussierbaren Elementen bewegen. Eine Radiogruppe ist das native Beispiel: Ein Radiobutton steht in der Tab-Sequenz, Pfeile bewegen sich zwischen den Optionen, Tab verlässt die Gruppe. Eigene zusammengesetzte Widgets (Tab-Listen, Symbolleisten, Menüs, Grids, Bäume, Listboxen) sollten sich gleich verhalten, sodass eine Symbolleiste mit zwanzig Elementen einen einzigen Tab-Druck kostet, nicht zwanzig.

Der Leitfaden nennt zwei Umsetzungsstrategien. Beim Roving Tabindex hat genau ein Element tabindex="0" und alle übrigen tabindex="-1"; Pfeiltasten-Handler bewegen den DOM-Fokus zum nächsten Element und tauschen die Werte, sodass eine spätere Rückkehr zur Komponente auf dem zuletzt verwendeten Element landet. Bei aria-activedescendant bleibt der DOM-Fokus auf dem Container, und das Attribut zeigt auf das Element, das «virtuell» fokussiert ist – geeignet für Comboboxen, bei denen der Fokus im Textfeld bleiben muss.

Warum es wichtig ist

Nutzer, die kein Zeigegerät verwenden können, verlassen sich auf diese Konventionen, um vorherzusagen, was eine Taste bewirkt. WCAG 2.1.2 (Keine Tastaturfalle, Stufe A) verlangt, dass Fokus, der per Tastatur in eine Komponente bewegt wurde, sich allein per Tastatur wieder herausbewegen lässt, und dass jeder Ausstieg, der mehr als unveränderte Pfeil- oder Tab-Tasten oder andere Standardmethoden erfordert, dem Nutzer erklärt wird.

So wird es angewendet

• Jedem zusammengesetzten Widget einen einzigen Tab-Stopp geben und innerhalb mit Pfeiltasten bewegen; die einzelnen APG-Patterns ergänzen Home und End sowie, bei Listboxen, Menüs und Bäumen, Navigation nach Anfangsbuchstabe. Dem Pattern des jeweiligen Widgets folgen: eine horizontale Tab-Liste verwendet Links/Rechts, ein vertikales Menü Oben/Unten, ein Grid alle vier.
• Escape schliesst vorübergehende Oberflächen: Das APG-Dialog-Pattern führt Escape als die Taste auf, die den Dialog schliesst, und die Patterns für Menu-Button und Combobox nutzen sie, um ihre Popups zu schliessen. Auch schliessen, wenn der Fokus die Oberfläche verlässt.
• Enter und Leertaste aktivieren; der Leitfaden rät davon ab, Modifikator-Tasten mit Tab, Enter, Leertaste oder Escape zu belegen, da diese der Plattform gehören.
• Den sichtbaren Fokusindikator mit dem Roving Index mitbewegen; ein virtueller Fokus über aria-activedescendant braucht seine eigene Hervorhebung.
• Entscheiden, ob die Auswahl dem Fokus folgt (Pfeiltasten wählen sofort aus, wie bei nativen Radiogruppen) oder getrennt ist (Leertaste wählt aus); der Leitfaden erörtert, wann welche Variante angemessen ist.

Stolpersteine

tabindex="0" auf jedem Element zu setzen lässt Tab sich durch das gesamte Widget hangeln. Das Element mit tabindex="0" aus dem DOM zu entfernen (ein gelöschter Tab) hinterlässt überhaupt keinen Tab-Stopp. Handler, die bei jeder Taste preventDefault() aufrufen, schlucken Browser-Shortcuts. Eingebettete Editoren, die Tab abfangen, müssen den dokumentierten Ausweg bieten.