𝐖𝐢𝐞 𝐦𝐚𝐧 Websites barrierefrei umsetzt
ein Beitrag von Julia Liebknecht
Vorwort
Heute kam in unserer Gruppe auf Facebook rund um den Pagebuilder Elementor das Thema Accessibilty/ Barrierefreiheit auf, auch im Hinblick auf die neue Gesetzgebung der EU. Toll zu sehen ist, dass sich so viele der Kollegen und Kolleginnen für das Thema interessieren, auch, wenn sie nicht dazu verpflichtet sind. Es wurden viele Tipps zu dem Thema gegeben, aber ich vermute, dass Einige damit im Detail etwas zu kämpfen haben. Daher von mir ein Beitrag dazu.
Am einfachsten umzusetzen ist das direkt Sichtbare.
Dazu zählen
- Farben (und Kontraste)
- Schriften (Schriftart, Schriftgröße, Schriftlänge und Veränderbarkeit)
- Verständlichkeit (was den Seitenaufbau und den Seiteninhalt betrifft)
- Nicht unmittelbar sichtbar, aber dennoch einfach zu realisieren ist das konsequente setzen von Alt-Texten.
- Für Laien dann schon nicht ganz so einfach sind HTML-Strukturen und (deren) korrekte Benennungen.
Die Gute Nachricht zuerst: Mit Elementor ist auch Letzteres für Laien kein Problem.
Sichtbares
1. Farben
Jede Website hat (ob es einem bewusst ist oder nicht) ein Farbschema. Dieses sollte
- vorab geplant werden
- zur Website/ zum Website-Thema passen
- konsistent sein (also Überschriften sollten immer dieselbe Farbe haben oder Links eine bestimmte Farbe usw.)
- und (hier kommt die Barrierefreiheit ins Spiel) Farben sollten immer gut erkennbar sein.
Extrem wichtig ist es, gute Farbkontraste zu nutzen. Jemand, der nicht gut sehen kann (oder bestimmte Farben nicht erkennen kann), wird in vielen Fällen Probleme haben, Farbunterschiede zu erkennen.
Nehmen wir mal ein erstaunlich oft vorkommendes Negativbeispiel:
Jemand hat einen weißen Hintergrund und nimmt gelb als Textfarbe. Für Links oder sogar für Fließtext. Da muss man nicht mal schlechte Augen haben, um z.B. bei einer hellen Umgebung so gut wie gar nichts mehr erkennen zu können.
Auch sehr beliebt ist es, Grautöne statt schwarz als Schriftfarbe zu nehmen. Je nachdem wie hell das grau ist, kann es auch da an Kontrast mangeln.
Generell wird das Thema Kontraste oft bei Hover-Farben vernachlässigt, also wenn jemand mit der Maus auf eine Verlinkung geht.
Nehmen wir mal an, dass die Kontraste alle gut sind. Dann kann man trotzdem noch den Fehler machen (der leider auch immer noch oft gemacht wird): Blinkendes und Flickerndes.
Das kann Text sein, eine Animation oder ein Video. Ein Epileptiker oder Migränepatient wird sich über solche unnützen Effekte garantiert freuen.
Als Migränepatientin möchte ich diese Gelegenheit nutzen um allen, die solche Effekte auf Websites implementieren, respektvoll meine (virtuellen) Stinkefinger zu zeigen.
2. Die Schriften
Es mag unnötig oder banal sein zu erwähnen, aber Schrift sollte man gut lesen können. Wer sich im Web umschaut, wird schnell merken, warum das überhaupt erwähnt werden muss.
Schriften sollten auch noch gut lesbar sein, wenn man z.B. Legasteniker ist, oder eine Form von Sehschwäche hat.
a) Fließtext sollte daher im Idealfall eine sog. Sans Serif Schrift sein. Die erkennt man daran, dass sie (wie die Worte schon sagen) Sans (= ohne) Serifen (= Reihen/ Linien) sind. Gemeint ist, dass es keine kleinen dekorativen Elemente am Anfang oder Ende der Buchstaben gibt. Arial ist z.B. eine Sans Serif Schriftart.
Übrigens sollte man einen Fließtext nie zu dick setzen. Jeder Buchstabe und jedes Wort sollte immer einfach erkennbar sein. Das bedeutet aber auch, dass der Abstand zwischen den Zeilen optimal sein sollte. Darauf gehe ich im Bereich Schriftgröße näher ein.
b) Die beste Schriftart bringt nichts, wenn die Schriftgröße nicht stimmt. Da jede Schriftfamilie unterschiedliche groß ist, muss man die optimale Größe immer je nach verwendeter Schrift festlegen.
Die zwei wichtigsten Regeln sind, dass man nicht mit Pixeln arbeiten sollte, und niemals(!) eine einzige Größe für alle Gerätegrößen festlegen sollte.
Erklärung: Pixel sind eine absolute Einheit. Das heißt, eine Überschrift, die die font-size 20px hat, hat immer genau diese Größe, nämlich 20 Pixel. Ganz gleich, was um sie herum passiert bzw. auf welcher Bildschirmgröße.
Wenn jemand in seinem Browser die Schriftgröße verändert, weil er alles ein bisschen größer sehen möchte, reagieren Texte, bei denen die Schriftgröße in Pixel (px) angegeben ist, nicht darauf.
Alternative: Man verwendet rem. Falls man nichts (an der sog. Root-Größe) ändert, entspricht ein rem 16 Pixeln. Allein dadurch dass man statt px rem verwendet, kann die Person im Beispiel den Text vergrößern, wenn sie will.
Die optimale Lösung: Noch besser als rem sind Clamps. Ich kann nur jedem empfehlen, sich in das Thema einzulesen. Hier nur ganz kurz (ohne Clamps wirklich zu erklären): Clamps kann man mit Clamp Kalkulatoren aufgrund der minimalen Größe, die man haben möchte und der maximalen Größe berechnen lassen.
Die Werte dann einfach statt der bekannten Möglichkeiten wie px oder rem eingeben (idealerweile natürlich global) und fertig. So ist der Text immer variabel und passt sich automatisch der Bildschirmgröße an. Einen Clamp Kalkulator findet Ihr zum Beispiel hier: https://clamp.font-size.app/
Die Schrifthöhe ist einfach zu vergessen, aber sie ist durchaus relevant um einen Text durchgehend lesbar zu haben. Die Schrifthöhe/ line height ist einer der seltenen Fälle wo ich die Verwendung von em empfehle.
Denn wenn man sie in diesem Fall verwendet, orientiert sie die Texthöhe an der Textgröße selbst. Wenn also durch die Clamp der Text größer wird, dann macht das auch die Texthöhe proportional. Bei Fließtext kann 1.35em ein guter Ausgangswert sein. Am besten einfach ausprobieren.
c) Jetzt, wo wir wissen wie der Text aussehen soll, muss auch über den Inhalt gesprochen werden.
Barrierefreiheit soll auch für Menschen mit geistigen Einschränkungen gelten. Daher sollte der Inhalt immer klar aufgebaut sein und möglichst einfache und verständliche Sprache verwendet werden.
In unserem Kulturkreis sollte (Fließ)Text vorzugsweise von links nach rechts gelesen werden, Zeilen sollten nicht zu lang sein. Als Orientierung kann man 60 Charaktere oder 10 Worte pro Zeile nehmen. Viel mehr sollten es idealerweise nicht sein.
„Unsichtbares“
1. Alt-Texte
Es ist so einfach und so wichtig (für Barrierefreiheit und für SEO) und dennoch wird es so oft vernachlässigt. Die Rede ist von Alt-Texten.
Wann immer man ein Bild hochlädt, gibt es in der Mediathek den Titel und den Alternativen Text. Beides ist wichtig. Der Titel ist ja klar.
Aber beim Alt-Text, dem alternativen Text, wird (wenn überhaupt) oft nur der Titel reinkopiert. Das liegt daran, weil der Sinn des Alt-Textes nicht klar ist und man nicht weiß, was man hier schreiben soll.
Ein guter Weg ist es sich vorzustellen, dass man die Augen schließt und sich eine Website vorlesen lässt. Auf einer Seite gibt es ein Bild. Nehmen wir mal an, jemand hat nichts im Alt-Text stehen. Dann sagt der Screen Reader auch nichts. Zumindest nichts über das Bild bzw. was das Bild zeigt. Oder, wenn der Titel einfach nur ins Feld reinkopiert wurde, steht hier dann z. B. „Das Team“. Und das liest der Screen Reader dann vor.
Aber was würde denn der Website Besucher sehen, wenn er die Augen aufmacht? Wie wäre es mit einem Text, der wirklich das Gezeigte beschreibt?
Beispiel: „Zu sehen sind die 24 Spieler des FC Superdupa in ihren Trikots auf dem Fußballfeld. Die Spieler sind in zwei Reihen angeordnet: Die erste Reihe kniet, die zweite Reihe steht. Alle Spieler lächeln und posieren für die Kamera.“
2. HTML-Strukturen
Ganz zu Anfang: Was sind HTML Strukturen?
HTML-Strukturen sind die grundlegenden Bausteine einer Website. Klingt abstrakt, ist aber im Grund recht simpel.
Jede Website hat eine Kopfzeile, einen Inhaltsbereich und einen Footer. Alles grundlegende Bausteine also. Überschriften sind ebenfalls Bausteine. Sie werden mit H-Tags näher differenziert.
Nun also mal im Überblick die (für uns) wichtigsten HTML Strukturen wie was man wo und wie machen muss:
a) H-Tags sind dafür da, um eine Hierarchie auf einer Seite erkennbar zu machen.
Jede Seite sollte für das semantische Verständnis nur einen H1 Tag haben. Das ist in der Regel der Titel (aber es gibt natürlich auch Ausnahmen).
Auf die H1 folgt die H2. Letztere kann es auf einer Seite mehrfach geben. Genau wie H3-Tags (um Zwischenüberschriften in Absätzen auszuzeichnen) usw. Aber bitte nur, wenn sie als weitere Unterteilung benötigt werden.
In Elementor zum Beispiel hat man beim Überschriften-Widget -> Inhalt -> HTML Tag die Möglichkeit den jeweils passenden Tag auszuwählen. Die Optionen „div“, „span“ und „p“ wird man bei Überschriften nur selten brauchen. Und wenn doch, dann gehe ich davon aus, dass die betreffende Person eh weiß, was sie tut. 
b) Landmarks
Die wichtigsten, sogenannten Landmarks einer Seite sind die Kopfzeile (header), die Navigation (navigation), der Hauptbereich (main), Fußzeile (footer). Der sog. Gesamtkörper (body) umschließt alle anderen genannten Landmarks mit ein, ist für uns hier aber nicht relevant.
Um es Screen Readern zu ermöglichen alles zu identifizieren, kann man dies beim Aufbau einer Seite von vornherein mit einbeziehen. Die folgenden Erklärungen sind für Elementor Pro:
Im Theme Builder erstellt man die Kopf- und Fußzeile. Wenn man nun jeweils das Template erstellt (ich bleibe mal als Beispiel bei der Kopfzeile, aber es ist bei Header und Footer Templates jeweils gleich), dann (beim Topbar Editor) bitte oben in der Mitte auf das Zahnrad klicken. Links tauchen dann die Kopfzeilen-Einstellungen auf. Und da sehen wir auch sofort „HTML Wert“. Hier bitte einmal „header“ auswählen.
Bitte den Header-Tag nur einmal vergeben und nicht z.B. nochmal im Container der Kopfzeile!
In der Regel hat man in der Kopfzeile die Navigation. Elementor setzt hier schon von alleine ein Nav Tag. Also können wir das (in der Regel) getrost ignorieren.
Bei Header und Footer also erledigt, geht es dann an den Hauptbereich. In dem befindet sich der jeweilige Seiteninhalt. Auch hier lautet die gute Nachricht, dass der Main-Tag bereits von Elementor gesetzt wird.
Was dann auf der Seite passiert ist wieder unsere Sache. Konkret bedeutet dass, dass man Sektionen als solche markieren sollte. Dazu einfach bei den entsprechenden Containern zu Layout -> Zusätzliche Optionen -> HTML-Tag gehen und „Section“ auswählen.
c) HTML–Attribute
Etwas das häufig übersehen oder falsch gemacht wird, ist das setzen der HTML-Attribute. Ich möchte mich hier der Einfachheit halber auf ein häufig verwendetes Attribut beschränken: Das ARIA-Label.
Was und wofür ist es?
Vereinfacht gesagt ist das ARIA-Label wie ein Verkehrsschild oder ein Ortsschild (oder sogar ein Namensschild an einer Haustür): Es sagt einem was man vor sich hat/ wo es lang geht.
Nehmen wir einen Link. Ein Link der einem sagt wo es hingeht z.B. ein Button, auf dem steht „Zurück zur Startseite“ benötigt in der Regel kein ARIA-Label.
Aber sobald das Ziel nicht eindeutig ist, kann ein ARIA-Label eine super Methode sein, zusätzliche informationen zu geben. Bleiben wir bei dem Beispiel des Buttons der zurück zur Startseite führt. Einfach nur „Startseite“ schreiben ist natürlich nichts was man formulieren sollte, in so einem Fall könnte ein ARIA-Label Sinn machen.
Und wie wird es nun in Elementor angewendet?
Wenn man in Elementor ein ARIA-Label setzen möchte, dann geht das in der Regel beim Link-Feld.
Bleiben wir beim Button-Beispiel: Neben dem Link-Feld sieht mein ein Rädchen-Symbol. Wenn man dort drauf klickt, taucht u.a. die Option „Individuelle Attribute“ auf.
Jedes individuelle Attribut benötigt einen sog. Schlüssel und einen Wert. In Elementor werden Schlüssel und Wert mit einem | getrennt.
Wenn also der Schlüssel „aria-label“ ist und der Wert „Bringt dich zurück zur Startseite“, dann würde in dem Individuelle-Attribute-Feld eingetragen:
aria-label|Bringt dich zurück zur Startseite
ARIA-Label sind eines von ganz vielen hilfreichen HTML-Attributen. Es lohnt sich definitiv, sich in das Thema einzulesen. Chrome und Mozilla haben hierzu sehr gute Artikel. Aber auch Elementor bietet auf deren Website einen kurzen Überblick, um das Anwendungsprinzip zu verstehen.
Bonus
Das Thema Barrierefreiheit könnte viele Bücher füllen. Das Thema Tastaturnavigation ist eines, dass idealerweise mehr Aufmerksamkeit erhalten sollte, aber dieser Beitrag ist eh schon lang und hat lediglich zum Ziel, einen groben Überblick zu bieten und etwas mehr für das spannende Thema zu sensibilisieren.
Obwohl ich also das Thema Tastaturnavigation nicht näher behandel, ist es mir dennoch wichtig, einen Aspekt davon kurz anzusprechen: Hover vs. Focus.
Eine kurze Erklärung: Jeder kennt das, wenn man mit seiner Maus über etwas „schwebt“. Dann verändert sich z. B. die Farbe eines Links, so dass der Besucher weiß, wo er sich befindet/ dass er sich gerade über dem Link befindet und jetzt nur noch klicken muss.
Wenn aber jemand (ausschlließlich) mit einer Tastatur arbeitet (und hier gibt es viele Gründe für) gibt es keinen Hover-Zustand, also verändert sich die Farbe auch nicht.
Mit Tastatur gibt es aber Focus. Oder eben nicht, wenn es nicht eingestellt ist.
Ohne jetzt Hover und Focus und Pseudoelemente im allgemeinen erklären zu wollen, kann man sich einfach angewöhnen, Focus immer neben Hover zu verwenden. Mal ein praktisches Beispiel, in dem die Farbe bei Hover und Focus festgelegt wird:
.meine-tolle-klasse:hover {color: #FF0050;}
.meine-tolle-klasse:focus {color: #FF0050;}
Wo Focus definitiv eine gute Idee ist, sind Formulare. Hier mal ein ganz einfaches Beispiel, wie man in Elementor ein Formularfeld, das „angesteuert“ wird, hevorheben kann, um es dem Benutzer einfacher zu machen zu wissen wo er sich gerade befindet:
.elementor-field-group .elementor-field-textual:focus {
box-shadow: inset 0 0 0 0.15rem #ff0000 !important;
}
Falls etwas unklar ist oder Fragen bestehen, fragt bitte gerne nach. Dasselbe gilt, falls ich mich irgendwo missverständlich ausgedrückt habe oder irgendwo einen Fehler eingebaut habe.
Dies ist nur ein sehr kurzer Abriss der Thematik. Wie werden die kommenden Monate immer wieder auf das Thema eingehen und versuchen, Fragen, die bei der Umsetzung auftauchen, zu beantworten und so mit der Zeit einen Leitfaden zu entwickeln, der uns allen hilft, Barrierefreiheit zu realisieren.