In der heutigen Zeit der Webentwicklung neigen wir dazu, uns auf die nächste große Neuerung zu konzentrieren, die wir auf unserer Website implementieren möchten. Wir alle lassen uns von den neuesten, auffälligen Designs oder der Entscheidung für ein völlig neues JavaScript-Framework wie React oder Angular begeistern. Es geht immer darum, den nächsten Schritt zu machen, um relevant und auf dem neuesten Stand zu bleiben. Was dabei jedoch oft auf der Strecke bleibt, sind Altanwendungen.
Jede Website enthält Altinhalte. Dabei kann es sich um einige Seiten handeln, die schon lange nicht mehr aktualisiert wurden, um einen Code, der nicht mehr gepflegt wird, oder sogar um einen gesamten Anwendungsablauf, der früher hervorragend funktioniert hat, aber nie aktualisiert wurde. In vielen Fällen sind die Teams, die diese Inhalte entwickelt haben oder über Kenntnisse zur Funktionsweise des Codes verfügen, inzwischen nicht mehr im Unternehmen tätig.
Website-Betreiber neigen dazu, diese älteren Inhalte zu vergessen, weil sie schon so lange vorhanden sind oder weil sie bereits vor ihrer Zeit entstanden sind. Diese Inhalte sind jedoch nach wie vor Teil Ihrer gesamten Website und müssen weiterhin für alle Nutzer barrierefrei zugänglich sein. Glücklicherweise gibt es einige wichtige Methoden, um diese Probleme zu testen und anschließend zu beheben, damit die älteren Inhalte auf Ihrer Website oder in Ihrer Anwendung barrierefrei sind.
Testen von Altinhalten
Tastaturtest
Die Tastaturnavigation ist einer der wichtigsten Aspekte der Barrierefreiheit. Nutzer, die die Tastatur verwenden, haben bestimmte Erwartungen und Annahmen darüber, was geschieht, wenn sie mit der Tabulatortaste zu einer Schaltfläche springen, in ein Formularfeld klicken oder einen Eintrag aus einer Kombinationsliste auswählen. Durch Tastaturtests wird sichergestellt, dass ein Nutzer nicht nur mit der Tastatur mit der Seite interagieren und auf ihr navigieren kann, sondern dass dies auch auf vorhersehbare Weise geschieht.
Die meisten von uns wissen, dass man mit der Tabulatortaste und den Pfeiltasten durch die Links auf einer Seite und die Formularelemente navigieren kann, dass man mit Umschalt + Tab rückwärts springt und dass man mit der Eingabetaste (und manchmal auch mit der Leertaste) ein Element auswählen kann. Bei der Entwicklung gibt es noch weitere Steuerelemente zu beachten, wie beispielsweise Registerkarten, Akkordeons und Karussell-Navigationen.
Tastaturtests können auch dabei helfen, „Keyboard Traps“ zu erkennen. Ein „Keyboard Trap“ ist genau das, wonach es klingt: Ein Nutzer bleibt an einem Element hängen und kann nicht zu anderen interaktiven Elementen auf der Seite wechseln. Dies ist für Nutzer, die ausschließlich die Tastatur verwenden, äußerst problematisch und lässt sich weitgehend vermeiden, wenn während der Fehlerbehebung Tastaturtests durchgeführt werden.
Tipp: Schauen Sie immer unter „ Deque“ bei den benutzerdefinierten Widgets nach, wenn Sie sich nicht sicher sind, wie sich Ihre Inhalte mit der Tastatur bedienen lassen.
Stellen Sie sicher, dass keine positiven Tab-Indizes vorhanden sind
Grundsätzlich sollten Tab-Indizes niemals auf einen positiven Wert gesetzt werden. Vor allem ältere Anwendungen verstoßen häufig gegen diese Regel. Bei Werten von eins oder höher wird eine explizite Tabulatorreihenfolge festgelegt, die die natürliche Tabulatorreihenfolge der Seite unterbricht. Elemente mit einem positiven Tab-Index erhalten immer zuerst den Fokus vor anderen Elementen auf dieser Seite, die interaktiv sind oder einen „tabindex=“0““ aufweisen.
Beispiel für positive Tabulator-Indizes. In diesem Beispiel würde „Anmelden“ als Erstes den Tabulator-Fokus erhalten, gefolgt von „Benutzername vergessen“, dann „Passwort vergessen“ und schließlich „Angemeldet bleiben“:
<div class="container">
<div>
<input type="checkbox" id="remember"/>
<label for="remember">Remember Me</label>
</div>
<button tabindex="1" class="btn">Sign in</button>
<a href="#" tabindex="2">Forgot Username?></a>
<a href="#" tabindex="3">Forgot Password?</a>
</div>
Wenn es um die Überarbeitung von Legacy-Code geht, der positive Tabulator-Indizes verwendet, ist dies vielleicht die größte Herausforderung unter den hier aufgeführten Problemen, da dies möglicherweise eine umfassende Überarbeitung der Codebasis erfordern könnte, die weit über das bloße Ersetzen positiver Tabulator-Indizes durch 0 hinausgeht.
Kurz gesagt: Stellen Sie sicher, dass der Tab-Index von HTML-Tags nicht größer als 0 ist, und achten Sie darauf, dass keine Skripte positive Tab-Indizes zu Ihren Inhalten hinzufügen.
Verwenden Sie ein automatisches Scan-Tool
Verwenden Sie ein automatisches Scan-Tool wie die Axe-Erweiterung, um Ihre Inhalte auf Barrierefreiheitsprobleme zu überprüfen. Der Axe-Barrierefreiheits-Checker für Chrome und Firefox ist ein schnelles, ressourcenschonendes Tool zur Barrierefreiheitsprüfung, das keine Fehlalarme liefert. Mit Axe können Sie die Barrierefreiheitsverstöße Ihrer Inhalte mit nur einem Klick ermitteln! Und das Ganze ist kostenlos!
Die Automatisierung erkennt zwar nicht alle Barrierefreiheitsverstöße, die in Ihren Inhalten vorhanden sind, und ersetzt auch nicht die ersten beiden Punkte dieser Liste, kann Ihnen jedoch dabei helfen, Seiten schnell auf Barrierefreiheitsverstöße zu überprüfen und eine Liste mit Verstößen zu erstellen, anhand derer Sie Ihre älteren Inhalte barrierefreier gestalten können als zuvor.
Sanierung
Verwenden Sie ARIA, wo immer möglich (aber nur, wenn es korrekt eingesetzt wird)
ARIA steht für „Accessible Rich Internet Applications“ und trägt dazu bei, Webinhalte oder Webanwendungen für Menschen mit Behinderungen besser zugänglich zu machen. Es ist insbesondere bei dynamischen Inhalten und komplexen Bedienelementen der Benutzeroberfläche hilfreich, die mit Ajax, HTML, JavaScript und verwandten Technologien entwickelt wurden. Mit WAI-ARIA können Entwickler komplexe Webanwendungen für Menschen mit Behinderungen barrierefrei und nutzbar gestalten.
In der Barrierefreiheits-Community lautet die oberste Regel für ARIA: „Verwende ARIA nicht.“ Diese Regel gilt, weil die meisten Entwickler ARIA falsch einsetzen, was wiederum dazu führt, dass Websites noch weniger barrierefrei werden. Manchmal fehlt es jedoch an Zeit oder Wissen, um den Code in semantisches HTML umzuschreiben. In anderen Fällen wären umfangreiche Änderungen am CSS und möglicherweise auch am JavaScript erforderlich. In solchen Fällen erweist sich ARIA als nützlich.
Beispiel für den Einsatz von ARIA in einer Legacy-Anwendung:
<div class="main-content" role="main">
<span class="h1" role="heading" aria-level="1">Welcome to our site!</span>
<div class="container">
<p>Please enter your information</p>
<input type="checkbox" aria-labelledby="checkLabel" value="a11y">
<span id="checkLabel">I like accessibility</span>
<div tabindex="0" role ="button" class="btn">Continue</div>
</div>
</div>
ARIA ist eine Reihe von Attributen, die Möglichkeiten definieren, Webinhalte und Webanwendungen schnell und systematisch barrierefrei zu gestalten. Dabei sind keine größeren Änderungen an den HTML-Elementen erforderlich, und es genügen einfache Anpassungen an den einzelnen HTML-Tags, um diese barrierefrei zu machen. Auch wenn dies technisch gesehen einen „Verstoß gegen die ARIA-Regeln“ darstellt, kann ARIA bei älteren Anwendungen eine hervorragende Möglichkeit sein, Inhalte schnell barrierefrei zu gestalten, ohne die Codebasis wesentlich zu beeinträchtigen.
Eine JavaScript-Datei für die Barrierefreiheit erstellen
Es kann hilfreich sein, zwischen JavaScript, das die Kernfunktionalität Ihrer Anwendung gewährleistet, und JavaScript für die Barrierefreiheit zu unterscheiden. In diesem Fall geht es darum, eine JavaScript-Datei zu erstellen, die alle (oder die meisten) Probleme hinsichtlich der Barrierefreiheit in Ihrer Altanwendung behebt. Diese Technik ermöglicht es Ihnen, Inhalte zu ändern, ohne den Altcode anzutasten, und da sich dieser im Laufe der Zeit in der Regel nicht drastisch verändert, besteht die Möglichkeit, Änderungen zur Verbesserung der Barrierefreiheit über JavaScript vorzunehmen.
Ähnlich wie im oben beschriebenen Szenario kann die Erstellung einer barrierefreien JavaScript-Datei hilfreich sein, wenn Sie keinen Zugriff auf den Legacy-Code haben, der Code aus einer Bibliothek eines Drittanbieters stammt oder von einem Drittanbieter erstellt wurde, Sie das semantische HTML nicht ändern können oder schlichtweg keine Kenntnisse über die Codebasis besitzen. In diesem Fall würde ein Entwickler alle Barrierefreiheitsprobleme auf seiner Website identifizieren und, anstatt sie direkt in der Codebasis zu beheben, einfach alle mit JavaScript beheben und das Skript der Anwendung selbst hinzufügen. Wenn die Seite dann geladen wird, wird der Code auf die Seite selbst angewendet, und die Anwendung ist anschließend barrierefrei!
Hier ist ein kurzes JavaScript-Snippet, das einen nicht-semantischen Button mit ARIA-Attributen und Tastaturereignissen versieht.
const contButton = document.querySelector("#continue");
if (contButton) {
contButton.setAttribute("tabindex","0");
contButton.setAttribute("role","button");
contButton.addEventListener("keydown", event => {
if (event.code === "Enter" || event.code === "Space") {
event.preventDefault();
event.target.click();
}
});
}
Deque bietet einen Dienst zur Erstellung dieser JavaScript-Datei für Barrierefreiheit sowie CSS-Korrekturen an, der „Amaze“ heißt. Kontaktieren Sie uns, wenn Sie mehr darüber erfahren möchten.
Lerne den Quellcode kennen
Im Zweifelsfall sollten Sie sich mit der Codebasis vertraut machen und diese entsprechend anpassen. Wenn der von Ihnen betreute Legacy-Code in Ihrem Unternehmen in großem Umfang genutzt wird, ist eine schnelle Lösung wie die beiden oben genannten Punkte möglicherweise nicht der beste Ansatz. In diesem Fall ist es vielleicht am besten, sich mit der Codebasis vertraut zu machen und die Änderungen direkt an der Quelle vorzunehmen.
Auch wenn es einfacher sein mag, ARIA zu verwenden oder eine JavaScript-Datei für Barrierefreiheitsprobleme zu erstellen, funktioniert manchmal die gute alte Methode, sich einfach in den Quellcode einzuarbeiten, am besten. Zu diesen Änderungen könnte gehören, auf ARIA zu verzichten und den Inhalt in semantisches HTML umzuwandeln. Die Behebung der Barrierefreiheitsprobleme an der Quelle kann der beste Weg sein, um sicherzustellen, dass die Barrierefreiheit dauerhaft gewährleistet ist.
Zusammenfassung
Auch wenn Legacy-Anwendungen zu einem bestimmten Zeitpunkt vielleicht eine moderne und zuverlässige Lösung waren, können sie im Laufe der Zeit unzugänglich werden, da anderer Code Vorrang erhält. Auch wenn die Entwickler oder Betreuer des Codes längst nicht mehr dabei sind und das Gesamtverständnis möglicherweise fehlt, sind Sie letztendlich für die Inhalte verantwortlich, die den Nutzern in diesen Anwendungen präsentiert werden.
Wenn Sie die oben genannten Teststrategien nutzen, um Probleme bei der Barrierefreiheit zu identifizieren, einen Aktionsplan zu deren Behebung erstellen und diese anschließend mithilfe einer der vorgeschlagenen Strategien beheben, tragen Sie dazu bei, ein einheitliches Erlebnis bei Ihren neuen und bestehenden Inhalten zu schaffen, das sicherstellt, dass Ihre Inhalte für alle nutzbar sind.
