Accessibility Developer Guide: Neue Referenz für barrierefreie Websites

Philipp Zeder
Autor:

Philipp Zeder

Kategorie:

in

Entwicklung & Performance

Veröffentlicht am 22. Juni 2018

Aktualisiert am 7. Juni 2022

Am 19. Juni 2018 hat die Stiftung «Zugang für alle» in Zürich den brandneuen Accessibility Developer Guide (ADG) präsentiert. Der Guide, welcher in Zusammenarbeit mit den Agenturen Hinderling Volkart, Liip, Unic und Zeix entwickelt wurde, bietet eine umfassenden Einstieg in die Entwicklung von barrierefreien Websites. Das Projekt steht unter der Open-Source-Lizenz MIT und wartet mit unzähligen Beispielen auf, die sich in realen Anwendungsfällen einsetzen lassen.

Accessibility Developer Guide (ADG)

Was ist der Accessibility Developer Guide?

Die Idee für den ADG ist bereits vor einigen Jahren entstanden. Joshua Muheim, Initiator des Guides und Entwickler bei der Stiftung «Zugang für alle», sah sich mit einem Problem konfrontiert: Als frisch angestellter Full-Stack-Entwickler hatte er die Aufgabe, barrierefreie Website-Elemente zu entwickeln. Im Netz fand er zwar Dokumentationen und Richtlinien, einen Guide, der ihm bei der Entwicklung der Elemente das Leben leichter gemacht hätte, gab es damals jedoch nicht. Damit war die Idee für den Accessibility Developer Guide geboren. Und dieser hat jetzt, einige Jahre später, das Licht der Welt erblickt.

Den Web-Entwicklern fehlte bisher eine gute, praxisnahe Referenz zu Accessibility. Es braucht nicht mehr Regeln, sondern mehr Anleitung, damit das Web bedienbar für alle wird. Der Developer Guide wird einen Zugang schaffen, wo bisher kaum einer war, mit praxisnahen Beispielen, von Experten geprüft und Entwicklern mitgetragen.

Severin Klaus, Leiter FrontendHinderling Volkart

In Zusammenarbeit mit Mitarbeitern der Stiftung und den Agenturen ist ein Guide entstanden, mit dem sich interessierte Entwickler mit der Materie Barrierefreiheit intensiv auseinandersetzen können. Der Guide ist in die folgenden vier Abschnitte eingeteilt:

Einführung

Im Abschnitt «Einführung» wird erklärt, welchen Zweck der Guide verfolgt, wie er sich nutzen lässt und wer an der Entwicklung beteiligt ist.

Setup

Wer seriös barrierefreie Websites entwickeln will, muss sicherstellen, dass das Resultat mit Eingabe- und Ausgabegeräten wie Screen-Readern, Braille-Displays, Voice-Steuerungen, Keyboards und vielen mehr funktioniert. Praktischerweise muss man die entsprechenden Geräte nicht selbst besitzen sondern kann sie dank Tools auch simulieren. Der Abschnitt «Setup» erklärt ausführlich, wie die passenden Tools installiert und konfiguriert werden.

Wissen

Bevor es mit den Beispielen in den praktischen Teil der Entwicklung von barrierefreien Websites geht, sollte man sich zuerst einen Grundstock an theoretischem Wissen zum Thema anlegen. Der Abschnitt «Wissen» ist dafür die perfekte Quelle und behandelt die Bereiche HTML und die Wichtigkeit von Semantik sowie Accessible Rich Internet Applications (ARIA). Ausserdem beinhaltet der Abschnitt weitreichendes Wissen zur ausschliesslich tastaturbasierten Nutzung von Websites und der Interaktion mithilfe von Desktop-Screen-Readern.

Beispiele

Der letze Abschnitt des Guides ist ganz den Beispielen gewidmet. Die Autoren haben bei den Beispielen besonderes Augenmerk auf die Einsetzbarkeit in realen Szenarien gelegt. So können die Code-Schnipsel direkt zu Codepen exportiert werden, wo sich mit den Beispielen direkt im Browser experimentieren lässt. Ausserdem sind alle Beispiele gründlich von Test-Experten und mit den zurzeit relevanten Hilfsgeräten auf Herz und Nieren geprüft. Zusätzlich sind die Beispiele auch mit künftig relevanten Hilfsgeräten getestet und so auch in einigen Jahren noch sinnvoll einsetzbar.

Mitmachen und auf dem Laufenden bleiben

Mit dem Launch-Event ist der ADG in die Freiheit entlassen worden. Im Guide steckt eine Menge Erfahrung, die sich alle Beteiligten über viele Jahre erarbeitet haben. Auf Github können Sie sich aktiv an der Weiterentwicklung des Projekts beteiligen. Und auch auf den sozialen Medien ist die Accessibility Alliance aktiv. Folgen Sie der Allianz auf Twitter und Facebook.

Übrigens: An der Frontend Conference 2018 hält Joshua Muheim einen Workshop zum Thema «Accessible autocomplete widgets that work for all». Mit dem Gutschein-Code ADG50FEC18 erhalten Sie 50% Rabatt auf die Kurskosten.

Beteilige dich an der Diskussion

3 Kommentare

Susanne
Susanne 5. Juli 2018 18:18

Das Firefox-Entwicklertool muss man wie folgt aktivieren:
auf einer beliebigen Website rechte Maustaste, Element untersuchen (es öffnet sich unten die Inspector-Konsole).
Ganz rechts bei den 3 Punkten klicken und “Einstellungen” auswählen, dann links bei den Standard-Entwicklerwerkzeugen ganz unten “Barrierefreiheit” anhaken, nun erscheint oben ein neuer Menupunkt “Barrierefreiheit” und beim ersten Mal erscheint noch ein Dialog zum Aktivieren des Tools.
Bei mir klappte das so. :-)

Fennec
Fennec 24. Juni 2018 14:30

Und passend dazu gibt es im Firefox 61 den Accessibility Inspector in den Entwicklertools:
https://www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/

(Firefox 61 wird am Dienstag, 26. Juni veröffentlicht.)

Philipp Zeder
Philipp Zeder cyon
26. Juni 2018 15:18

Herzlichen Dank für den Link ?