Web Accessibility Checkliste

Diese Liste ist eine freie Übersetzung der Web Accessibility Checklist von Aaron Cannon. Anmerkungen, Diskussion und weitere Links bitte als Kommentar in diesem Beitrag oder via Mail.

Markup

Äussere Erscheinung und Inhalte

  • Ihre Seite sollte auch mit deaktivierten Bildern nutzbar sein (das schließt ein das noch genügend Kontrast vorhanden ist wenn ein Hintergrundbild genutzt wird und selbiges entfernt wurde).
  • Stellen Sie sicher das Ihre Seite nutzbar bleibt wenn der Text auf das doppelte seiner originalen Größe vergrößert wird.
  • Jedes Element Ihrer Seite sollte auch mit der Tastatur erreich- und änderbar sein.
  • Nutzen Sie, wann immer es möglich ist, sinnvolle Überschriften und Linktexte die auch ohne den Kontext verstanden werden (z.B. keine “Klick hier” Links).
  • Ihre Seite sollte auch für Farbblinde und Nutzer mit eingeschränkter Sehkraft ausreichend Kontrast bieten.
  • Setzten Sie keine Inhalte ein die öfter als 3 mal in der Sekunde (auf)blinken.
  • Sorgen Sie dafür das die Fokus-Anzeige sichtbar bleibt. Wenn ein Nutzer mit der Tastatur von einem Element zum Nächsten navigiert sollte er immer wissen wo er sich befindet.
  • Der Inhalt sollte für den Nutzer auch ohne besondere Kennzeichnung durch Schriftart, Farben oder sonstige gestalterische Mittel verstehbar sein. Schreiben Sie zum Beispiel nicht "Das hervorgehobene Wort in diesem Absatz ist das Wichtigste" oder "Die rot markierten Punkte sind Fehler und sollten berichtigt werden" wenn das Wort oder der Punkt auch anders angezeigt werden könnte.

Dynamische Inhalte

  • Benutzen sie Javascript Ereignisse nicht, die den Inhalt der kompletten Seite ändern oder automatisch eine neue Seite laden.

Bilder und Multimedia

  • Stellen Sie sicher das alle Bilder über ein alt Attribut verfügen, bei Grafiken, die nur dem Layout dienen, vergeben Sie keinen Wert.
  • Halten Sie den alt Text kurz und prägnant (z.B. “Der Hauptbahnhof Berlin") aber gehen Sie ins Detail wenn es das Verständnis verbessert (z.B. Familie Meier am Gleis 15 im Hauptbahnhof Berline").
  • Stellen Sie für alle Audio und Video Inhalte mit Sprachanteilen eine Abschrift, Untertitel und/oder eine Übersetzung in Gebärdensprache zur Verfügung.
  • Stellen Sie, wenn nötig, eine Audiobeschreibung der Inhalte eines Videos die für blinde Nutzer allein durch den Ton nicht vermittelt werden (z.B. Herr A. bewegt sich durch eine Tür und nickt) zur Verfügung.
  • Alle Videos sollten zumindest zugängliche Bedienelemente haben.
  • Wenn Text vom Browser ohne Probleme gerendert werden kann vermeiden Sie die Verwendung von Bilder anstelle von Text.
  • Vermeiden Sie CAPTCHAs es sei den Sie haben keine andere Wahl und auch dann sollten Sie vermieden werden. Wenn sie unumgänglich sind stellen sie eine Audio Alternative zur Verfügung.

Formulare

  • Bezeichnen Sie alle Ihre Formularfelder mit dem <label> Element. Wenn für ein Feld keine spezielle Bezeichnung nötig ist fügen Sie trotzdem eine ein und verstecken Sie sie mit CSS oder nutzen Sie das title Attribut.
  • Nutzen Sie Feldgruppe (<fieldset>) mit Legenden (<legend>) um inhaltliche Blöcke zu bilden.
  • Geben Sie alle Eingabefehler in Text aus (gegebenfalls mit einem zusätzlichen Bild oder Icon) und platzieren Sie die Fehlermeldung direkt bei dem betroffenen Feld oder in an einer hervorstehenden Position wie dem Seitenanfang zusammen mit einem Ankerlink zu dem betroffenen Feld.
  • Wenn es nötig ist versehen Sie Ihre Formularfelder mit Anleitungen oder Hilfe-Links.
  • Erlauben Sie dem Benutzer nicht wichtige Aktionen zu beenden ohne sie zu bestätigen oder einer Möglichkeit sie rückgängig zu machen.
  • Vermeiden Sie es HTML Elemente für etwas anderes als ihre eigentliche Aufgabe zu nutzen (z.B. Formulare für die Navigation, Links zum Absenden eines Formulars, etc.)

Testen