Der Plätzchen-Talk ist ein kostenloses Online-Format via Zoom, in dem wir gemeinsam mit Expert*innen zahlreiche Themen rund um digitale Barrierefreiheit besprechen. Dabei geht es nicht nur um klassische technische Anforderung. Wir wollen das Thema weiterfassen, denn wir sind überzeugt, dass Barrierefreiheit weitergeht. Zurecht wurde ich in einem Gespräch in den letzten Tagen gefragt, was einem Menschen eine barrierefreie Webseite eines Hotels nutzt, wenn das Hotel selbst auf Gäste mit Behinderungen nicht eingestellt ist.
Alle Menschen von Anfang an mitzudenken ist eine Grundhaltung. Barrierefreiheit wird nicht mit einer Maßnahme erreicht, sondern entwickelt sich über Jahre. Das Wichtigste ist aus meiner Sicht, einen ersten Schritt zu gehen.
Darum haben wir uns beim Plätzchen-Talk sehr gefreut, dass wir im Januar mit Vicky Pirker und Maria Korneeva erste Schritte zu mehr Barrierefreiheit im Bereich Farben und Buttons lernen durften. Die Kontakte zu Maria und Vicky sowie ihre Beitragsfolien findet ihr wie immer am Ende des Beitrags. Maria hat auch das sehr empfehlenswerte Buch „Barrierefreie Webentwicklung“ geschrieben, auf das ich ebenfalls gerne verlinke.
Vicky Pirker über ausreichende Kontraste
Vicky verweist auf die Microsoft Guidelines 101, nach der jeder Mensch eine Beeinträchtigung haben kann und sei sie nur temporär. Ich verlinke sie euch einmal hier: Microsoft Guidelines 101.
Vicky verweist zudem auf die WCAG. WCAG steht für Web Content Accessibility Guidelines. Das sind weltweite Kriterien für mehr Barrierefreiheit im Internet. Diese Regeln bilden auch die Basis für Gesetze zu digitaler Barrierefreiheit in Deutschland. Auf diese möchte ich hier aber nicht eingehen. Das wäre mindestens einen eigenen Blogartikel wert. Vicky legt den Fokus auf die Regel 1.4.3 AA der WCAG, nach der folgendes gilt:
Ist der Text kleiner als 24pt gilt ein Kontrastverhältnis von 4,5 zu 1.
Ist der Text größer als 24pt, gilt ein Kontrastverhältnis von 3 zu 1.
Auch die WCAG 1.4.6 AAA befasst sich mit Kontrasten. Sie besagt, dass ein Text mit Schriftgröße kleiner als 24pt ein Verhältnis von 7:1 haben muss. Ist der Text größer als 24pt, kann das Verhältnis 4,5:1 sein.
Die Buchstaben AA und AAA sind ein Hinweis auf die Anforderung der Regeln. Regeln auf dem Level A sind Basisanforderungen. AA sind mittlere Anforderung und AAA sind strenge Anforderungen. Wer in Deutschland dem Barrierefreiheitsstärkungsgesetz genügen muss, erfüllt in der Regel AA Anforderungen. Die strengen Anforderungen AAA greifen in der Regel bei kritischen Inhalten, z. B. bei Bezahlvorgängen oder auch im medizinischen Umfeld.
Die Kontrastregeln sind nicht nötig bei inaktiven User Interface Komponenten wie z. B. einem Absendebutton, der noch inaktiv ist, beispielsweise weil noch nicht dem Datenschutz zugestimmt wurde. Ebenfalls ausgenommen sind Dekoschriften, Bereiche, die für den User nicht sichtbar sind (Kommentare der Programmierer) oder Texte als Teil vom Logo.
Eine kleine Ergänzung zu den inaktiven Elementen:
Ein Absendebutton, der technisch deaktiviert ist (z. B. disabled, nicht fokussierbar, nicht per Tastatur oder Maus auslösbar), muss die Kontrastwerte nicht erfüllen.
Der Zustand „Warum ist der Button deaktiviert?“ sollte trotzdem verständlich kommuniziert werden (Text, Hinweis, ARIA).
Die Ausnahme gilt nur, wenn der Button wirklich funktional inaktiv ist – nicht nur optisch „ausgegraut“.
Ist der Button fokussierbar, anklickbar oder wird von Screenreadern als aktiv wahrgenommen, gelten die Kontrastregeln weiterhin.
Auf der Webseite des Bundesministeriums für Digitales und Staatsmodernisierung gibt es meiner Meinung nach ein schönes Beispiel für einen Button mit schlechtem Kontrastverhältnis. Der Button wird erst „sichtbar“, wenn mindestens 10 Zeichen in das Mitteilungsfeld geschrieben wurden. Das Beispiel nenne ich unter Vorbehalt, da ich keine Testerin für Webseiten bin.
Vicky stellt kurz APCA vor (Advanced Perceptual Contrast Algorithm). Das gute an APCA ist, dass er die Sehgewohnheiten von Menschen berücksichtigt. Mit APCA ist eine andere Art, Kontraste zu berechnen. Diese Art wird aktuell bei den WCAG nicht verwendet, sie ist aber im Gespräch.
In seinem Blog hat Marvin Siefke einen schönen Beitrag über APCA geschrieben: Blogbeitrag Barrierefreies Design zu APCA.
Vickys Toolempfehlungen
Vicky hat auf LinkedIN ihre Toolempfehlungen noch einmal zusammengefasst und ich gebe sie hier wieder für alle, die darauf keinen Zugriff haben:
Chrome-Erweiterungen
- Stark Accessibility Checker (Vickys absoluter Favorit!): Es zeigt sowohl WCAG- als auch APCA-Akzeptanz an und gibt dir direkt in der Erweiterung bessere Farbvorschläge. Außerdem hilft es mir, Alternativtexte, Überschriften und Sehsimulationen schnell zu überprüfen.
- ColorPicker: Vicky benutzt ihn nicht täglich, aber er ist perfekt, um verschiedene Farben auf einer Webseite zu überprüfen. Sobald du eine Farbe gewählt hast, wird der Hex-Code automatisch kopiert, und du kannst die gesamte Palette an der Seite sehen
- Web Disability Simulator: Simuliert verschiedene Behinderungen wie Sehen, Mobilität, Lesen/Schreiben und Konzentration. So kann man Empathie für Menschen mit unterschiedlichen Bedürfnissen entwickeln.
Webseiten
- Colorcontrast.app von Polypane. Du kannst zwischen WCAG und APCA wechseln. Bei den Kriterien der WCAG kannst du zwischen AA und AAA wählen. Du bekommst eine Vorschau mit normalem und großem Text sowie Symbolen. Wenn deine Farbe nicht funktioniert, bekommst du Vorschläge für verschiedene Kombinationen. Das ist Vickys bevorzugtes Werkzeug, um zugängliche Paletten aus bestehenden Firmenfarben zu erstellen – besonders weil man direkt mit RGB, HEX, HSL und HWB arbeiten kann.
- Coolors: Vickys Farberstellungstool, wenn sie eine neue, zugängliche Palette von Grund auf neu erstellen muss. Man sieht verschiedene Kombinationen an einem Ort, schaut sich visuelle Vorschauen für Branding, Typografie und Muster an. Und man erhält automatisch eine riesige Skala von hell bis dunkel bei ähnlichen Farbtemperaturen.
Maria über „Buttons, die sprechen“
Interaktive Elemente wie Buttons werden von assistiven Technologien verstanden und korrekt ausgegeben. Ein Button mit der Beschriftung „Absenden“ wird als solcher vorgelesen. Genauso ein Button mit der Beschriftung „Buchen“. Aber Buttons, die nur Symbole enthalten wie das Häuschen („Home“), drei Striche übereinander als Symbol für Menü zeigen, ein X in einem Kasten für „Schließen“ darstellen, ein Schieberegler oder ein Pfeil nach oben („Zum Anfang der Seite zurückkehren“): Diese Buttons sind für Screenreader nicht verständlich. Die Technik kann nicht wissen, was das Symbol bedeuten soll.
Ein regulärer Button enthält immer einen Text, der vorgelesen wird. Ein Icon-Button besitzt keinen Text und das Bild wird nicht automatisch interpretiert. Hier muss ein entsprechender Name vergeben werden.
Laut WCAG 4.1.2 muss stets folgendes definiert werden „Name, Rolle, Wert verfügbar“. Also beispielsweise Name=Werbung von ebay zulassen, Rolle=Schieberegler, Wert=Ja/Nein (das ist meine eigene Interpretation).
Wir sollten uns auch immer fragen, ob wir wirklich Buttons brauchen oder ob es auch anders geht.
Was ist ein guter Button-Name?
- Eindeutiger Name: „Sie erfahren in unserem Leitfaden …“ besser als „Unseren Leitfaden finden Sie hier“.
- Zugängliche Rollen sind im Namen nicht nötig. Also nicht „Link zu unserem Leitfaden“. Der Screenreader weiß, dass es ein Link ist und liest dies automatisch vor bei richtiger Auszeichnung.
- Das Wichtigste zuerst.
Gut: „Zum Formular (neuer Tab)“
Schlecht: „(Neuer Tab) Zum Formular“ - Beschreibung der Funktion: „Suchen“ statt „Lupe“
- Einheitliche Bezeichnung: „Löschen“ heißt überall „Löschen“
- Eindeutige Namen bei gleichen Links: „Vertrag ABC bearbeiten“
- Starte mit Großbuchstaben, damit Screenreader richtig vorliest. Kein Punkt am Ende, denn eine Buttonbeschriftung ist kein Satz!
- Denk daran, dass die zugänglichen Namen bei mehrsprachigen Webseiten in allen Sprachen verfügbar sind.
Mit F12 unter Windows kannst du dir den Quellcode einer Webseite ansehen. Hier gibt es im Menü den Bereich „Elements“ und hierunter kannst du dir die „Accessibility“ anschauen.
Marias Tipp für einen ersten Schritt:
Icons mit einem Link durch Buttons ersetzen, die einen sichtbaren Text anzeigen.
Kontakt und Präsentation zu/von Maria und Vicky
Homepage von Vicky Pirker: Hier erreichst du Vicky am besten oder auch über LinkedIn
Kontakt zu Maria und auch weitere Infos zu ihrem Buch findest du über Marias Homepage.
