Tipps und Tricks für mehr Barrierefreiheit
Digitale Inhalte sollten nicht nur mit Blick auf die visuelle Darstellung erstellt werden. Wer die untenstehenden sieben Regeln befolgt, erstellt Inhalte, die für alle User zug?nglich sind und tr?gt den Anliegen der Accessibility Rechnung.
Sieben goldene Regeln für mehr Barrierefreiheit
- ?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.
- 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.
- 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.
- 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?).
- 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.
- 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 graphics 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.
- 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 graphics zeigt jeweils, ob sie mit Weiss oder mit Schwarz kombiniert werden sollen.
- 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.
- 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 SeiteW3C)
Kontakt
Manu Heim
Digital & Medien
R?mistrasse 101
8092
Zürich
Switzerland
![Manu Heim](/staffnet/de/service/kommunikation/accessibility-digitale-zugaenglichkeit/tipps-tricks-accessibility.person_image.jpeg?persid=MjkyMzE5)