Diese Seite wurde von der Cloud Translation API übersetzt.

Barrierefreiheit prüfen

Rob Dodson

Die Zugänglichkeit Ihrer Website oder Anwendung zu bestimmen, kann als schwierige Aufgabe erscheinen. Wenn Sie sich zum ersten Mal mit Barrierefreiheit befassen, fragen sich die Vielfältigkeit des Themas möglicherweise, wo Sie anfangen sollen. Schließlich bedeutet das Arbeiten, eine Vielzahl von Fähigkeiten zu berücksichtigen, auch eine entsprechend vielfältige Bandbreite von Problemen, die berücksichtigt werden müssen.

In diesem Beitrag werden diese Probleme in einem logischen, schrittweisen Prozess zur Prüfung einer vorhandenen Website auf Barrierefreiheit aufgeschlüsselt.

Mit der Tastatur beginnen

Für Nutzer, die keine Maus verwenden können oder möchten, ist die Tastaturnavigation das wichtigste Mittel, um alle Elemente auf dem Bildschirm zu erreichen. Zu dieser Zielgruppe gehören Nutzer mit motorischen Einschränkungen wie RSI oder Lähmung sowie Nutzer von Screenreadern.

Achten Sie für eine gute Tastaturnutzung auf eine logische TAB-Reihenfolge und deutlich erkennbare Fokusstile.

Gehen Sie mit der Tabulatortaste durch Ihre Website. Die Reihenfolge, in der die Elemente fokussiert werden, sollte der DOM-Reihenfolge entsprechen. Wenn Sie sich nicht sicher sind, welche Elemente hervorgehoben werden sollten, können Sie Ihr Wissen unter Grundlagen des Fokus auffrischen. Als Best Practice wird empfohlen, dass jedes Steuerelement, mit dem Nutzer interagieren oder Eingaben vornehmen können, fokussierbar sein und eine Fokusanzeige enthalten sollte (z. B. einen Fokusring).

Achtung :Verwenden Sie in Ihrem CSS-Code nicht outline: none, um Fokusstile zu deaktivieren. Dies ist gängige Praxis. Wenn Sie jedoch keine Alternative anbieten, haben Tastaturnutzer keine Möglichkeit festzustellen, welches Element fokussiert ist und können nicht mit Ihrer Seite interagieren. Wenn Sie bei der Gestaltung zwischen Maus- und Tastaturfokus unterscheiden möchten, können Sie eine Bibliothek wie what-input hinzufügen.
Benutzerdefinierte interaktive Steuerelemente sollten fokussierbar sein. Wenn Sie mit JavaScript ein <div> in ein schickes Drop-down-Menü umwandeln, wird es nicht automatisch in die TAB-Reihenfolge eingefügt. Um ein benutzerdefiniertes Steuerelement fokussierbar zu machen, weisen Sie ihm tabindex="0" zu. tabindex-Werte größer als 0 ändern die TAB-Reihenfolge und können für Nutzer von Screenreadern verwirrend sein.
Nur interaktive Inhalte fokussierbar machen. Wenn Sie tabindex zu nicht interaktiven Elementen wie Überschriften hinzufügen, verlangsamt die Tastaturnutzer, die den Bildschirm sehen können, und ist für Nutzer von Screenreadern nicht hilfreich, da der Screenreader sie bereits weiß, um sie anzukündigen.
Wenn du einer Seite neuen Inhalt hinzufügst, lenke die Aufmerksamkeit der Nutzer zuerst auf diese Inhalte, damit sie darauf reagieren können. Beispiele finden Sie unter Fokus auf Seitenebene verwalten.
Gestalten Sie Ihre Website so, dass sich die Nutzer jederzeit auf das nächste Element konzentrieren können. Vorsicht bei Widgets für die automatische Vervollständigung und anderen Kontexten, die den Tastaturfokus beeinträchtigen können. Sie können den Fokus vorübergehend einblenden, wenn der Nutzer mit einem modalen Fenster und nicht mit dem Rest der Seite interagieren soll. Sie sollten jedoch immer eine per Tastatur zugängliche Möglichkeit bieten, das modale Fenster zu schließen. Ein entsprechendes Beispiel finden Sie unter Modale und Tastaturtraps.

Fokussierung leicht verständlich

Wenn Sie ein benutzerdefiniertes Steuerelement erstellt haben, können Ihre Nutzer alle Funktionen nur über die Tastatur aufrufen. Informationen zur Verbesserung des Tastaturzugriffs finden Sie unter Fokus in Komponenten verwalten.

Nicht sichtbare Inhalte verwalten

Viele Websites haben nicht sichtbare Inhalte im DOM, die aber nicht sichtbar sind, z. B. Links in einem responsiven Leistenmenü oder eine Schaltfläche in einem modalen Fenster, die noch nicht angezeigt wurde. Wenn diese Elemente im DOM verbleiben, kann dies die Tastatureingabe verwirren. Dies gilt insbesondere für Screenreader, die nicht sichtbare Inhalte als Teil der Seite ausgeben.

Tipps zum Umgang mit diesen Elementen finden Sie unter Umgang mit nicht sichtbaren Inhalten.

Mit einem Screenreader testen

Die Verbesserung der allgemeinen Tastaturunterstützung legt eine Grundlage für den nächsten Schritt, nämlich das Überprüfen der Seite auf die richtige Beschriftung und Semantik und auf Hindernisse für die Screenreader-Navigation.

Falls Sie nicht wissen, wie semantisches Markup von Hilfstechnologien interpretiert wird, lesen Sie den Artikel Inhaltsstruktur.

Überprüfe alle Bilder auf richtigen alt-Text. Hiervon ausgenommen sind Bilder, die hauptsächlich zur Präsentation dienen und keine wesentlichen Inhalte sind. Um anzugeben, dass Screenreader ein Bild überspringen sollen, legen Sie den Wert auf einen leeren String fest: alt="".
Prüfen Sie alle Steuerelemente auf ein Label. Für benutzerdefinierte Steuerelemente kann die Verwendung von aria-label oder aria-labelledby erforderlich sein. Beispiele finden Sie unter ARIA-Labels und -Beziehungen.
Prüfen Sie alle benutzerdefinierten Steuerelemente auf eine geeignete role und alle erforderlichen ARIA-Attribute, die ihren Status angeben. Ein benutzerdefiniertes Kästchen benötigt beispielsweise role="checkbox" und aria-checked="true|false", um seinen Status korrekt zu übertragen. Einen allgemeinen Überblick darüber, wie ARIA die fehlende Semantik für benutzerdefinierte Steuerelemente bereitstellen kann, finden Sie unter Einführung in ARIA.
Achten Sie darauf, dass der Informationsfluss auf Ihrer Seite sinnvoll ist. Da Screenreader die Seite in der DOM-Reihenfolge navigieren, geben sie alle Elemente an, die Sie visuell mit CSS in einer unsinnigen Reihenfolge visuell neu positioniert haben. Wenn etwas weiter oben auf der Seite angezeigt werden soll, verschieben Sie es im DOM weiter nach hinten.
Versuchen Sie, die Screenreader-Navigation für alle Inhalte auf der Seite zu unterstützen. Achten Sie darauf, dass keine Bereiche der Website dauerhaft ausgeblendet oder für den Screenreader-Zugriff blockiert werden.
- Wenn Inhalte vor einem Screenreader verborgen werden sollten, z. B. außerhalb des Bildschirms oder nur zu Präsentationszwecken, setzen Sie diese Inhalte auf aria-hidden="true". Eine ausführlichere Erläuterung finden Sie unter Inhalte ausblenden.

Auch wenn es zunächst einschüchternd erscheint, sich mit einem Screenreader vertraut zu machen, ist er ziemlich nutzerfreundlich. Im Allgemeinen brauchen Entwickler nur ein paar einfache Tastaturbefehle.

Wenn Sie einen Mac verwenden, sehen Sie sich dieses Video über VoiceOver an, den auf Mac OS vorinstallierten Screenreader. Wenn Sie einen PC verwenden, sehen Sie sich dieses Video über NVDA an, einen durch Spenden unterstützten Open-Source-Screenreader für Windows.

Tastaturfokus wird von `aria-hidden` nicht verhindert

ARIA kann sich nur auf die Semantik eines Elements auswirken und nicht auf das Verhalten des Elements. Mit aria-hidden="true" können Sie ein Element für Screenreader ausblenden. Das ändert jedoch nicht das Fokusverhalten für dieses Element. Verwende bei nicht sichtbaren interaktiven Inhalten das Attribut inert, damit sie tatsächlich aus dem Tastaturablauf entfernt wird. Kombinieren Sie für ältere Browser aria-hidden="true" mit tabindex="-1".

Interaktive Elemente sollten ihren Zweck und Zustand angeben

Wenn du visuelle Hinweise oder Angebote dazu angibst, was ein Steuerelement leisten kann, hilft es vielen Nutzern auf den verschiedensten Geräten dabei, deine Website zu bedienen und zu bedienen.

Interaktive Elemente wie Links und Schaltflächen sollten von nicht interaktiven Elementen unterscheidbar sein. Für Nutzende ist es schwierig, auf einer Website oder in einer App zu navigieren, wenn sie nicht wissen, ob ein Element anklickbar ist. Es gibt viele zulässige Möglichkeiten, interaktive Elemente zu kennzeichnen. Häufig werden Links unterstrichen, um sie vom umgebenden Text zu unterscheiden.
Ähnlich wie bei der Fokusanforderung ist für interaktive Elemente wie Links und Schaltflächen ein hover-Zustand erforderlich, um Mausnutzer zu informieren, wenn sich ihr Zeiger auf einem anklickbaren Element befindet. Damit diese Elemente jedoch für andere Eingabemethoden zugänglich gemacht werden, müssen sie ohne den Status hover unterscheidbar sein.

Überschriften und Orientierungspunkte nutzen

Überschriften und Sehenswürdigkeiten geben Ihrer Seite eine semantische Struktur und erhöhen die Effizienz bei der Navigation für Nutzer von Hilfstechnologien. Viele Screenreader-Nutzer berichten, dass sie normalerweise versuchen, nach Überschriften zu navigieren, wenn sie zum ersten Mal auf einer unbekannten Seite landen.

Ebenso bieten Screenreader die Möglichkeit, zu wichtigen Orientierungspunkten wie <main> und <nav> zu springen. Aus diesen Gründen ist es wichtig zu überlegen, wie die Struktur deiner Seite als Orientierung für die Nutzererfahrung dienen kann.

Verwenden Sie die h1-h6-Hierarchie. Stellen Sie sich Überschriften als Tools zum Erstellen eines Gliederung Ihrer Seite vor. Verlassen Sie sich nicht auf den integrierten Stil von Überschriften. Stattdessen sollten Sie sie so behandeln, als hätten sie alle dieselbe Größe, und die semantisch geeignete Ebene für primäre, sekundäre und tertiäre Inhalte verwenden. Passen Sie dann die Überschriften mithilfe von CSS an Ihr Design an.
Verwende Orientierungspunkte und -rollen, damit Nutzer sich wiederholende Inhalte umgehen können. Viele Hilfstechnologien bieten Verknüpfungen, um zu bestimmten Bereichen der Seite zu springen, z. B. zu den Bereichen, die mit <main>- oder <nav>-Elementen definiert werden. Diese Elemente haben implizite Orientierungsrollen. Sie können auch das ARIA-Attribut role verwenden, um Regionen auf der Seite explizit zu definieren, wie in <div role="search">. Weitere Beispiele finden Sie unter Semantik und Navigation von Inhalten.
Verwenden Sie role="application" nur dann, wenn Sie Erfahrung im Umgang damit haben. Die Rolle application weist Hilfstechnologien an, ihre Verknüpfungen zu deaktivieren und alle Tastenbetätigungen zur Seite weiterzuleiten. Das bedeutet, dass die Tasten, mit denen Nutzer von Screenreadern normalerweise zum Navigieren auf der Seite verwendet werden, nicht mehr funktionieren und Sie alle Tastaturfunktionen selbst implementieren müssen.

Überschriften und Markierungen mit einem Screenreader prüfen

Screenreader wie VoiceOver und NVDA bieten ein Kontextmenü, über das Sie zu wichtigen Bereichen auf der Seite springen können. Beim Testen der Barrierefreiheit können Sie sich mithilfe dieser Menüs einen Überblick über die Seite verschaffen und feststellen, ob die Überschriftenebenen geeignet sind und welche Orientierungspunkte verwendet werden.

Weitere Informationen finden Sie in diesen Anleitungsvideos zu den Grundlagen von VoiceOver und NVDA.

Prozess automatisieren

Das manuelle Testen einer Website auf Zugänglichkeit kann mühsam und fehleranfällig sein. Es ist empfehlenswert, Tests so weit wie möglich zu automatisieren. Sie können Browsererweiterungen und Testsuiten für Barrierefreiheit in der Befehlszeile verwenden.

Besteht die Seite alle Tests der Browsererweiterung aXe oder WAVE? Es gibt noch andere Optionen, aber diese Erweiterungen können eine nützliche Ergänzung für jeden manuellen Testprozess sein, da sie auch subtile Probleme wie fehlerhafte Kontrastverhältnisse und fehlende ARIA-Attribute aufgreifen können.
- Wenn Sie lieber mit der Befehlszeile arbeiten, bietet axe-cli dieselben Funktionen wie die aXe-Browsererweiterung, kann jedoch von Ihrem Terminal aus ausgeführt werden.
Um Regressionen zu vermeiden, insbesondere in einer Continuous-Integration-Umgebung, sollten Sie eine Bibliothek wie axe-core in Ihre automatisierte Testsuite einbinden. axe-core ist dieselbe Engine, die auch die aXe-Chrome-Erweiterung nutzt, jedoch in einem Befehlszeilendienstprogramm.
Wenn Sie ein Framework oder eine Bibliothek verwenden, stellt es eigene Tools für die Barrierefreiheit bereit? Ein Beispiel dafür ist das protractor-accessibility-plugin für Angular. Nutzen Sie nach Möglichkeit immer die verfügbaren Tools.

PWAs mit Lighthouse testen

Lighthouse ist ein Tool, mit dem die Leistung Ihrer progressiven Web-App (PWA) gemessen wird. Außerdem nutzt es die Axe-Core-Bibliothek für die Tests zur Barrierefreiheit.

Wenn Sie Lighthouse bereits verwenden, suchen Sie in Ihrem Bericht nach fehlgeschlagenen Tests zur Barrierefreiheit. Beheben Sie die Fehler, um die Nutzerfreundlichkeit Ihrer Website insgesamt zu verbessern.