In den vergangenen Jahren hat die Barrierefreiheit eine zunehmend große Bedeutung erhalten, unter anderem durch das Barrierefreiheitsgesetz. Noch nie war es wichtiger, Nutzergruppen mit Beeinträchtigungen explizit zu berücksichtigen und ein für sie passendes und vor allem auch angepasstes Angebot bereitzustellen.
Auch hier im Blog berichte ich schon seit vielen Jahren regelmäßig darüber, wie ihr die Barrierefreiheit eures WordPress Blogs auf möglichst einfache Art und Weise erhöhen könnt. Denn Barrierefreiheit steht oft in Verbindung mit komplizierter Programmierarbeit, jeder Menge Mehraufwand und somit hohen Kosten.
Das alles ist Quatsch! Barrierefreiheit geht auch ganz einfach und im ganz Kleinen. Nicht jede Website, die auf Barrierefreiheit achten möchte, muss gleich einen Programmierer beschäftigen und hohe vier bis fünfstellige Summen investieren. Es geht nämlich auch im Alleingang, mit ein wenig CSS-Code. Häufig sind es die kleinen Dinge, die die großen Barrieren abbauen.
Um euch zu zeigen, wie ihr das erreichen könnt, habe ich die wichtigsten und vielleicht sogar nahezu alle Möglichkeiten für mehr Barrierefreiheit in CSS entsprechend herausgesucht und genauer beschrieben. Damit hat nun auch niemand mehr eine Ausrede dafür, dass seine Website nicht barrierefrei gestaltet wurde. Ihr werdet sehen, es ist wirklich ganz einfach.
Elemente deutlich hervorheben
Barrierefreiheit fängt dort an, wo Elemente auch immer als solche erkannt werden können. Links sollten beispielsweise unterstrichen werden und Buttons sollten auch so aussehen, als seien sie klickbare Buttons. Das meint sowohl, eine entsprechende kontraststarke Farbe zu wählen, als auch die sonstige optische Gestaltung, mit etwas mehr Tiefe, einer Umrandung oder auch passenden Hover-Effekten und Cursors.
Jedes Element sollte als das wahrgenommen werden, was es ist. Und noch wichtiger: Standards haben im Web einen logischen Grund. Dass Links normalerweise blau sind und einen Unterstrich besitzen, hat sich seit Jahrzehnten etabliert. Andersfarbige Links sind natürlich okay, sie müssen sich aber vom restlichen Content abheben und immer auch als solche erkennbar sein. Letzteres ist leider oft nicht mehr der Fall.
Schriftarten genauer anpassen
Überraschenderweise haben viele Tests gezeigt, dass die Schriftart selbst nur wenig Einfluss auf die Barrierefreiheit hat. Es gibt zwar spezielle Schriftarten, die angeblich besser lesbar sind und die ewige Diskussion, ob Sans-Serif weniger gut als Serif-Schriftarten sind, aber am Ende kommt es eher auf andere Dinge an. Etwa die Schriftgröße und den Zeilenabstand. Sinnvoll ist es zudem, keine Experimente zu wagen. Nutzt einfach einen System Font Stack und passt die System-Schriftarten in CSS weiter an, um sie lesbarer zu gestalten.
Bei Apple System Fonts hat der Code unten die bestmögliche Auswirkung im Hinblick auf mehr Barrierefreiheit (font-feature-settings). Neben diesen einfachen Anpassungen lassen sich noch Zeilenumbrüche mit »hyphens« steuern, die Zoom/Schriftgröße auf mobilen Geräten mit »text-size-adjust« festlegen und auch der Abstand von Buchstaben und Wörtern kann erhöht werden – je nach gewählter Schriftart. Auch die Buchstaben pro Zeile lassen sich dank »ch« inzwischen perfektionieren. 50 bis 70 Zeichen pro Zeile gelten als optimal lesbar.
Ach, und ganz wichtig: Fonts wie Open Dyslectic funktionieren nicht. Es gibt keine Beweise dafür, dass Legasthenie-freundliche Schriftarten einen tatsächlichen Effekt haben. Dafür gibt es viele Hinweise darauf, dass Menschen mit Legasthenie eher gewöhnliche Schriftarten bevorzugen, wenn sie können. Einen lesenswerten Artikel dazu findet ihr auf Axess Lab
.beispiel {
font-feature-settings: "ss06"on,"ss07"on;
hyphens: auto;
text-size-adjust: 100%;
letter-spacing: .01rem;
word-spacing: .1rem;
max-width: 65ch
}Fokus klar sichtbar machen
Wenn Nutzer eure Website ohne Maus bedienen, zum Beispiel mit einer Tastatur, benötigen sie sichtbare Fokuszustände. Das geht mit »:focus-visible« relativ einfach und kann optisch an die eigene Website angepasst werden. Der Befehl betrifft aber nur Tastatur, Tab-Taste und Screenreader. Wer alle Fokusstände gleichermaßen ansteuern möchte, nimmt nur »:focus«. Das sieht dann beispielhaft so aus.
input:focus {
outline: 2px solid #000;
outline-offset: 4px
}
input:focus-visible {
outline: 2px solid #000;
outline-offset: 4px
}Light und Dark Mode nutzen
Es gibt inzwischen verschiedene Methoden, um einen Light bzw. Dark Mode auf der eigenen Website zu realisieren. Noch relativ neu ist die Angabe von »light-dark« direkt in CSS. Das würde dann wie im Beispiel unten aussehen und automatisch den passenden Wert wählen. Links für den Light Mode, rechts für den Dark Mode. Je nachdem, welcher Modus gerade im System aktiviert ist.
html {
color-scheme: light dark
}
a {
color: light-dark(#000,#fff)
}Eine weitere Möglichkeit besteht darin, das CSS Media Query »prefers-color-scheme« zu verwenden. Das kann die Verwaltung und Wartbarkeit von langem CSS-Code unter Umständen deutlich verbessern, indem es Einträge, die im Light oder eben Dark Mode gelten, entsprechend zusammenfasst. Die Angaben dort überschreiben also den Standardwert und gelten nur dann, wenn der Dark Mode aktiviert wurde.
a {
color: #000
}
@media (prefers-color-scheme:dark) {
a {
color: #fff
}
}Im Hinblick auf die Barrierefreiheit hilft der Dark Mode vor allem Menschen mit Kopfschmerzen, Lichtempfindlichkeit, Anfälligkeit für Migräne, beim Arbeiten in dunkler Umgebung und vielen weiteren Situationen. Auch Menschen ohne besondere Beeinträchtigungen nutzen den Dark Mode gerne am Abend oder bei Nacht, um nicht so stark geblendet zu werden.
Bewegung reduzieren oder vermeiden
Am wichtigsten in Hinblick auf die Barrierefreiheit ist sicherlich das CSS Media Query »prefers-reduced-motion«. Einfach deshalb, weil ungewollte Bewegungen für viel Verwirrung im Bild sorgen können. Animationen sind mitunter DAS große Accessibility-Thema, denn sie können unter Umständen Epilepsie auslösen, Gleichgewichtsstörungen verursachen, Schwindel und Migräne erzeugen, Motion Sickness verursachen und noch vieles mehr.
Barrierefreiheit fängt also immer auch damit an, die Bewegung durch verspielte Animationen drastisch zu reduzieren. Im besten Fall aber so, dass Nutzer*innen nicht darauf verzichten müssen, sondern lediglich Menschen mit Beeinträchtigungen besonders berücksichtigt werden. Das geht mit einem universellen Selektor am besten, da die Befehle so auf wirklich alle Elemente korrekt angewandt werden.
@media (prefers-reduced-motion:reduce) {
* {
animation: none!important;
transition: none!important
}
}Kontrasteinstellungen beachten
Auch die Einstellungen hinsichtlich des erhöhten Kontrasts können mit einem CSS Media Query gezielt gesteuert werden. Genaugenommen ist es hier »prefers-contrast«, welches dafür sorgt, dass gezielte Anpassungen für Kontrasteinstellungen möglich werden. Wäre die Linie im Beispiel normalerweise hellgrau, könnten wir sie, wenn Nutzer die Einstellung »Mehr Kontrast« im System aktiviert haben, einfach komplett schwarz werden lassen. Damit erhöht sich der Kontrast schlagartig.
@media (prefers-contrast:more) {
.beispiel {
border-bottom: 1px solid #000
}
}Invertierte Farben berücksichtigen
In den Bedienungshilfen findet sich für gewöhnlich immer auch eine Option, um Farben im System zu invertieren. Das nutzen, trotz Dark Mode und anderen Bedienungshilfen, viele Menschen mit entsprechenden Beeinträchtigungen in der Farbwahrnehmung. Total unterschätzt und nahezu unbekannt ist diesbezüglich das Media Query »inverted-colors«.
Das liegt ganz einfach daran, dass invertierte Farben nur selten notwendig sind. Profitieren können davon jedoch Menschen mit extremer Lichtempfindlichkeit, neurologischen Einschränkungen, speziellen Sehbehinderungen und anderen Merkmalen. Das Query »inverted-colors« wird dabei in der Regel eingesetzt, um auch bei invertierten Farben bestimmte Elemente lesbar zu gestalten, die Invertierung dort also umzukehren. Denn Bilder, Logos oder Icons können invertiert unlesbar oder sogar unsichtbar werden, was sich auf diese Weise entsprechend verhindern lässt.
@media (inverted-colors:inverted) {
.beispiel {
filter: invert(1)
}
}Transparenz im Design reduzieren
In modernen CSS Styles kommt es vor, dass Elemente transparent gestaltet sind oder überlappend dargestellt werden. Das sieht schick aus, gerade bei trendigen Designs wie Apples Liquid Glass, führt aber auch dazu, dass Nutzer, die mit Transparenzeffekten weniger gut zurechtkommen, ziemlich stark benachteiligt werden.
Mit dem Media Query »prefers-reduced-transparency« sprechen wir daher diejenigen an, die Transparenzeffekte im System deaktiviert haben. Bei reduzierter Transparenz geht es oft aber auch einfach um stärkere Kontraste. Im Einsatz würde es dann so oder so ähnlich aussehen. Ihr könntet gleichzeitig aber auch kräftigere Hintergründe wählen oder noch weitere Anpassungen vornehmen.
@media (prefers-reduced-transparency) {
.beispiel {
opacity: 1;
backdrop-filter: none
}
}Muss wirklich alles umgesetzt werden?
Es gibt noch einige weitere, teilweise sehr experimentelle Optionen, wie »prefers-reduced-data«, wenn Nutzer*innen gewählt haben, dass sie weniger Daten verbrauchen möchten. Damit würden sich dann Webfonts, Hintergrundvideos oder ähnlich speicherhungrige Ressourcen unterbinden lassen. Das kann sinnvoll sein, je nach Gebiet und Zielgruppe.
Die Frage, die ich am Ende aber viel eher noch einmal aufgreifen möchte, ist die Frage, ob wirklich alles auch genau so umgesetzt werden muss. Nein, ist die logische Antwort darauf. Aber, und jetzt kommt es, bei der Barrierefreiheit geht es immer auch um die ganz kleinen Optimierungen, die für einzelne Personen dann größtmögliche Auswirkungen haben können. Es kann sein, dass eine Person eure Website gerne nutzen würde, aber nicht kann, weil eine winzige kleine Option zur Barrierefreiheit fehlt. Wäre das nicht schade?
Zudem ist der Aufwand, gerade bei CSS-Anpassungen, vergleichsweise gering. Denkt also nicht zu viel über den potenziellen Nutzen nach, sondern setzt es einfach direkt um und behaltet im Hinterkopf, dass es das schon wert war, auch wenn unter Umständen nur einem einzigen Menschen geholfen hat, der eure Website besucht. So jedenfalls denke ich inzwischen und erachte das für den einzig richtigen Weg hin zu mehr Barrierefreiheit im Internet. Denn bei Barrierefreiheit geht es nicht immer nur um große Zahlen, sondern auch um den Einzelnen.