Bewertungs-Checkliste

Diese Checkliste enthält einen Überblick darüber, wie Sie alles abdecken können, was bei einem Audit zur Barrierefreiheit eines Projekts oder Produkts erforderlich ist. Ein Audit muss mindestens WCAG 2.0 AA abdecken:

  1. Wahrnehmbar
  2. Betriebsbereit
  3. Verständlich
  4. Robust

Diese Checkliste enthält auch neue Punkte aus WCAG 2.1 AA. Lesen Sie How to Meet WCAG (Quick Reference) für weitere Details zu jedem Punkt.

Klaviatur

Tastaturnavigation ohne laufenden Screenreader:

  • Sichtbarer Fokusstil auf Desktop mit Tastatur ( 2.4.7 Fokus sichtbar )

    Kann ein sehender Benutzer, der nur über die Tastatur verfügt, sehen, wo er sich gerade auf der Seite befindet?

  • Die Fokusreihenfolge stimmt mit dem visuellen Layout überein ( 1.3.2 Sinnvolle Reihenfolge )

    Kann sich ein sehender Benutzer, der nur über die Tastatur verfügt, bequem in einer vorhersehbaren Reihenfolge durch die Seitenelemente bewegen?

  • Keine unsichtbaren Tabstopps ( 2.4.3 Fokusreihenfolge )

    Gibt es beim Navigieren mit der Tastatur oder dem Cursor des Bildschirmlesegeräts fokussierbare Punkte auf dem Weg, die nicht fokussierbar sein sollten?

  • Keine plötzlichen Kontextänderungen, wenn ein Steuerelement den Fokus erhält ( 3.2.1 On Focus )

    Wird beim Navigieren mit der Tastatur oder dem Bildschirmleser-Cursor ein modales Fenster angezeigt oder wechselt der Fokus plötzlich auf etwas anderes, wenn ein Steuerelement fokussiert wird?

  • Tastenkombinationen für einzelne Buchstaben können neu zugeordnet oder deaktiviert werden ( 2.1.4 Tastenkombinationen für Zeichen )

    Benutzerdefinierte Kurzbefehle können für Sprachdiktierbenutzer und reine Tastaturbenutzer, die versehentlich einen Kurzbefehl aktivieren und ihren Platz verlieren, Chaos anrichten – frustrierend!

Bilder

  • Alle img - Elemente haben ein alt - Attribut ( 1.1.1 Nicht-Text-Inhalte )

    Wenn kein alt vorhanden ist, sagen Screenreader den Namen und den Pfad der Bilddatei an.

  • Dekorative Bilder verwenden leere Werte für alt - Attribute ( 1.1.1 Nicht-Text-Inhalte )

    Bringt das Bild einen Mehrwert zum Inhalt? <img src="…" alt="">

  • Beschreibende Bilder haben geeignete Textalternativen ( 1.1.1 Nicht-Text-Inhalte )

    Versuchen Sie, jemandem, der die Augen geschlossen hat, zu beschreiben, was auf dem Bild zu sehen ist – helfen Sie ihm, ein Bild in seinem Kopf zu malen.

  • Komplexe Bilder (Diagramme, Grafiken, Karten) haben eine separate Textalternative ( 1.1.1 Nicht-Text-Inhalte )

    Gibt es eine Klartextauflistung der Punkte auf der Karte?

  • Stellen Sie bei Bildern mit eingebettetem Text sicher, dass der alt - Wert dem eingebetteten Text entspricht ( 1.1.1 Nicht-Text-Inhalt )

    Das „Shopify“-Logobild sollte einen alt -Wert von „Shopify“ haben.

SVG

  • svg - Elemente haben focusable="false" , wenn sie ein Kind eines fokussierbaren Elements sind (1.3.1 Info und Beziehungen )

    Vermeidet einen Fehler im IE, der eine doppelte Ankündigung von fokussierbaren Elementen erzeugt.

  • svg - Elemente verfügen über aria-hidden="true" und role="presentation" , wenn sie dekorativ sind ( 4.1.2 Name, Rolle, Wert )

    Kann beim Navigieren mit dem Screenreader-Cursor manchmal versteckte Tabstopps erstellen.

  • svg , die use - Elemente enthalten, haben Leerzeichen zwischen den svg und use - Tags ( 2.1.2 No Keyboard Trap )

    Derzeit ein Fehler in Safari 10, der die Tab Navigation verhindert.

  • img -Elemente mit einer svg - Quelle enthalten das Attribut role="img" ( 4.1.2 Name, Rolle, Wert )

    Hilft bei der korrekten Übermittlung der Bildsemantik für VoiceOver/Safari unter iOS.

Code-Inspektion

Global

  • Seitenlang - lang , das für das html - Element festgelegt ist ( 3.1.1 Sprache der Seite )

    Hilft sicherzustellen, dass Screenreader Inhalte im richtigen Dialekt aussprechen.

  • Eindeutiger title ( 2.4.2 Seitentitel )

    Dieser Inhalt ist oft die erste angekündigte Information, die dem Benutzer versichert, wo er sich gerade befindet.

  • Ansichtsfenster-Zoom nicht deaktiviert ( 1.4.4 Textgröße ändern )

    Tun Sie dies nicht : <meta name="viewport" content="… maximum-scale=1.0, user-scalable=no" />

  • Der Skip-Link ist verfügbar und sichtbar, wenn er fokussiert ist ( 2.4.1 Blöcke umgehen ).

    Bietet schnellen Zugriff auf Seiteninhalte und überspringt wiederholte Inhalte wie die header oder nav .

  • Gegebenenfalls verfügbare Orientierungselemente ( 4.1.2 Name, Rolle, Wert )

    Verwenden Sie header für Header-Inhalte, nav für die Navigation, main für primäre Inhalte usw. Hilft beim Erstellen eines schnellen Navigationszugriffs.

  • Linearer Inhaltsfluss; keine anderen tabindex Attributwerte als 0 oder -1 und kein autofocus - Attribut ( 2.4.3 Focus Order )

    Werden ihre positiven tabindex Werte verwendet? Was ist mit autofocus ? Diese entziehen dem Benutzer Strom.

  • JavaScript-Ereignisse sind nicht auf keydown() angewiesen ( 2.5.2 Pointer Cancellation )

    Verwenden Sie keyup() , um Benutzern das „Abbrechen“ des Ereignisses zu ermöglichen, indem sie wegwischen/mit der Maus von der Steuerung wegwischen.

Überschriften

  • Überschriften für Überschriften, der Reihe nach ( 2.4.6 Überschriften oder Labels )

    Verwenden Sie Überschriften nicht nur zur reinen Gestaltung, sondern für eine logisch geordnete Gliederung/Inhaltsstruktur.

Listen

  • Listen für Listen, ol , ul und dl werden entsprechend verwendet (1.3.1 Info und Beziehungen )

    Gibt es einen Abschnitt mit verwandten Inhaltselementen, die in a Raster oder gleichgeordneten Elementen angezeigt werden?

  • ul , ol Elemente mit list-style: none beinhaltet das role="list" Attribut (1.3.1 Info und Beziehungen )

    Hilft bei der korrekten Übermittlung der Listensemantik für VoiceOver/Safari.

Kontrollen

  • a für Links (1.3.1 Info und Beziehungen )

    Verwenden Sie Links für die Navigation; Laden einer neuen Seite oder Verschieben des Tastaturfokus von einem Element zum anderen.

  • button für Schaltflächen (1.3.1 Info und Beziehungen )

    Verwenden Sie Schaltflächen, um Daten zu übermitteln oder eine Bildschirmaktion durchzuführen, die den Tastaturfokus nicht verändert.

  • Linkzweck ist klar und verständlich ( 2.4.4 Linkzweck )

    Ist klar und verständlich, wozu der Link dient oder wo der Benutzer landet, wenn er den Link von seinem zugänglichen Namen aus aktiviert?

  • Links, die in einem neuen Fenster geöffnet werden, oder externe Seiten werden durch ein Symbol und einen entsprechenden alt -Text gekennzeichnet ( 3.2.2 Bei der Eingabe )

    Hilft sowohl Bildschirmlesern als auch sehenden Nur-Tastatur-Benutzern, dass dies das Ergebnis der Aktivierung des Elements ist.

  • Wenn .visually-hidden text oder ein aria-label Attribut angewendet wird, stellen Sie sicher, dass der sichtbare Text der erste Teil des versteckten Labels ist ( 2.5.3 Label im Namen )

    Wenn nicht, werden Benutzer von Sprachdiktaten Schwierigkeiten haben, die Namen von Steuerelementen auf dem Bildschirm auszurufen.

  • Wenn mehrere Elemente auf dem Bildschirm dieselbe Aktion ausführen, stellen Sie sicher, dass sie denselben Namen haben ( 3.2.4 Konsistente Identifizierung )

    Beispielsweise können Karten mit mehreren Links (Bild, Titel und „Weiterlesen“) zum selben Ziel führen, aber unterschiedliche Namen haben – am besten gruppieren Sie sie zu einem fokussierbaren Aktionselement.

Tische

  • table für tabellarische Daten (1.3.1 Info und Beziehungen )

    Sieht dieser Inhalt wie eine Tabelle aus? table verwenden.

  • th für Header (mit entsprechenden scope -Attributen) ( 4.1.1 Parsing )

    scope="col" für Spaltenüberschriften, scope="row" für Zeilenüberschriften.

Formen

  • Alle Formularfelder haben eine label ( 3.2.2 Bei der Eingabe )

    Entweder über aria-label , .visuallyhidden element, Floating Label oder Visible Label (empfohlen).

  • fieldset mit ggf. verwendeter legend (1.3.1 Info und Beziehungen )

    Bietet das label genug Kontext, damit es für sich genommen Sinn ergibt?

  • Felder verwenden das autocomplete Attribut ( 1.3.5 Identifizieren des Eingabezwecks )

    Helfen Sie Benutzern beim Ausfüllen von Formularfeldern, indem Sie in ihrem Browser gespeicherte Daten verwenden.

  • Fehleranzeige in Linkliste über dem form ( 3.3.1 Fehleridentifikation )

    Verschieben Sie bei großen Formularen mit vielen inputs den Fokus auf die Überschrift der Fehlerliste und verlinken Sie jede input in einem Fehlerzustand.

  • Fehlertext im label enthalten oder über aria-describedby ( 3.3.1 Fehleridentifikation )

    Das Umbrechen des input und Fehlertexts innerhalb des label hilft dabei, ein großes Klick-/Touch-Ziel bereitzustellen und den Fehler im focus .

  • Der Fehlerzustand wird nicht allein durch Farbe visuell kommuniziert ( 1.4.1 Verwendung von Farbe )

    Benutzer mit Farbenblindheit sehen den Fehlerstatus möglicherweise nicht, wenn die Farbe der einzige Indikator ist.

  • Aktualisieren Sie den title mit dem Wort "Error" (1.3.1 Info und Beziehungen )

    Der title ist oft der erste angekündigte Inhalt; das hilft im aktuellen Kontext.

  • Die Übermittlung von Rechts- oder Finanzdaten muss eine Überprüfung beinhalten ( 3.3.4 Fehlervermeidung (Recht, Finanzen, Daten) )

    Die Leute müssen in der Lage sein, eine abschließende Bewertung abzugeben, bevor sie Daten einreichen. Speziell für rechtliche oder finanzielle (sensible) Daten. Beispiel: Bestellübersichtsseite von Checkout.

  • Benachrichtigungen, Fehlermeldungen, Erfolgsmeldungen, Toasts etc. werden laut angesagt ( 4.1.3 Statusmeldungen )

    Kritische Informationen müssen von Screenreadern über aria-live oder einen gleichwertigen role angekündigt werden, andernfalls könnten Personen, die den Bildschirm nicht sehen können, diese Informationen verpassen.

Validierung

Medien

  • Medien werden nicht automatisch abgespielt ( 1.4.2 Audiosteuerung )

    Kann ablenkend, störend oder unerwartet sein.

  • Steuerelemente sind entsprechend gekennzeichnet (1.3.1 Info und Beziehungen )

    Überprüfen Sie, ob der Status "Umschalten" für Schaltflächen und die input für Schieberegler sichergestellt ist.

  • Medien können auf Space angehalten werden ( 2.1.1 Keyboard )

    Ermöglichen Sie eine globale Pausenfunktion für alle zugehörigen Videosteuerelemente oder Inhaltscontainer.

Video

  • Untertitel sind verfügbar ( 1.2.2 Untertitel )

    Wenn jemand das Video nicht hören kann, kann er trotzdem das bekommen, was er braucht?

  • Audiodeskriptionen sind verfügbar ( 1.2.5 Audiodeskription )

    Wenn jemand das Video nicht sehen kann, kann er trotzdem das bekommen, was er braucht, um den Inhalt zu verstehen?

Audio

  • Transkript ist verfügbar ( 1.1.1 Nicht-Text-Inhalt )

    Wenn jemand den Ton nicht hören kann, stellen Sie eine vollständige Transkriptionsalternative bereit.

  • Die automatische Audiowiedergabe kann angehalten werden ( 1.4.2 Audiosteuerung )

    Erlauben Sie dem Benutzer, die automatische Wiedergabe von Audio anzuhalten.

Aussehen

  • Windows High Contrast auf dem Desktop, Farbinversion auf Mobilgeräten ( 1.4.1 Verwendung von Farbe )

    Suchen Sie nach Symbolen, Rahmen, Links, Formularfeldern und Text; sind die Inhalte noch sichtbar? Können Sie Elemente von ihrem Hintergrund unterscheiden?

  • Erhöhen Sie die Textgröße auf dem Desktop auf 200% ( 1.4.4 Textgröße ändern )

    Verursacht eine Vergrößerung des Textzooms eine Inhaltsüberlappung? Ist der Inhalt noch lesbar?

  • Erhöhen Sie den Textabstand auf dem Desktop ( 1.4.12: Textabstand )

    Verursacht eine Erhöhung des Textabstands eine Überlappung von Inhalten? Ist der Inhalt noch lesbar? ( Lesezeichen )

  • Nähe ( 1.3.3 Sensorische Eigenschaften )

    Verwenden Sie den Straw-Test, um sicherzustellen, dass Personen, die auf Bildschirmzoom-Software angewiesen sind, alle Inhalte dennoch problemlos entdecken können.

  • Farbe ist nicht der einzige Indikator, der verwendet wird, um Informationen zu vermitteln ( 1.4.1 Verwendung von Farbe )

    Wenn alles in Graustufen wäre, könnten Sie immer noch sehen, wo sich Links zwischen Textinhalten befinden?

  • Zu helle Farben ( 1.4.1 Verwendung von Farbe )

    Menschen im autistischen Spektrum haben möglicherweise Schwierigkeiten mit hellen Farben.

  • Das Layout ist einfach und konsistent ( 1.4.10 Reflow )

    Ein übermäßig komplexes Layout kann verwirrend sein, wenn es verwendet und befolgt werden soll

Animation

Farbkontrast

  • Normalgroßer Text und Symbole ( 1.4.3 Kontrast )

    AA erfordert ein Kontrastverhältnis von 4.5:1 .

  • Großer Text und große Symbole ( 1.4.3 Kontrast )

    AA erfordert ein Kontrastverhältnis von 3.0:1 .

  • Symbole ( 1.4.11 Nicht-Text-Kontrast )

    AA erfordert ein Kontrastverhältnis von 3.0:1 .

  • Rahmen von Eingabeelementen (Texteingabe, Optionsfelder, Kontrollkästchen…) ( 1.4.11 Nicht-Text-Kontrast )

    AA erfordert ein Kontrastverhältnis von 3.0:1 .

  • Eingebetteter oder überlappender Text auf Bildern/Videos ( 1.4.3 Kontrast )

    Ist Text in allen Bildern und Videoszenen/Frames noch lesbar?

  • Benutzerdefinierte ::selection ( 1.4.3 Kontrast )

    Die Textauswahl kann versehentlich erfolgen. Kann man es noch lesen?

Weitere Einzelheiten finden Sie unter Farbkontrast .

Inhalt

  • In einfacher Sprache verfasst und verwendet keine Redewendungen ( 3.1.2 Sprache der Teile )

    Empfohlen, um Inhalte auf einem Leseniveau der 8. Klasse zu schreiben

  • Der Inhalt der button , a und label - Elemente ist eindeutig und aussagekräftig (1.3.1 Info und Beziehungen ).

    "Klicken Sie hier" und "Weiterlesen" sind einfach nicht hilfreich, insbesondere wenn Sie nur über Schaltflächen oder Links navigieren.

  • Text wird für von links nach rechts ausgerichtete Bereiche linksbündig und für von rechts nach links ausgerichtete Bereiche rechtsbündig ausgerichtet ( 1.4.12 Textabstand )

    Zentrierter oder Blocksatz kann für Menschen mit Legasthenie schwierig zu lesen sein

  • Es werden mindestens zwei Methoden zum Navigieren und Auffinden von Inhalten zur Verfügung gestellt ( 2.4.5 Mehrere Wege ).

    Beispiele beinhalten; primäre/sekundäre/tertiäre Navigation, Suchmechanismus, Sitemap, Breadcrumb, etc.

Mobil/Touch

  • Beliebige Ausrichtung möglich ( 1.3.4 Ausrichtung )

    Lässt die Website auf einem Handheld-Gerät nur die Ausrichtung im Hochformat zu?

  • Kein horizontales Scrollen ( 1.4.10 Reflow )

    Von jemandem zu verlangen, dass er horizontal scrollt, kann für manche schwierig und für alle irritierend sein.

  • Steuerelemente und Verknüpfungssymbole können einfach aktiviert werden ( 2.5.5 Zielgröße )

    Nicht für alle anklickbaren Elemente erforderlich, aber gut, um sicherzustellen, dass Dinge wie Hamburger-Menüsteuerelemente, soziale Symbole, Galerie-Viewer und andere Touch-Steuerelemente verwendbar sind.

  • Ausreichender Abstand zwischen anklickbaren Elementen, um einen Bildlaufbereich bereitzustellen ( 2.4.1 Blöcke umgehen )

    Manchen Menschen, die unter Handzittern leiden, fällt es sehr schwer, an anklickbaren Elementen mit Nullabständen vorbeizuscrollen.

  • Jede gestenbasierte Funktionalität hat eine optionale Methode, die keine Geste erfordert ( 2.5.1 Zeigergesten ).

    Für einige Leute kann es schwierig oder schmerzhaft sein, Gesten wie Streichen oder Mehrfingereingabe zu verwenden. Stellen Sie sicher, dass Sie eine Alternative bereitstellen, z. B. eine einzelne button , die dieselbe Funktion erfüllt.

Dynamische Komponenten

  • Dynamische Komponenten wie Karussells , vorausschauende Suche , modale Fenster , Registerkarten usw. sind entsprechend gekennzeichnet, stellen den entsprechenden Kontext bereit und enthalten die erwartete Tastaturfunktionalität

    Weitere Einzelheiten finden Sie im WAI-ARIA Authoring Practices- Leitfaden.

  • Alle Inhalte, die beim Schweben oder Fokus erscheinen, müssen verwerfbar, schwebefähig und dauerhaft sein ( 1.4.13 Inhalte beim Schweben oder Fokus ).

    Denken Sie an Tooltips oder alles, was beim Hover erscheint; kann man es per Esc ? Bleibt es für Zoom-Benutzer bestehen, mit der Maus herumzufahren und den Inhalt zu lesen?

  • Session-Timeout-Warnungen ( 2.2.1 Timing einstellbar ))

    Gibt es eine Zeitüberschreitung für die aktuelle Aktivität? Lassen Sie die Leute dies rechtzeitig wissen, und zwar mit deutlicher Ankündigung, bevor der Timer abläuft. (Es ist am besten, überhaupt keine Auszeit zu haben.)

Hilfstechnologien und Testwerkzeuge

Im Folgenden finden Sie verschiedene Hilfstechnologien, mit denen Sie während eines Audits testen können.

Klaviatur

Die Tastatur ist die grundlegendste Hilfstechnologie. Verwenden Sie die Tabulatortaste , um zwischen fokussierbaren Elementen zu wechseln.

Achten Sie auf:

  • Fokusanzeige – wissen Sie, wo sich der Cursor gerade befindet?
  • Fokusreihenfolge – sind die Elemente von oben nach unten und von links nach rechts angeordnet?

Weitere Einzelheiten finden Sie im Beitrag zu Best Practices für die Barrierefreiheit der Tastatur .

Screenreader

Verwenden Sie während der Bewertung die neuesten Versionen von Betriebssystemen, Browsern und Bildschirmleseprogrammen.

Schreibtisch

  • JAWS mit Internet Explorer/Edge unter Windows
  • ​NVDA mit Firefox unter Windows
  • ​VoiceOver mit Safari auf macOS

Handy, Mobiltelefon

Automatisiertes Testen

Führen Sie als letzten Ausweg automatisierte Tools zum Testen der Barrierefreiheit aus, um Dinge zu erkennen, die beim manuellen Testen möglicherweise übersehen wurden.

Zoomen

Reiner Text-Zoom

Es gibt einige Chrome-Browsererweiterungen, die Sie verwenden könnten, um den Nur-Text-Zoom zu testen, aber es wird empfohlen, die integrierte Text- Zoom-Funktion mit Firefox zu verwenden. So erreichen Sie dies:

  1. Laden Sie die betreffende Website mit Firefox
  2. Stellen Sie sicher, dass der Textzoom aktiviert ist, indem Sie auf „Ansicht“ gehen, „Zoom“ auswählen und „Nur Text zoomen“ auswählen.
  3. Passen Sie die Textgröße mit den Tasten Cmd / Strg und + auf 200% an und sehen Sie sich den Seiteninhalt an

Weitere Informationen finden Sie im Text-Zoom- Beitrag.

Strohtest

Verwenden Sie den Straw-Test , um eine stark gezoomte Benutzeroberfläche zu simulieren, um Probleme mit der Nähe aufzudecken.

Sprachaktivierung

Es gibt zwei primäre/beliebte Methoden zum Testen mit Sprachdiktiersoftware:

Automatisierte Testwerkzeuge

Führen Sie jeden der folgenden Schritte aus, um ein solides Testergebnis sicherzustellen, da jedes Tool seine eigenen Testmethoden hat – die Ergebnisse können variieren.