[…] Let’s make accessibility a priority.
Die Konzeption umfasst alle Schritte von der Erstellung von Webseiten oder anderen Anwendungen bis zu ihrer Fertigstellung.
In der Konzeptionsphase werden die Weichen für barrierefreies Design gestellt. Etwa durch Fragen wie: Welches CMS kommt zum Einsatz? Wie gut unterstützt es Barrierefreiheit für Entwickler und Redakteure?
Welche Techniken werden eingesetzt? Eine JavaScript-freie Seite muss nicht sein. Es ist dennoch ratsam, zu überlegen, ob und welche Widgets sinnvoll sind und welche Frameworks eingesetzt werden. Der Austausch mit den Entwicklern kann an dieser Stelle hilfreich sein. Diese sollten einschätzen können, wie aufwändig Anpassungen hinsichtlich Barrierefreiheit sind. Es muss auch das Level der Konformität festgelegt werden, dies ist standardmäßig WCAG 2.1, AA.
Weitere Fragen können sein, welche externen Quellen einbezogen werden. Sind die Module von Drittanbietern barrierefrei? Für welche Endgeräte soll der Auftritt optimiert werden?
Auch die mobilen Ansichten müssen barrierefrei sein.
Und nicht zuletzt sind Usability-Aspekte wie eine konsistente Navigation und ein einfach und nachvollziehbarer Aufbau des Auftritts auch Anforderungen der Barrierefreiheit. Dabei ist eine gute Idee, auch gleich schon die Landmarks der Website zu planen und zu benennen, sowie sich eine gute Überschriften- und Text-Struktur zu überlegen.
Es stellt sich aber auch die Frage nach der Zielgruppe. Je nachdem, welche Menschen erreicht werden sollen, sollten auch die Bemühungen im Bereich Barrierefreiheit danach ausgerichtet werden. Jedoch helfen die meisten Maßnahmen tatsächlich allen Nutzern.
Auch wenn alle Beteiligten zur Umsetzung von Barrierefreiheit beitragen, sollte jemand im Team den Hut aufhaben und explizit für das Thema verantwortlich sein. Dies kann der Projekt Manager sein. Zu seinen Aufgaben gehört es dann, im ersten Schritt Bewusstsein im Team zu schaffen. Außerdem sollte er die Guidelines kennen und verstehen, damit er die Anforderungen den einzelnen Teammitgliedern in jeder Projektphase zuordnen kann. Droht die Barrierefreiheit über einen längeren Entwicklungsprozess auf der Strecke zu bleiben, sollte er sie stetig einfordern. Er sollte auch erkennen, ob und wann es sinnvoll ist, externe Experten einzubinden.
(Quelle: Barrierefreiheit in den Workflow einbinden)
Vorteile einer barrierefreien Website für das Unternehmen
Dieser Artikel ist Teil des Digital Guides für die Kunden von 1&1. Der Artikel erklärt die Gründe, warum man eine barrierefreie Website einrichten sollte, wie man Hindernisse abbaut, und gibt Tipps zu den verschiedenen Bereichen.
Barrierefreie Website: Erreichen Sie mehr Menschen im Netz
Video: Mythen über Barrierefreiheit (en)
Das Video von Barclays beschreibt 5 weit verbreitete Mythen über Barrierefreiheit, was daran falsch ist, und wie ihnen begegnet werden kann (3:30 min.)
Informationsarchitektur
Inhalte sollten so organisiert und verbunden sein, dass sie von Menschen mit kognitiven Störungen leichter verarbeitet werden können. Es sollte möglich sein, eine Vorstellung darüber zu gewinnen, wie eine bestimmte Information zu finden ist, und die Logik der Website zu verstehen. Einen Button immer an der gleichen Stelle zu haben, führt dazu, dass der Nutzer automatisch lernt, was getan werden muss, um die gewünschte Aktion auszuführen. Dieser Lernprozess wird verlängert, wenn eine Website inkonsistent gestaltet ist oder viele störende Elemente enthält. Kontextualisierung ist auch eine wichtige Aufgabe, Inhalte oder Informationen sollte nicht für sich alleine stehen, sondern in einen großen Zusammenhang eingeordnet werden. Komplexe Informationen sollten auf mehrere Unterseiten verteilt werden, genauso wie umfangreiche Formulare: es muss erkennbar sein welcher Schritt gerade bearbeitet wird, wie viel schon bearbeitet wurde, und welche Bereiche noch auszufüllen sind. Ebenfalls wichtig ist, im konkreten Zusammenhang unwichtige Informationen wegzulassen, also zu fragen: was können wir weglassen? Eine gute mit den Tab-Tasten bedienbare Navigation und mehrere Wege, durch die Website zu navigieren sind auch hilfreich, genauso wie Bereiche überspringen zu können.
Wie man Inhalt für das Web zugänglich macht.
Schon bei der Planung eines Projekts sollten wichtige Punkte, die den späteren Inhalt betreffen, beschrieben werden, um es den Designern, Entwicklern und Content-Erstellern leichter zu machen, die Website zugänglich zu machen. Diese müssen die Richtlinien verstehen und vor allem auch verstehen, wie die Inhalte auf der Website implementiert werden müssen, damit die Richtlinien erfüllt werden und die Website barrierefrei ist. Barrierefreiheit liegt in der Verantwortung aller Beteiligter.
Themen, die bedacht und definiert werden müssen:
Multimedia Content barrierefrei machen
Captions + Audio Descriptions
Alle Videos müssen Captions haben (für AA, um AAA zu erreichen, muss auch Zeichensprache-Übersetzung vorhanden sein), zusätzlich muss aber auch eine Audio-Deskription vorhanden sein (einen zusätzlich Tonspur, in der erklärt wird was im Video passiert, um blinde und eingeschränkt Sehende zu unterstützen).
Steuerung
Auch Steuerungselemente werden benötigt, sogar bei Hintergrund-Videos. Um Konformität für das unterste Level A zu erreichen, müssen alle Auto-play Videos Play und Pause/Stop Buttons haben. Steuerungselemente sind auch bei Animationen (z. B. sich bewegende Bilder beim Scrollen oder Hovern) wichtig, für das AAA Level muss es die Möglichkeit geben, die Animationen abzuschalten. Es sollte auf jeden Fall dafür gesorgt werden, dass die Animation für Nutzer, die ihren Browser entsprechend eingestellt haben, gestoppt wird (Stichwort: prefers-reduced-motion).
Aufblitzen/Flackern
Auch das Aufblitzen von Lichtern sollte man beachten, denn sie können physische Reaktionen bei Nutzern hervorrufen (z. B. Kopfschmerzen, Schwindel). Das bedeutet: Elemente dürfen nicht häufiger als 3 mal in der Sekunde aufblitzen.
Bilder barrierefrei machen
Grundregel: Bilder sollten keinen Text auf dem Bild beinhalten (für AAA müssen alle Bilder mit Text als dekorativ gekennzeichnet werden).
Es gibt drei Arten von Bildern aus barrierefreier Sicht:
1) Dekorative Bilder
Ein dekoratives Bild fügt der Seite keine zusätzliche Info hinzu, es wird mit einem leeren alt-Attribut gekennzeichnet (alt=""), somit wird es von assistiven Technologien wie Screenreadern ignoriert. Dekorative Bilder sind lauf W3C:
- Teil des Seitendesigns, wie z. B. ein Trenner-Bild
- ein dekorativer Teil eines Text-Links, z. B. Twitter-Logo und Text "Twitter"
- Haben daneben stehende Text-Alternativen, z. B. eine Bildunterschrift, die erklärt, was auf dem Bild zu sehen ist
- Werden als Blickfang benutzt, wie z. B. ein Foto, das die Seite schöner macht, aber keine Infomationen hinzufügt
2) Informative Bilder
Informative Bilder sollten im alt-Attribut die Bedeutung oder den Inhalt des Bildes vermitteln, keine wörtliche Beschreibung, was auf dem Bild zu sehen ist.
Laut W3C sind Bilder informativ, wenn sie
- andere Information kennzeichnen, z. B. das Bild eines Telefons neben einer Telefonnummer
- benutzt werden, um andere Info zu ergänzen
- benutzt werden um kurze und prägnante Infos zu vermitteln, wie z. B. ein Bild, das die Richtung anzeigt, in die ein Verschluss aufgeschraubt werden muss
- einen Eindruck oder eine Emotion vermitteln
- ein Datei-Format ausdrücken, z. B. ein pdf Icon neben einem Link zu einem pdf download link
3) Funktionale Bilder
Laut W3C sind Bilder funktional wenn sie:
- als ein Link benutzt werden, z. B. wenn das Twitter Logo ohne zusätzlichen Text zu Twitter linkt
- Icons sind, die Informationen in einem Link ausdrücken, z. B. das Icon eines Fensters, das anzeigt, dass der Link zu einem neuen Fenster führt
- ein Standalon-Icon sind, das eine Funktion hat, z. B. ein Drucker-Icon, das dem User anzeigt, dass man es zum Drucken anklicken kann
- als Button benutzt werden, wie die Lupe, die anzeigt, dass man damit eine Suche initiieren kann
Alt-Text sollte bei funktionalen Bildern die Aktion, die ausgeführt werden wird, beschreiben (den Zweck des Bildes), nicht das Bild als solches beschreiben.
Icons und Symbole
Man sollte generell Icons und Symbole benutzen, die die Nutzer schon kennen, damit sie nichts neues lernen müssen, wie z. B. die Lupe für Suchen oder das Play Icon für Abspielen. Aber selbst wenn man bekannte Symbole verwendet, sollte man trotzdem einen funktionalen alt-Text oder sogar zusätzlich Text-Labels vergeben.
Schreiben von gutem alt-Text
Dies wird auf der Seite "Accessibility für die Content-Erstellung" beschrieben.
Text barrierefrei machen
Es gibt einiges, was man beim Schreiben/Formulieren von Text beachten kann, um Texte barrierefreier zu machen. Dies betrifft die Bereiche Sprache, Textgröße und Abstände, Überschriften-Struktur, Listen, Links, Farben. Mehr Informationen dazu finden sich auf den Seiten "Accessibility für Designer" und "Accessibility für die Content-Erstellung".
Zusammengefasst ist folgendes zu beachten, manche Punkte betreffen mehrere Bereiche:
- Design: Bilder, Icons, Videos (z. B. Steuerungselemente), Textgrößen, Abstand, Überschriften/Überschriften-Struktur, Listen, Links (Linkbezeichnungen), Benutzung von Farben
- Technik: Videos mit Captions und Audio Description, Steuerungselemente, Aufblitzen von Elementen, Landmarks, Überschriften-Struktur
- Content: alt Texte bei Bildern, Sprache, Textgrößen, Abstand, Überschriften/Überschriften-Struktur, Listen, Links (Linkbezeichnungen), Benutzung von Farben
Formulare
Auf der Website „Einfach für alle“ gibt es einen guten Artikel zum Thema Formulare. Der Artikel beschreibt, was ein gutes Formular ausmacht und stellt dabei die „5 K’s guter Formulare“ vor: Klar, Knapp, Klug, Kooperativ und Konsistent.