Grundlegende Checkliste für die Barrierefreiheit im Web für Designer

Diese Checkliste ist der Anfang für ein barrierefreies Design. Dies sind die wichtigsten Punkte einiger Konzepte. Denken Sie über das Nötigste hinaus, um Designs zu schaffen, die Menschen mit Behinderungen gefallen und die sie gut nutzen können.

Seitentitel

Ist der Seitentitel aussagekräftig?

Überschriften

Ist der Text als Überschrift gekennzeichnet?
Verstehen die Leser, welche Überschrift über welcher steht? Und ist das auch so, wenn man die Überschriften nicht sieht, sondern nur liest?

Kann man die wiederholte Navigation überspringen und zum Hauptinhalt wechseln? Es gibt zwei wichtige Techniken: HTML/ARIA-Markierungen (z. B. Kopfzeile, Navigation, Haupt-, Fußzeile) und “Navigation überspringen”-Links.
Ist die Reihenfolge, in der der Inhalt gelesen wird, logisch und intuitiv?

Verknüpfungen

Ist der Linktext eindeutig?

Farbe/Kontrast

Kann die Information auch anders als nur durch Farbe angezeigt werden? Zum Beispiel, indem man ein Formularfeld mit einer Fehlermeldung in einer anderen Farbe schreibt oder indem man die Kategorien in einem Diagramm in einer anderen Farbe schreibt.
Hat der Text einen Mindestfarbkontrast von 4,5 bis 1 (3 bis 1 für großen Text)?
Kann man Linktext von Nicht-Linktext gut unterscheiden?
Haben Nutzer, die nicht mit der Maus arbeiten, einen klaren Fokus, wenn sie die Tabulatortaste oder den Pfeil darauf drücken?
Haben alle Elemente, die für den Zugriff und das Verständnis von Inhalten wichtig sind, einen ausreichenden Farbkontrast?

Vergrößerung und responsives Design

Kann ein blinder oder sehbehinderter Nutzer den Inhalt auf jedem Gerät, auch auf dem Computer oder dem Handy, größer machen oder näher heranholen?
Ist das Design auch bei verschiedenen Vergrößerungen gut? Mach das Design einfacher und vermeide horizontales Scrollen.
Kann man die Seite mit dem Gerät so nutzen, wie man will, also hochkant oder quer?

Bilder

Enthält der Text für Bilder die gleichen Informationen wie das Bild?
Gibt der Text für interaktive Bilder das Linkziel oder den Zweck der Schaltfläche eindeutig an?
Werden komplexe Bilder oder Infografiken erklärt?
Brauchen Bilder, die nur schön sind, keinen alternativen Text?
Ist der Text in einer eigenen Box oder als Fließtext? Es gibt aber auch Ausnahmen, zum Beispiel Text in Logos oder dekorative Textbilder.

Tabellen

Wenn die Seite eine Datentabelle enthält, hat die Tabelle eine Beschriftung (Name/Titel) und sind Spalten und/oder Zeilen im Markup korrekt gekennzeichnet?
Werden komplexe Tabellen vereinfacht , um zusammengesetzte Spalten- oder Zeilenüberschriften zu minimieren oder zu eliminieren?

Formulare

Haben alle Formularfelder eine Beschriftung, die immer sichtbar ist?
Sind alle Formularetiketten ausreichend beschreibend und instruktiv? Sind alle Informationen, die der Benutzer zum Ausfüllen des Formulars benötigt, auf der Seite verfügbar?
Befinden sich alle Formularbeschriftungen und -anweisungen direkt neben ihrem Formularelement , so dass Benutzer (einschließlich Benutzer der Bildschirmvergrößerung) das Formularelement problemlos mit seiner Beschriftung und/oder Anleitung verbinden können?
Befinden sich alle Steuerelemente in unmittelbarer Nähe des Inhalts, den sie steuern? Befinden sich beispielsweise die Schaltflächen “Bearbeiten” und “Löschen” neben dem Inhalt, den sie ändern?
Bieten Fehlermeldungen genügend Informationen, damit Benutzer ihren Fehler beheben können?
Sind Formulare so geschrieben, dass sie mit Autofill verwendet werden können?

Dynamische Inhalte

Werden Benutzer auf Inhalte aufmerksam gemacht, die dynamisch auf einer Seite eingefügt werden, oder kommt der neue Inhalt direkt nach dem Element, das das Erscheinen verursacht hat, in der logischen Lesereihenfolge / Tabulatorreihenfolge der Seite?
Folgen alle nur über die Tastatur und den Touchscreen Interaktionen den erwarteten Mustern, damit die Benutzer wissen, wie sie mit allen Widgets auf der Seite interagieren können?
Gestalten Sie Erfolgs- und Misserfolgsfeedback in alle Interaktionen. Wenn Benutzer skriptgesteuerte Funktionen (Schaltflächen, Formularübermittlungen usw.) aktivieren, müssen sie durch eine Erfolgs-/Fehlermeldung, die offensichtliche Aktivierung einer Funktion (z. B. ein Video wird abgespielt, nachdem der Benutzer die “Wiedergabetaste” aktiviert hat) usw. wissen, ob die Aktion erfolgreich war oder nicht. Das Feedback muss für sehende Benutzer, Benutzer von Sprachausgaben und alle anderen Benutzerkategorien verfügbar sein.

Benutzerdefinierte Widgets

Verwendet das Design Standard-Elemente wie Links, Schaltflächen, Formularelemente und Steuerelemente? Native Widgets sind barrierefrei. Benutzerdefinierte Widgets tun das nicht.
Wenn Sie eigene Widgets haben, wurden diese mit allen Tastaturfunktionen erstellt und entsprechen den Regeln für barrierefreie Inhalte?

Touch-Geräte

Kann man die Links und Schaltflächen gut mit einem Finger aktivieren?
Kann ich benutzerdefinierte Wischaktionen oder Gesten auch anders aktivieren? Wenn Sie einen Screenreader auf einem Touch-Gerät nutzen, werden alle benutzerdefinierten Wischaktionen und Gesten überschrieben.