Verloren im Wandel
In meiner Rolle als Entwicklerberater bei Deque werde ich mit einer Vielzahl von Fragen dazu konfrontiert, wie technische Barrierefreiheitsprobleme umgesetzt und behoben werden können. Ein Thema, das bei den Fragen der Entwickler stets im Vordergrund zu stehen scheint, lautet: „Wie verwalte ich den Fokus in meinem JavaScript-Framework?“. Diese Frage beschränkt sich jedoch nicht nur auf Entwickler, denn sie wurde mir auch schon von Designern und Projektmanagern gestellt. So einfach diese Frage auch klingen mag, handelt es sich dabei tatsächlich um eine ziemlich vielschichtige und komplizierte Angelegenheit.
Um dieses Thema vollständig zu verstehen, muss man zunächst einmal begreifen, warum es überhaupt ein Problem darstellt. Im Vergleich zum herkömmlichen Web, bei dem das Navigieren zwischen verschiedenen Seiten der Website jedes Mal ein Neuladen des Browsers zur Folge hatte, aktualisieren JavaScript-Frameworks wie React, Angular und Vue das DOM nicht wirklich. Stattdessen werden beim Navigieren (oder Routing) in JavaScript-Frameworks die Inhalte dynamisch hinzugefügt und ausgetauscht, sodass es so aussieht, als hätte sich die Seite geändert.
Genau darin liegt das Problem: Für einen Nutzer, der assistive Technologien wie NVDA oder JAWS verwendet, geht der Fokus auf der Seite verloren oder bleibt an einer Stelle hängen, und der Nutzer wird nicht darauf hingewiesen, dass eine neue Seite erschienen ist. Dies kann dazu führen, dass sich ein Nutzer auf Ihrer Seite verwirrt oder verloren fühlt, da er möglicherweise denkt, der Link habe nicht funktioniert, ODER er verlässt Ihre Website möglicherweise ganz, weil die Navigation extrem schwierig ist. Nicht nur Nutzer von assistiven Technologien haben hier Probleme; auch Nutzer, die ausschließlich die Tastatur verwenden, können sehr frustriert sein, da der Fokus nicht korrekt verwaltet wird und sie gezwungen sind, zurück zu den neuen Inhalten zu navigieren, die auf dem Bildschirm erschienen sind.
Da Sie das Problem nun verstanden haben, stellt sich die Frage: Wie können wir es beheben? Es gibt verschiedene Lösungen, die sich zur Behebung dieses Problems gut eignen, aber wir müssen die Sache sowohl aus der Perspektive eines Designers als auch aus der eines Entwicklers betrachten.
Aus der Sicht des Entwicklers
Die Lösung für das oben genannte Problem bietet je nach Aufbau Ihrer Anwendung tatsächlich mehrere verschiedene Ansätze. Die unten aufgeführten Lösungen stellen die empfohlenen Maßnahmen dar, geordnet von der besten Lösung bis hin zur absoluten Mindestanforderung, um den Seitenwechsel funktionsfähig zu machen.
Den Fokus auf die erste Überschrift im Inhalt der neuen Seite setzen
Once a new page is loaded, the focus should go to the most relevant heading of the new page. Preferably this would be the top-level heading (<h1>,<h2>). This can be achieved by adding tabindex= “-1” to the heading and using the component lifecycle of the JavaScript framework you are using and JavaScript to assign focus to the top-level heading.
Fokus auf den Hauptteil der Seite verschieben
Wenn auf der Seite, zu der ein Benutzer wechselt, keine passende Überschrift vorhanden ist, besteht eine weitere Möglichkeit zur Steuerung des Fokus darin, den Fokus auf den `body`-Element zu setzen. Dadurch soll ein ähnliches Erlebnis wie bei einer Website erzielt werden, bei der bei jedem Seitenwechsel die Seite neu geladen wird. Um dies zu erreichen, müssten Sie dem `body`-Element oder dem Hauptcontainer den Attributwert `tabindex="-1"` hinzufügen und den Fokus anschließend über JavaScript oder den Lebenszyklus der Komponente steuern.
Den Fokus auf den Link „Zum Hauptinhalt springen“ verschieben und gleichzeitig mit einer dynamischen Meldung darauf hinweisen, dass sich die Seite geändert hat
Zu guter Letzt: Falls die beiden erstgenannten Lösungen nicht verfügbar sind und Ihre Website einen Link „Zum Hauptinhalt springen“ enthält, verlagern Sie den Fokus auf diesen Link.
Dabei sollte dem Nutzer außerdem eine Live-Meldung angezeigt werden, dass sich die Seite geändert hat, oder der neue Name der Seite, damit er weiß, dass sich die Seite geändert hat. Auf diese Weise erfährt der Nutzer, dass sich die Seite geändert hat, und kann dann über den Link „Zum Hauptinhalt springen“ direkt zum neuen Seiteninhalt wechseln.
Gestaltungsperspektive
Bei der Arbeit mit einem JavaScript-Framework gibt es einige gestalterische Entscheidungen zu berücksichtigen, damit Seitenübergänge für alle Nutzer sinnvoll gestaltet werden. Im Folgenden finden Sie einige Überlegungen dazu:
Make sure each page has a proper heading, preferably <h1> or <h2>
Indem sie sicherstellen, dass jede Seite eine passende Überschrift enthält, können Entwickler bei Seitenwechseln den Fokus korrekt auf die Überschrift legen. Zudem sollte die Überschrift aussagekräftig genug sein, um auch den Zweck der Seite zu verdeutlichen.
Geben Sie an, was beim Übergang von einer Seite zur nächsten geschehen soll
Wenn möglich, sollten Sie bei der Gestaltung von Inhalten – sofern Sie wissen, dass die Entwicklung in einem JavaScript-Framework erfolgt – festlegen, was beim Übergang zu einer neuen Seite geschehen soll. Dies hilft den Entwicklern zu verstehen, worauf der Fokus liegen soll, sobald der Seitenwechsel vollständig abgeschlossen ist.
Stellen Sie sicher, dass der Fokus bei Bedarf auf dem Hauptteil der Seite liegt
Wenn auf der Seite keine relevante Überschrift vorhanden ist oder es nicht möglich ist, den Fokus auf die Überschrift zu setzen, und Sie den Fokus stattdessen auf den Hauptteil des DOM setzen müssen, muss ein Fokusindikator vorhanden sein, damit die Benutzer erkennen können, wo sich der aktuelle Fokus befindet.
Zusammenfassung
So einfach das Thema „Fokusverwaltung“ zwischen den Seiten Ihrer Website auch erscheinen mag – Sie sehen nun, welche weitreichenden Auswirkungen es auf die Barrierefreiheit Ihrer Website haben kann. Leider geht der Trend in letzter Zeit dahin, dass bei Websites, die mit JavaScript-Frameworks erstellt werden, immer weniger Wert auf die Fokusverwaltung gelegt wird.
Da gleichzeitig auch die Beliebtheit von JavaScript-Frameworks zunimmt, führt dies dazu, dass Websites extrem schwer barrierefrei zu gestalten sind. Wenn Sie jedoch die oben genannten Vorschläge und Gestaltungsrichtlinien in Ihrer Anwendung umsetzen, können wir diesen Trend umkehren und wieder dynamische Websites erstellen, die vollständig barrierefrei sind!
