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)