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:
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 einalt
- 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 habenfocusable="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 überaria-hidden="true"
undrole="presentation"
, wenn sie dekorativ sind ( 4.1.2 Name, Rolle, Wert )Kann beim Navigieren mit dem Screenreader-Cursor manchmal versteckte Tabstopps erstellen.
-
svg
, dieuse
- Elemente enthalten, haben Leerzeichen zwischen densvg
unduse
- Tags ( 2.1.2 No Keyboard Trap )Derzeit ein Fehler in Safari 10, der die
Tab
Navigation verhindert. -
img
-Elemente mit einersvg
- Quelle enthalten das Attributrole="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 dashtml
- 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
odernav
. -
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 als0
oder-1
und keinautofocus
- Attribut ( 2.4.3 Focus Order )Werden ihre positiven
tabindex
Werte verwendet? Was ist mitautofocus
? 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
unddl
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 mitlist-style: none
beinhaltet dasrole="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 einaria-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 entsprechendenscope
-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. verwendeterlegend
(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 jedeinput
in einem Fehlerzustand. -
Fehlertext im
label
enthalten oder überaria-describedby
( 3.3.1 Fehleridentifikation )Das Umbrechen des
input
und Fehlertexts innerhalb deslabel
hilft dabei, ein großes Klick-/Touch-Ziel bereitzustellen und den Fehler imfocus
. -
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 gleichwertigenrole
angekündigt werden, andernfalls könnten Personen, die den Bildschirm nicht sehen können, diese Informationen verpassen.
Validierung
-
Generiertes HTML validieren ( 4.1.1 Parsing )
Stellen Sie gültiges HTML für eine konsistente Erfahrung in allen Browsern + AT sicher.
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
-
Animationen sollten subtil und nicht übermäßig auffällig sein ( 2.3.1 Drei Blitze oder unter dem Schwellenwert ).
Auffällige Animationen können irritierend sein oder möglicherweise Anfälle verursachen.
-
Hintergrundvideobilder haben einen Mechanismus zum Anhalten des Videos ( 2.2.2 Pause, Stop, Hide )
Text über Hintergrundvideo kann schwierig zu lesen sein, da das Video als Ablenkung dient.
-
Animationen gehorchen der Medienabfrage
prefers-reduced-motion
( 2.3.3 Animation aus Interaktionen )Wenn jemand die Funktion „Bewegung reduzieren“ in seinen Betriebssystemeinstellungen aktiviert, beginnt die Animation nicht.
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
undlabel
- 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
- VoiceOver mit Safari auf iOS
- TalkBack mit Chrome auf Android
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:
- Laden Sie die betreffende Website mit Firefox
- Stellen Sie sicher, dass der Textzoom aktiviert ist, indem Sie auf „Ansicht“ gehen, „Zoom“ auswählen und „Nur Text zoomen“ auswählen.
- 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.
- Leuchtturm von Google
- aXe von Deque
- Einblicke in die Barrierefreiheit von Microsoft
- WAVE von WebAIM