Tipps und Tricks für mehr Barrierefreiheit

Sieben goldene Regeln für mehr Barrierefreiheit

1. Überschriftsformate anwenden: Verwende für Überschriften entsprechende Überschriftsformate. Das gilt für AEM genauso wie für Word, Powerpoint, InDesign, usw. Dabei gilt es zudem die korrekte Hierarchie der Überschriften zu beachten. Der Haupttitel einer Seite bzw. eines Dokuments ist in der Regel eine Überschrift 1 (Heading level 1, H1). Untergeordnet folgen in inhaltlich-logisch korrekter Abfolge eine bis mehrere Überschriften 2 (Heading level 1, H2), dann Überschriften 3 (Heading level 3, H3), etc.
   Warum: Weil Menschen, die mit Vorlesesoftware arbeiten, bei korrekter Formatierung von Überschrift zu Überschrift springen können und auf diese Weise Inhalte ebenso querlesen können wie sehende User.
   
2. Aufzählungen verwenden: Verwende die Listen-Formatierung, wenn Dinge aufgezählt werden. Eine Liste kann nummeriert sein (wenn es sich um eine Gewichtung oder einen Ablauf handelt) oder unnummeriert (in den weiteren Fällen). Das eigentliche Bulletsymbol ist unwesentlich, solange die Inhalte als Liste formatiert sind. Merkpunkt: Eine Liste enthält immer mindestens zwei Listeneinträge; ein einzelner Punkt ist keine Liste. Das gilt für AEM genauso wie für Word, Powerpoint, InDesign, usw.
   Warum: Weil Menschen, die mit Vorlesesoftware arbeiten, Listen als strukturierte Inhalte vorgelesen bekommen und diese z.B. als «Liste mit 12 Elementen» angekündigt werden. Sind Aufzählungen nicht als Listen formatiert, werden sie als unübersichtlicher Textbandwurm vorgelesen.
   
3. Verständliche Links verfassen: Schreibe informative und aussagekräftige Linktexte. Anstelle von «Die Unterlagen finden sie hier» hilft eine Formulierung wie «Die Unterlagen zum Accessibility-Einführungskurs haben wir in unseren Infoseiten bereitgestellt.» Das gilt überall, wo Links erfasst werden, auch in Word, Powerpoint, InDesign, etc.
   Warum: Die verlinkten Stellen fallen visuell auf. Ein aussagekräftiger, informativer Linktext ist hilfreicher als Wörter wie «hier», «mehr», «weiter». Dasselbe gilt für Menschen, die mit Vorlesesoftware arbeiten: Sie können alle Links einer Seite bzw. eines Dokuments auflisten und verschaffen sich so gern einen Überblick über die Informationen. Informative Linktexte helfen zu einem schnelleren Überblick.
   
4. Bilder mit Alternativtext versehen: Entscheide stets, ob die verwendeten Bilder dekorativ oder aussagekräftig (essenziell, sinnstiftend, informationsergänzend) sind. Das gilt für AEM genauso wie für Word, Powerpoint, InDesign, usw.
   Warum: Vorlesesoftware ignoriert alle Bilder, die als dekorativ markiert sind. Bei allen anderen wird der Alternativtext vorgelesen. So ist sichergestellt, dass auch Menschen, die mit Vorlesesoftware arbeiten, alle essenziellen Informationen erhalten.
   
   • dekorativ: Das Bild ist nur zur visuellen Auflockerung da und hübscht das Dokument oder die Seite auf. Kennzeichne in solchen Fällen das Bild als dekorativ.
     
   • aussagekräftig: Schreibe einen Alternativtext, der die Essenz des Bildes enthält. Der Alternativtext ist so so knapp wie möglich, gleichzeitig möglichst präzis. Dass es sich um ein Bild handelt, erkennt die Software. Wörter wie «Bild» oder «Foto» braucht es im Alternativtext nicht, denn sie würden zu einer Verdoppelung führen («Bild: Bild eines schrumpeligen Apfels in einer Fruchtschale»).
     
5. Farbe: Achte darauf, wie du Farben einsetzt. Das gilt für AEM genauso wie für Word, Powerpoint, InDesign, usw.
   Warum: Weil unser Farbempfinden und Farbensehen sehr unterschiedlich ausgeprägt ist. Rund 5% der Bevölkerung gelten als farbenblind (Fachbegriff "farbenfehlsichtig"), überwiegend Männer. Ausserdem können diverse Augenerkrankungen das Farbensehen einschränken.
   
   • Achte immer darauf, dass das Kontrastverhältnis zwischen Text und Hintergrund mindestens 4,5:1 beträgt. Um das Kontrastverhältnis sicherzustellen gibt es online diverse Colour Contrast Analyser Tools. Die ETH-Corporate-Farben sind so gewählt, dass die Kontrastanforderungen eingehalten werden. Die geschützte SeiteÜbersichtsseite Colour accessibility for web graphicslock zeigt jeweils, ob sie mit Weiss oder mit Schwarz kombiniert werden sollen.
     Verwende Farbe nie allein als Informationsmittel. Farben dürfen aber unterstützend eingesetzt werden. Z.B. können ausgebuchte Kurse mit rotem Kreuz dargestellt werden, während diejenigen mit freien Plätzen mit grünem Quadrat angezeigt werden.
     
6. Tastaturzugänglichkeit: Stelle sicher, dass alle interaktiven Elemente mit der Tastatur allein zugänglich sind, also ohne Maus oder Tabletstift o.ä. Dieser Aspekt richtet sich vor allem an Entwickler:innen. Wer Software im Auftrag entwickeln lässt, gibt diesen Punkt als unabdingbare Anforderung ein. Die Kontrolle, ob eine digitale Oberfläche ohne Maus bedienbar ist, ist denkbar einfach: Man nutzt die eigene Tastatur und bedient die interaktiven Elemente nur damit. In der Regel reichen die folgenden Tasten aus: Tabulator, Leerzeile, Shift, Enter, Escape, Pfeil-Tasten.
   Warum: Einerseits arbeiten blinde Menschen ohne Maus (da sie keinen Cursorpfeil erkennen können), andererseits gibt es viele motorische Einschränkungen und Behinderungen, die dazu führen, dass das Bedienen einer Maus nicht oder nur erschwert möglich ist.
   
7. Sichtbarkeit des Fokus: Stelle sicher, dass der Tastaturfokus immer sichtbar ist. Dieser Aspekt richtet sich vor allem an Entwickler:innen. Wer Software im Auftrag entwickeln lässt, gibt diesen Punkt als unabdingbare Anforderung ein. Die Kontrolle, ob der Tastaturfokus gut sichtbar ist, ist einfach: Man nutzt die eigene Tastatur und bedient die interaktiven Elemente nur damit. Sieht man immer, wo man sich gerade befindet, ist der Tastaturfokus gut. Beim Testen empfiehlt sich der Einsatz von Firefox, da in diesem Browser schnell deutlich wird, ob der Fokus erkennbar ist.
   Warum: Weil es für sehende Tastatur-User (siehe Punkt 6) möglich sein muss, dass sie zu jedem Zeitpunkt erkennen können, wo auf einer digitalen Oberfläche sie sich gerade befinden.
   

Wer sich diese sieben Regeln angeeignet hat, fährt mit den folgenden fort:

• Informative Texte: Schreibe informative und verständliche Texte (Überschriften, Linktexte, Fehlermeldungen, Anweisungen, Etiketten, Hinweise, Informationen usw.)
• Seitentitel: Achte darauf, dass jede Seite eines Webauftritts bzw. einer Webanwendung einen informativen und eindeutigen Seitentitel hat. Dieser Titel wird von Bildschirmlesegeräten als erstes gelesen. Der Seitentitel enthält Informationen über den Inhalt der Seite und die Organisation, die für diese Seite verantwortlich ist, z.B. «Digitale Zugänglichkeit - ETH Zürich».
• Leere Zeilen: Erzeuge keinen Leerraum, indem du die Eingabetaste drückst. Wer mehr Leerraum benötigt, verwendet horizontale Linien oder arbeitet mithilfe der Absatzgestaltung (wenn möglich, z.B. Microsoft Word).
• Tabellen: Gib Tabellen mindestens einen Tabellenkopf, besser zwei (Kopfspalte plus Kopfzeile). Verwende keine Tabellen, um ein bestimmtes Layout für nicht-datenbezogene Inhalte zu erhalten.
• WAI-ARIA: Verwende ARIA, wenn der Einsatz sinnvoll ist. Dabei gilt die erste Regel von ARIA: «If you can use a native HTML element [...] or attribute with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so.» (externe SeiteW3Ccall_made)