Barrierefreiheit prüfen

Rob Dodson

Die Feststellung, ob Ihre Website oder Anwendung zugänglich ist, kann wie eine eine überwältigende Aufgabe. Wenn Sie zum ersten Mal an die Barrierefreiheit herangehen, Das so breitgefächerte Thema lässt Sie vielleicht nicht wissen, wo Sie anfangen sollen. Schließlich verschiedene Fähigkeiten zu berücksichtigen, eine entsprechend breit gefächerte Reihe von Problemen zu berücksichtigen.

In diesem Post werden diese Probleme in einem logischen, schrittweisen Prozess für eine bestehende Website auf Barrierefreiheit überprüft.

Mit der Tastatur beginnen

Für Nutzende, die keine Maus verwenden können oder möchten, ist die Tastaturnavigation um alle Inhalte auf dem Bildschirm zu erreichen. Diese Zielgruppe umfasst Nutzende mit motorischen Beeinträchtigungen, wie z. B. Repetitive Belastung Lähmungen und Screenreader-Nutzer.

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

  • Navigieren Sie zunächst mit der Tabulatortaste durch Ihre Website. Die Reihenfolge, in der Elemente im Fokus sind sollte der DOM-Reihenfolge folgen. Wenn Sie nicht sicher sind, welche Elemente finden Sie im Modul zum Thema Barrierefreiheit im Internet. Das Beste Praxis ist, dass jede Steuerung, mit der Nutzende interagieren oder Eingaben machen können, sollte fokussierbar sein und eine Fokusanzeige (z. B. einen Fokusring) anzeigen.

  • Benutzerdefinierte interaktive Steuerelemente sollten fokussierbar sein. Wenn Sie JavaScript verwenden, <div> in ein ausgefallenes Drop-down-Menü einfügt, wird es nicht automatisch in das TAB-Reihenfolge. Wenn Sie ein benutzerdefiniertes Steuerelement fokussierbar machen möchten, geben Sie ihm ein tabindex="0". tabindex-Werte größer als 0 ändern die TAB-Reihenfolge und können für Screenreader-Nutzer.

  • Nur interaktive Inhalte fokussierbar machen. „tabindex“ wird zu „Nicht-“ hinzugefügt Interaktive Elemente wie Überschriften verlangsamen Tastatur-Nutzende, die die und hilft Nutzern von Screenreadern nicht, ankündigen zu dürfen.

  • Wenn Sie einer Seite neuen Content hinzufügen, lenken Sie die Aufmerksamkeit der Nutzer auf diesen Content. damit sie entsprechende Maßnahmen ergreifen können. Weitere Informationen finden Sie unter Fokus auf Seitenebene verwalten .

  • Gestalten Sie Ihre Website so, dass Nutzende immer das nächste Element fokussieren können, wenn sie Hüten Sie sich vor Widgets mit automatischer Vervollständigung und anderen Kontexten, die zu einer Tastaturfokus. Sie können den Fokus vorübergehend aufheben, wenn der Nutzer mit einem modalen Fenster und nicht mit dem Rest der Seite interagieren. Sie sollten jedoch bieten eine über die Tastatur zugängliche Möglichkeit, das modale Fenster zu verlassen. Weitere Informationen finden Sie unter Modalen und Tastaturfallen finden Sie ein Beispiel.

Fokuskontrolle nutzbar machen

Wenn Sie ein benutzerdefiniertes Steuerelement erstellt haben, können Ihre Nutzer auf alle Funktionen zugreifen. nur mit der Tastatur. Gelesen Fokus auf Komponenten verwalten finden Sie Techniken zur Verbesserung des Tastaturzugriffs.

Nicht sichtbare Inhalte verwalten

Viele Websites haben nicht sichtbare Inhalte, die im DOM vorhanden sind, aber nicht sichtbar sind. z. B. Links in einem responsiven Leistenmenü oder eine Schaltfläche in einem modalen Fenster die noch nicht angezeigt wurden. Wenn Sie diese Elemente im DOM belassen, die Tastatur verwirren, insbesondere bei Screenreadern, nicht sichtbare Inhalte an, als ob sie Teil der Seite sind.

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

Mit einem Screenreader testen

Die Verbesserung der allgemeinen Tastaturunterstützung bildet eine Grundlage für den nächsten Schritt: solltet ihr die Seite auf die richtige Beschriftung und Semantik prüfen. Screenreader-Navigation.

Falls ihr nicht sicher seid, wie semantische Auszeichnung von finden Sie unter Inhaltsstruktur.

  • Achte darauf, dass alle Bilder auf alt korrekt sind. Eine Ausnahme hiervon ist, Bilder dienen in erster Linie zur Präsentation und sind keine wesentlichen Bestandteile Inhalte. Um anzugeben, dass Screenreader ein Bild überspringen sollen, legen Sie den Parameter -Wert in einen leeren String: alt="".
  • Markieren Sie alle Steuerelemente für ein Label. Für benutzerdefinierte Steuerelemente ist möglicherweise Verwendung von aria-label oder aria-labelledby. Weitere Informationen finden Sie unter ARIA-Labels und -Beziehungen .
  • Prüfen Sie alle benutzerdefinierten Steuerelemente auf eine geeignete role und eine erforderliche ARIA die ihren Zustand kommunizieren. Ein benutzerdefiniertes Kästchen muss z. B. role="checkbox" und aria-checked="true|false", um ihre Bundesstaat. Allgemeine Informationen finden Sie unter Einführung in ARIA. Übersicht darüber, wie ARIA fehlende Semantik für benutzerdefinierte Steuerelemente bereitstellen kann.
  • Sorgen Sie dafür, dass der Informationsfluss auf Ihrer Seite sinnvoll ist. Weil Bildschirm navigieren die Leser in der DOM-Reihenfolge auf der Seite, sie geben alle Elemente an, mit CSS in einer unsinnigen Reihenfolge visuell neu positioniert wurde. Bei Bedarf früher auf der Seite erscheinen soll, physisch an einen früheren Punkt im DOM verschieben.
  • Die Screenreader-Navigation sollte für alle Inhalte auf der Seite unterstützt werden. Sicherstellen, Es sind keine Bereiche der Website dauerhaft ausgeblendet oder für den Bildschirm blockiert. Leseberechtigung.
    • Wenn Inhalte vor einem Screenreader verborgen sollten, z. B. wenn sie nicht zu sehen sein oder nur als Präsentation dienen, setzen Sie diese Inhalte auf aria-hidden="true". Eine ausführlichere Erklärung finden Sie unter Ausblenden von Inhalten:

Mit Screenreadern vertraut machen

Das Erlernen eines Screenreaders mag zunächst etwas schwierig erscheinen, nutzungsfreundlich sind. Im Allgemeinen kommen die meisten Entwickler mit ein paar einfachen Tastaturbefehle.

Wenn Sie einen Mac verwenden, sehen Sie sich dieses Video VoiceOver den Screenreader von Mac OS. Wenn du einen PC verwendest, sieh dir diese Video über NVDA, ein durch Spenden unterstützter Open-Source-Screenreader für Windows.

aria-hidden verhindert nicht den Tastaturfokus

Beachten Sie, dass ARIA nur die Semantik eines element; Dies hat keinen Einfluss auf das Verhalten des Elements. Sie können ein Element, das für Screenreader mit aria-hidden="true" ausgeblendet ist, das aber nicht das Fokusverhalten für dieses Element ändern. Bei interaktiven Inhalten, die nicht auf dem Bildschirm sichtbar sind, Verwende für interaktive Inhalte, die nicht auf dem Bildschirm zu sehen sind, das Attribut inert. um sicherzustellen, dass er wirklich aus dem Tastaturfluss entfernt wird. Bei älteren Browsern: aria-hidden="true" mit tabindex="-1" kombinieren.

Interaktive Elemente sollten ihren Zweck und Zustand angeben.

Visuelle Hinweise oder Angebote zur Funktion der Einstellung Eine Vielzahl von Personen auf einer Vielzahl von Geräten bedient Ihr Website.

  • Interaktive Elemente wie Links und Schaltflächen sollten nicht interaktive Elemente. Es ist schwierig für Nutzende, auf einer Website oder in einer App zu navigieren, wenn können sie nicht erkennen, ob ein Element anklickbar ist. Es gibt viele gültige Möglichkeiten, interaktive Elemente kennzeichnen. Eine gängige Praxis ist das Unterstreichen von Links zu um sie vom umgebenden Text zu unterscheiden.
  • Ähnlich wie bei der Fokusanforderung können auch interaktive Elemente wie Links und Schaltflächen einen hover-Status erfordern, um Mausnutzer zu informieren, wenn sich der Mauszeiger über etwas bewegt anklickbar. Um diese Elemente jedoch für andere Eingabemethoden zugänglich zu machen, müssen sie ohne den Status hover unterscheidbar sein.

Überschriften und Orientierungspunkte nutzen

Überschriften und Orientierungspunkte verleihen Ihrer Seite eine semantische Struktur. die Navigationseffizienz von Nutzenden von Hilfstechnologien erheblich steigern. Viele Nutzer von Screenreadern berichten, dass sie, wenn sie zum ersten Mal auf einer unbekannten Seite landen, versuchen sie in der Regel, anhand von Überschriften navigieren.

Außerdem können Screenreader zu wichtigen Sehenswürdigkeiten springen, wie <main> und <nav>. Aus diesen Gründen ist es wichtig zu berücksichtigen, Seitenstruktur als Leitfaden für die User Experience dienen.

  • Verwenden Sie die Hierarchie h1-h6. Stellen Sie sich Überschriften als Tools zum Erstellen einer Gliederung auf Ihrer Seite. Verlassen Sie sich nicht auf den integrierten Stil von Überschriften. Behandeln Sie sie stattdessen als ob sie alle die gleiche Größe hätten und die semantisch geeignete Ebene verwenden, für primäre, sekundäre und tertiäre Inhalte. Erstellen Sie dann mit CSS Überschriften Ihrem Design entsprechen.
  • Verwenden Sie Orientierungshilfen-Elemente und -Rollen, damit Nutzer sich wiederholende Inhalte umgehen können. Viele Mit Hilfstechnologien können Sie über Verknüpfungen zu bestimmten Bereichen der Seite wechseln, z. B. diejenigen, die durch <main>- oder <nav>-Elemente definiert sind. Diese Elemente haben implizite Rollen für Orientierungspunkte. Sie können auch das ARIA-Attribut role für Folgendes verwenden: ausdrücklich Regionen auf der Seite definieren, wie in <div role="search">. Weitere Informationen finden Sie unter Weitere Informationen finden Sie unter Semantik und Navigation. Beispiele.
  • Vermeiden Sie role="application", es sei denn, Sie haben Erfahrung damit. Die Funktion application weist Hilfstechnologien an, ihre Tastenkombinationen und alle Tasteneingaben auf der Seite. Das bedeutet, dass die Schlüssel die Screenreader-Nutzer in der Regel zum Navigieren auf der Seite verwenden. und Sie müssen alle Tastatureingaben selbst implementieren.

Überschriften und Orientierungspunkte mit einem Screenreader prüfen

Screenreader wie VoiceOver und NVDA bieten ein Kontextmenü, über das Sie wichtigen Regionen auf der Seite. Beim Testen auf Barrierefreiheit können Sie um einen Überblick über die Seite zu erhalten und zu ermitteln, Ebenen angemessen sind und welche Orientierungspunkte verwendet werden.

Weitere Informationen zu den Grundlagen der VoiceOver und NVDA:

Prozess automatisieren

Das manuelle Testen einer Website auf Zugänglichkeit kann mühsam und fehleranfällig sein. Da sich Tests als nützlich erweisen, wie möglich. Sie können Browsererweiterungen und Bedienungshilfen für die Befehlszeile verwenden. Test-Suites.

  • Besteht die Seite alle Tests der aXe oder WAVE Browsererweiterungen? Es gibt noch andere Möglichkeiten, aber diese Erweiterungen kann eine nützliche Ergänzung zu jedem manuellen Testprozess sein, da kleine Probleme wie fehlende Kontrastverhältnisse und fehlende ARIA erkennen Attribute.
    • Wenn Sie lieber mit der Befehlszeile arbeiten, axe-cli bietet dieselben Funktionen. als AXe-Browsererweiterung, kann aber über Ihr Terminal ausgeführt werden.
  • Um Regressionen zu vermeiden, insbesondere in einer Continuous Integration-Umgebung, eine Bibliothek wie Axe-Core, in Ihre automatisierte Testsuite integrieren. Axe-Core ist derselbe Motor, der auch aXe-Chrome-Erweiterung, jedoch in einem Befehlszeilen-Dienstprogramm.
  • Wenn Sie ein Framework oder eine Bibliothek verwenden: Bietet es eigene Bedienungshilfen Werkzeuge? Beispiel: Der Parameter protractor-accessibility-plugin für Angular. Nutzen Sie nach Möglichkeit die verfügbaren Tools.

Lighthouse zum Testen von PWAs verwenden

Lighthouse ist ein Tool, mit dem misst die Leistung Ihrer progressiven Web-App (PWA). Außerdem nutzt es die Axe-Core-Bibliothek für seine Barrierefreiheitstests.

Wenn Sie Lighthouse bereits verwenden, prüfen Sie, ob die Zugänglichkeit funktioniert Tests in Ihrem Bericht. Beheben Sie die Fehler, um die Nutzererfahrung von für Ihre Website.

Zusätzliche Ressourcen