Skip to content

Instantly share code, notes, and snippets.

@flosse
Last active August 12, 2020 16:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save flosse/908c98d6f749eee2a79dfa1dc77068c8 to your computer and use it in GitHub Desktop.
Save flosse/908c98d6f749eee2a79dfa1dc77068c8 to your computer and use it in GitHub Desktop.
Barrierefreie Websites

Barrierefreie Websites

1. Wahrnehmbarkeit

1.1 Nicht-Text-Inhalte

Section at WCAG 2.1

  • GRAFISCHE BEDIENELEMENTE haben einen Namen, der den Zweck beschreibt. (1.1.1 /WCAG 2.1)

1.2 Zeitbasierte Medien

Section at WCAG 2.1

  • Inhalte und Layout sind komplett voneinander getrennt (Layout-Parameter werden z.B. mit Hilfe von CSS-STYLESHEETS festgelegt)

1.3 Informationen, Struktur und Beziehungen

Section at WCAG 2.1

  • Informationen, Strukturen und Beziehungen sind für die Software (z. B. Browser oder Screenreader) verfügbar. Seitenelemente und Funktionalitäten werden mit Hilfe adäquater MARKUP-ELEMENTE erzeugt (z.B. für Überschriften, <P> für Absätze, <UL> für Listen).

  • Die Inhalte sind LINEARISIERBAR, also auch auf Codeebene in der logisch sinnvollen Reihenfolge angeordnet und ohne aktive Skripte verfügbar.

  • BESCHRIFTUNGEN sind auf Codeebene mit den Formularfeldern verknüpft.

1.4 Trennung von Vorder- und Hintergrund

Section at WCAG 2.1

  • Über FARBE vermittelte Informationen sind auch ohne Wahrnehmung der Farbe verfügbar (Links im Fließtext sind beispielsweise nicht nur farblich, sondern auch durch Fettung hervorgehoben). (1.4.1 / WCAG 2.1)

  • Texte, Grafiken und grafische Bedienelemente haben gemäß den in den WCAG-Richtlinien formulierten Werten ausreichende HELLIGKEITSKONTRASTE . (1.4.3 / WCAG 2.1)

  • Die Texte lassen sich um bis zu 200 PROZENT vergrößern, ohne dass dabei Inhalte oder Funktionalitäten verloren gehen (z.B. Überlagerung von Bedienelementen). (1.4.4 / WCAG 2.1)

  • TEXTABSTÄNDE lassen sich von den Nutzern einstellen, ohne dass dabei Inhalte oder Funktionalitäten verloren gehen.

  • Die Bedienbarkeit von EINGEBLENDETEN ELEMENTEN (z.B. Aufklappmenüs) ist gewährleistet.

2. Bedienbarkeit

2.1 Tastaturbedienbarkeit

Section at WCAG 2.1

  • Die Website ist ohne Maus, also ausschließlich mit der TASTATUR, bedienbar. (2.1.1 / WCAG 2.1)

  • Es gibt keine Tastaturfallen. (2.1.2 / WCAG 2.1)

  • Durch Websites implementierte TASTATUR-KURZBEFEHLE sind abschaltbar oder lassen sich umstellen. (2.1.4 / WCAG 2.1)

2.4 Zugängliche Navigation

Section at WCAG 2.1

  • SEITENBEREICHE wie z. B. Navigation, Suche oder Seiteninhalt sind gekennzeichnet (Überschriften, Skip-Links, ARIA landmarks) und lassen sich überspringen.

  • Die WEBSEITEN-TITEL sind eindeutig, bezeichnen die Seite und den Seiteninhalt.

  • Die Reihenfolge des TASTATUR-FOKUS ist schlüssig.

  • Die aktuelle POSITION DES FOKUS ist deutlich gekennzeichnet. Der Tastaturfokus ist mindestens ebenso deutlich hervorgehoben wie der Mausfokus.

  • LINKTEXT oder zumindest der LINKTITLE sind aussagekräftig und bezeichnen das Linkziel unabhängig vom Kontext. Verlinkte Dateiformate werden benannt.

  • Es gibt mindestens zwei unterschiedliche ZUGANGSWEGE zu den Inhalten (z.B. Navigationsmenü, Sitemap).

  • Überschriften und Beschriftungen sind aussagekräftig. Formularfelder sind mit BESCHRIFTUNGEN ausgestattet.

2.5 Bedienbarkeit weiterer Eingabemethoden

Section at WCAG 2.1

  • Der Name von BEDIENELEMENTEN entspricht ihrer Beschriftung.

3. Verständlichkeit

3.1 Lesbarkeit

Section at WCAG 2.1

  • Die HAUPTSPRACHE ist angegeben. Sprachwechsel sind gekennzeichnet. (3.1.1 / WCAG 2.1)

3.2 Vorhersagbarkeit

Section at WCAG 2.1

  • Bei Fokussierung eines Elements oder bei Formulareingaben kommt es nicht zu unerwarteten KONTEXTÄNDERUNGEN (z.B. automatisches Abschicken von Formularen).

  • Die NAVIGATIONSMECHANISMEN sind einheitlich (z.B. keine abweichenden Strukturen auf verschiedenen Seiten des Angebots).

  • Wiederholt im Webauftritt eingesetzte Navigationsmechanismen und Funktionen sind EINHEITLICH BEZEICHNET.

3.3 Fehlervermeidung

  • Fehlerhaft ausgefüllte Formularfelder werden markiert und der FEHLER aussagekräftig in Textform beschrieben. (3.3.1 / WCAG 2.1)

  • Es gibt Hinweise zur Behebung des Fehlers. (3.3.3 / WCAG 2.1)

  • WICHTIGE DATENEINGABEN (z.B. bei Transaktionen) können rückgängig gemacht und vor dem Abschicken überprüft und korrigiert werden. (3.3.4 / WCAG 2.1)

4. Robustheit

4.1 Kompatibilität

Section at WCAG 2.1

  • Die verwendete MARKUP-SPRACHE wird korrekt eingesetzt. (4.1.1 / WCAG 2.1)

  • Für nachgebildete Komponenten (z.B. Elemente, die nicht auf interaktiven HTML-Elementen beruhen) werden SEMANTISCHE INFORMATIONEN (Name, Rolle, Wert) bereitgestellt. Bei umfunktionierten nicht semantischen Elementen (z.B. <div>) wird die Semantik über WAI ARIA bereitgestellt. (4.1.2 / WCAG 2.1)

  • STATUSMELDUNGEN sind für assistive Technologien (z.B. Screenreader) verfügbar. (4.1.3 / WCAG 2.1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment