Zwei Anforderungen aus der WCAG werden häufig verwechselt: Die bedeutungstragende und die Tastatur-Reihenfolge. In diesem Beitrag sollen die beiden Konzepte erläutert werden.
Bedeutungstragende Reihenfolge
Bedeutungstragende Reihenfolge bezieht sich auf die Reihenfolge, in der Inhalte präsentiert werden und wie die Struktur des Inhalts die Bedeutung oder den Fluss der Interaktion beeinflusst. Diese Reihenfolge muss sinnvoll sein, damit Benutzer den Inhalt korrekt verstehen und navigieren können.
Die WCAG-Anforderung ist Success Kriterium 1.3.2 („Meaningful Sequence“): : Die Inhalte müssen in einer Reihenfolge präsentiert werden, die auch für Bildschirmleser und andere assistive Technologien sinnvoll ist. Zum Beispiel, wenn ein Formular oder eine Liste auf einer Webseite angezeigt wird, sollte die Reihenfolge der Felder oder Listenelemente logisch sein, damit ein Benutzer, der auf Tastatur oder mit einem Bildschirmleser navigiert, den Inhalt korrekt verstehen kann.
Die Reihenfolge, in der Inhalte vorgelesen werden wird im wesentlichen dadurch bestimmt, wie Elemente im Quellcode angeordnet sind. Auf einem Computer durchläuft der Screenreader die Inhalte im Wesentlichen durch die Pfeil-rauf- und Pfeil-Runter-Tasten.
Häufige Fehler bei der bedeutungstragenden Reihenfolge
Falsche Reihenfolge von Inhalten
Problem: Wenn die Reihenfolge der Inhalte auf einer Webseite nicht der logischen oder natürlichen Reihenfolge entspricht, kann das für Benutzer verwirrend sein. Dies ist besonders problematisch für Benutzer von Bildschirmlesern, da sie den Inhalt in der Reihenfolge lesen, wie er auf der Seite strukturiert ist.
Beispiel: Eine Liste von Artikeln wird visuell von oben nach unten angezeigt, aber durch das HTML-Markup wird die Reihenfolge in einer für den Benutzer unlogischen Weise angezeigt (z. B. erst das unterste Element, dann das oberste).
Lösung: Achten Sie darauf, dass die Reihenfolge der Inhalte sowohl im visuellen Layout als auch im HTML-Markup konsistent ist. Beispielsweise sollten Listen oder Formulare in der richtigen Reihenfolge kodiert sein, sodass Bildschirmleser sie sinnvoll abspielen können.
Die Verwendung von Tabellen oder falsche Grid-Strukturen für Layouts ist problematisch, häufig zu finden in E-Mails oder PDFs. Wenn Tabellen für Layouts verwendet werden kann es dazu führen, dass etwa zuerst die linke Spalte, dann die rechte Spalte vorgelesen wird. Das ist problematisch, wenn die Inhalte zeilenweise aufgebaut sind, also von links nach rechts gelesen werden müssten, um Sinn zu ergeben.
Ein häufiges Problem sind Inhalte, die erreicht werden können, obwohl sie visuell ausgeblendet sind. Das ist aktuell eigentlich die Regel bei Cookie-Layern. Obwohl die Inhalte ausgegraut sind, können sie von Screenreadern erreicht und teilweise auch mit ihnen interagiert werden. Die Lösung wäre, eine Focus-Trap auf den Cookie-Layer zu setzen.
Mangelnde Berücksichtigung der Reihenfolge bei interaktiven Elementen
Problem: Bei interaktiven Elementen wie Schaltflächen, Links oder Formularfeldern muss die Reihenfolge sinnvoll und in der richtigen Reihenfolge durch den Benutzer durchlaufen werden. Wenn diese Reihenfolge nicht stimmt, kann der Benutzer verwirrt werden und das Formular oder die Website nicht korrekt ausfüllen.
Beispiel: Ein Formular, in dem das letzte Eingabefeld zuerst fokussiert wird, anstatt das erste Feld.
Lösung: Achten Sie darauf, dass die Reihenfolge der interaktiven Elemente (Schaltflächen, Links, Formularfelder usw.) korrekt und in der logischen Reihenfolge angeordnet ist.
Fazit:
Fehler bei der bedeutungstragenden Reihenfolge entstehen oft durch unlogische Strukturierung der Inhalte, unsachgemäße Verwendung von HTML und ARIA oder die Missachtung der Hierarchie von Überschriften und interaktiven Elementen. Diese Fehler können die Barrierefreiheit erheblich beeinträchtigen, insbesondere für Benutzer, die auf assistive Technologien angewiesen sind. Es ist entscheidend, Inhalte sowohl visuell als auch semantisch korrekt zu strukturieren. Am einfachsten ist es, die Inhalte von vorneherein im Quelltext korrekt aufzubauen.
Tastatur-Reihenfolge
Tastatur-Reihenfolge bezieht sich auf die Reihenfolge, in der Benutzer mit der Tastatur zwischen interaktiven Elementen einer Webseite (wie Links, Schaltflächen, Formularfeldern etc.) navigieren. Die Reihenfolge muss so gestaltet sein, dass Benutzer ohne Maus (z. B. mit Tastatur oder assistiven Technologien wie Sprachsteuerung) effizient durch den Inhalt navigieren können. Der Begriff Tab-Reihenfolge ist aus meiner Sicht sinnvoller. Die Reihenfolge der Tab- und der Pfeiltasten müssen nicht überseinstimmen.
Die WCAG-Anforderung ist Success Criterion 2.4.3: Focus Order : Die Tastatur-Navigation muss in einer sinnvollen und vorhersehbaren Reihenfolge erfolgen, damit Benutzer alle interaktiven Elemente der Seite problemlos erreichen können. Das bedeutet, dass die Reihenfolge der Elemente nicht zufällig oder unlogisch sein darf.
Beispiel: Wenn ein Benutzer die Tab-Taste verwendet, um zwischen Feldern zu navigieren, muss die Reihenfolge, in der die Felder angesprungen werden, der natürlichen Logik des Formulars folgen (z. B. von oben nach unten, von links nach rechts).
Häufige Fehler bei der Tastatur-Reihenfolge
Hier sind die häufigsten Fehler bei der Tab-Reihenfolge:
1. Unlogische oder zufällige Reihenfolge
– Problem: Wenn die Reihenfolge der Elemente, zwischen denen ein Benutzer mit der Tab-Taste navigiert, nicht logisch ist oder nicht dem natürlichen Fluss des Inhalts entspricht, kann es zu Verwirrung und Frustration führen.
– Beispiel: Ein Formular, bei dem der Benutzer zuerst das letzte Eingabefeld erreicht und dann zurück zum ersten Feld springen muss, oder interaktive Elemente, die in einer zufälligen Reihenfolge angeordnet sind.
– Lösung: Die Reihenfolge der interaktiven Elemente sollte der natürlichen Reihenfolge der Inhalte entsprechen, zum Beispiel von oben nach unten und von links nach rechts.
2. Interaktive Elemente sind nicht fokussierbar
– Problem: Einige interaktive Elemente (wie Schaltflächen, Links, Formularfelder oder Steuerelemente) sind möglicherweise nicht fokussierbar, wenn sie mit der Tab-Taste angesteuert werden. Dies bedeutet, dass Benutzer, die keine Maus verwenden, diese Elemente nicht erreichen können.
– Beispiel: Ein Link oder eine Schaltfläche, die nur mit der Maus aktiviert werden kann, aber nicht über die Tastatur (z. B. mit Tab oder Enter).
– Lösung: Alle interaktiven Elemente sollten fokussierbar und über die Tastatur zugänglich sein. In HTML sollte dafür sichergestellt werden, dass `tabindex` korrekt gesetzt ist und keine Elemente den Fokus blockieren.
3. Fokussierung auf unsichtbare oder nicht interaktive Elemente
– Problem: Manchmal können Elemente, die keinen Nutzen für die Benutzer haben oder unsichtbar sind, fokussiert werden. Dies führt dazu, dass der Benutzer unnötige oder nicht interaktive Elemente durchlaufen muss, ohne dass sie sichtbar oder nützlich sind.
– Beispiel: Ein unsichtbares `div`-Element, das in der Tastatur-Navigation berücksichtigt wird, aber keine Funktionalität hat.
– Lösung: Verwenden Sie CSS, um Elemente, die nicht fokussiert werden sollen, mit `aria-hidden=“true“` oder `tabindex=“-1″` auszublenden und sie aus der Tastatur-Navigation zu entfernen.
4. Fokus geht verloren
– Problem: Der Fokus kann während der Navigation verloren gehen, insbesondere wenn Inhalte dynamisch geladen oder geändert werden (z. B. beim Einsatz von JavaScript oder AJAX), und der Benutzer weiß nicht, wo sich der Fokus befindet.
– Beispiel: Der Benutzer navigiert durch ein Formular, aber nach dem Absenden eines Feldes wird der Fokus an eine unerwartete Stelle verschoben, was die Navigation erschwert.
– Lösung: Achten Sie darauf, dass der Fokus bei dynamischen Änderungen oder Formularabsendungen korrekt gesetzt wird. Verwenden Sie JavaScript, um den Fokus nach Interaktionen sinnvoll zu steuern, z. B. nach dem Absenden eines Formulars oder bei der Anzeige eines Modals.
5. Fokus visuell nicht erkennbar
– Problem: Wenn der Fokus auf einem Element liegt, aber visuell nicht klar erkennbar ist (z. B. wenn der Fokusrahmen auf Schaltflächen oder Links fehlt), wird es für Tastaturnutzer schwierig, zu sehen, welches Element sie gerade ansteuern.
– Beispiel: Ein Link oder eine Schaltfläche, bei der der Fokusrahmen nur minimal sichtbar oder nicht sichtbar ist, wodurch es für den Benutzer schwer wird zu erkennen, auf welchem Element er sich gerade befindet.
– Lösung: Stellen Sie sicher, dass der Fokus visuell erkennbar ist. Dies kann durch das Hinzufügen von klaren, gut sichtbaren Fokus-Stilen erfolgen, z. B. durch ein Umranden des fokussierten Elements mit einer kontrastreichen Farbe.
6. Tabindex wird falsch verwendet
– Problem: Der `tabindex`-Wert wird entweder falsch gesetzt oder übermäßig verwendet, was dazu führen kann, dass die Navigation auf der Seite verwirrend wird.
– Beispiel: Manuell gesetzte `tabindex`-Werte, die die natürliche Reihenfolge der Elemente stören, oder das Setzen von `tabindex=“-1″` auf wichtigen Elementen, wodurch sie aus der Tastatur-Navigation ausgeschlossen werden.
– Lösung: Verwenden Sie den `tabindex`-Wert sparsam und nur, wenn es wirklich notwendig ist. Lassen Sie die Standardreihenfolge der Navigation beibehalten, wenn keine spezifische Änderung erforderlich ist. Ein `tabindex=“0″` sorgt dafür, dass das Element in der natürlichen Reihenfolge der Seite fokussiert wird.
Fokus bewegt sich außerhalb des sichtbaren Bereichs
– Problem: Der Benutzer kann mit der Tab-Taste zu einem Element gelangen, das sich außerhalb des sichtbaren Bereichs befindet, wodurch die Navigation erschwert wird.
– Beispiel: Der Fokus springt zu einem versteckten oder nicht sichtbaren Element, das der Benutzer nicht sehen kann, weil es außerhalb des Viewports liegt.
– Lösung: Achten Sie darauf, dass der Fokus immer auf sichtbare Elemente gesetzt wird. Wenn erforderlich, scrollen Sie automatisch zum fokussierten Element, um sicherzustellen, dass es im sichtbaren Bereich bleibt.
Fazit
Die häufigsten Fehler bei der Tastatur-Reihenfolge entstehen durch unlogische Reihenfolgen, unzugängliche Elemente und unsichtbare Fokussierungen. Durch das Beheben dieser Probleme wird die Zugänglichkeit der Website für Tastaturnutzer erheblich verbessert und die Website entspricht den WCAG-Anforderungen.