Accessibility Richtlinien

Checkliste Web-Accessibility

Projektbegleitende Accessibility Richtlinien für Software-Entwickelnde

Dies ist eine Checkliste für die Umsetzung wichtiger Accessibility-Richtlinien der Web Content Accessibility Guidelines (WCAG) 2.1. DieCheckliste begleitet Software-Entwickelnde durch ein Projekt, von der Planung über die Implementierung bis zum Release. Die Umsetzung dieser Richtlinien schränkt weder das Look & Feel einer Benutzungsschnittstelle ein, noch deren Funktionalität.

Accessibility Prinzipien


Bei der Umsetzung von Accessibility-Richtlinien sollten Software-Entwickler:innen die 4 Accessibility-Prinzipien berücksichtigen.

  • Wahrnehmbar: Möglichst alle Nutzenden, ob beeinträchtigt oder nicht, können sämtliche Informationen und Elemente der Nutzungsschnittstelle wahrnehmen.
  • Nutzbar: Möglichst alle Nutzenden, ob beeinträchtigt oder nicht, können sämtliche Bestandteile der Nutzungsschnittstelle, insbesondere die Navigation, verwenden.
  • Verständlich: Möglichst alle Nutzenden, ob beeinträchtigt oder nicht, verstehen sämtliche Informationen und die generelle Verwendung der Nutzungsschnittstelle.
  • Robust: Nutzeragenten wie Browser und assistierende Technologien können die Nutzungsschnittstelle und deren komplette Bestandteile, insbesondere Statusmeldungen, zuverlässig interpretieren.

Accessibility-Aspekte zu Projektstart

  • Lege die Konformitätsstufe fest, die deine Nutzungsschnittstelle erreichen soll: Grundlegende, dringend notwendige Aspekte („Muss“-Aspekte, Stufe A), empfehlenswerte Aspekte („Soll“-Aspekte, Stufe AA), wünschenswerte Aspekte („Sollte“-Aspekte, Stufe AAA). Üblicherweise verlangen rechtliche Vorgaben die Erfüllung sämtlicher Richtlinien auf den Stufen A sowie AA. Accessibility Aspekte auf Stufe A sind dabei die minimal umzusetzenden, unentbehrlichen Aspekte zur Erzeugung von Accessibility. Aspekte auf Stufe AAA stellen das Ideal in Hinblick auf Accessibility dar, sind aber kaum vollständig umsetzbar.

Accessibility Aspekte der Nutzungsschnittstelle während der Implementierung

  • Verwende native HTML-Elemente wann immer es möglich ist. Verwende beispielsweise den "button" Tag, statt einen Link durch eine Umrandung und Hervorhebung grafisch als Schaltfläche darzustellen. Falls es nicht anders möglich ist, zeichne die benutzerdefinierten Elemente per WAI-ARIA semantisch aus.
  • Strukturiere den Inhalt so, dass man die Bereiche mit relevanten Informationen schnell erkennen kann. Verwende hierfür beispielsweise Überschriften, hohe Kontraste und Abstände.
  • Verwende keine Textgrafiken.
  • Strukturiere den Inhalt so, dass man die Bereiche mit relevanten Informationen schnell erkennen kann. Verwende hierfür beispielsweise Überschriften, hohe Kontraste und Abstände.
  • Verwende Heading-Tags (h1, h2, etc.) nicht, um ein bestimmtes Aussehen zu erzeugen. Benutze diese Elemente ausschließlich semantisch, also wenn es sich tatsächlich um Überschriften handelt.
  • Wähle eine aussagekräftige Überschrift für jeden Hauptabschnitt des Inhalts; z.B. „Umsetzen von Accessibility-Richtlinien“ statt „Accessibility“.
    Behalte die Hierarchie von Überschriftsebenen ein. Verwende beispielsweise nicht Überschriftsebene 2 nach Überschriftsebene 4 und dann Überschriftsebene 1.
  • Vermittle Informationen nicht allein durch Farbe, wie beispielsweise: „Benötigte Angaben sind durch rot umrandete Eingabefelder gekennzeichnet“.
    Beschreibe jede relevante, als grafikvermittelte Information in deren Alternativtext. Verwende hierzu das „alt“ Attribut innerhalb der jeweiligen Tags. Ein Logo, das die Möglichkeit bietet, auf die Homepage zurück zu gelangen, sollte beispielsweise nicht den Alternativtext „Logo“ oder „<unternehmen> Logo“ erhalten, sondern „zur Homepage“. Dass es sich um ein Logo handelt, ist hier irrelevant.
  • Stelle Textalternativen für jeden Nicht-TextInhalt wie Bilder oder Videos zur Verfügung.
    Ermögliche die Nutzung ausschließlich per Tastatur.
  • Gestalte Navigationsmenüs als ungeordnete Listen mit Menüeinträgen, nicht als aufklappbare Schaltflächen.
  • Benenne jeden Link so, dass verständlich ist, wohin er führt und welche Aktion ausgelöst wird. Nenne Links beispielsweise nicht „Hier“ oder „Mehr„, sondern besser z.B. „Accessibility-Richtlinien finden Sie hier auf einer eigenen Webseite „Web Content Accessibility Guidelines (WCAG) 2.1““. Schreibe den relevanten Begriff an den Anfang des Links.
  • Weise jedem Formularelement ein aussagekräftiges Label zu; z.B. „Name und Vorname“ statt „Name“, wenn Vor- und Nachname gemeinsam eingetragen werden sollen.
  • Zeige Beispiele für die erwarteten Eingabeformate. Verwende dafür weder Platzhalter noch Mouseover-Effekte.
  • Verwende bei Text einen Helligkeitskontrast zwischen Vordergrund- und Hintergrundfarbe von mindestens 4,5:1, bei interaktiven Elementen, Statusmeldungen und relevanten Bestandteilen von Grafiken von mindestens 3:1, auch wenn die Farben invertiert sind.
  • Zeige jedes interaktive Element in einer Größe von mindestens 44 x 44 CSS Pixeln an.

Vor dem Release

  • Prüfe die Gültigkeit des Quellcodes. Verwende z.B. HTML-Validator.
  • Teste die Accessibility jedes Screens mit Tools. Verwende z.B. mit Accessibility Insights, Google Lighthouse, WAVE, axe.
  • Lasse die Accessibility von Fachpersonen und Personen, die auf die Verwendung assistierender Technologien angewiesen sind, testen.

Diese Checkliste umfasst bei weitem nicht alle Richtlinien der WCAG 2.1. Sie soll als Orientierung dienen, mit der Software-Entwickelnde häufige Accessibility-Probleme verhindern können.


Quellen

Die Richtlinien in vollem Umfang in der ursprünglichen Formulierung

Vorschläge für die Umsetzung der Richtlinien

Die WAI-ARIA Authoring Practices

Eine allgemeine Einführung in das Thema"Accessibility" des Mozilla Developer Networks (MDN)

Das Prinzip Successibility erfolgreich etablieren

Wir möchten mehr über Ihre individuelle Accessibility-Situation erfahren! Gemeinsam entwickeln wir einen Plan, welche Chancen durch Accessibility-Optimierungen in Ihrem Unternehmen möglich sind.

Wir verwenden Ihre Daten zur Kontaktaufnahme und Gesprächsabstimmung.

Datenschutzhinweise
Thank you! Your submission has been received!
Oops! Da ist ein Fehler passiert. Bitte versuchen Sie es doch nochmal.