Gutes Aussehen ist nicht alles. Und das gilt auch für das Web: Technologien werden immer jünger, Nutzer immer älter. Zudem sind viele Menschen im Alltag eingeschränkt – sei es altersbedingt oder durch eine Beeinträchtigung. Das heißt: Möchte man das Web für die Zukunft gestalten, muss es für jeden zugänglich sein.
«Make the web accessible for your future selves.»
1. Barrierefreiheit ist nicht gleich Barrierefreiheit
Menschen mit einer Einschränkung sind im Web auf speziell aufbereitete Inhalte angewiesen. Blinde lassen sich Inhalte in Brailleschrift ausgeben oder über eine Software vorlesen. Gehörlose Menschen benötigen wiederum eine besondere Darstellungsform. Diese Beispiele sind eher speziell. Daneben gibt es aber auch noch andere Aspekte der Barrierefreiheit:
- Accessibility (Zugänglichkeit)
- Multi-Screen Design (Plattformunabhängigkeit von Web-Applikationen)
Das heißt, eine Website sollte über alle Devices – Desktop, Tablet, Smartphone – bedienbar sein, unabhängig von Betriebssystem und Software. Gundlegend gilt es drei Einschränkungen zu unterscheiden:
- Verständnis: Aufgrund einer kognitiven Störung werden Inhalte nicht verstanden.
- Lösung: Navigationshilfe, einfache Sätze, Textalternativen.
- Wahrnehmung: Durch eine Beeinträchtigung der Sinne werden Inhalte eingeschränkt wahrgenommen.
- Lösung: Textalternativen, Skalierung, Farbkontraste.
- Zugriff: Angesichts motorischer Einschränkungen können Inhalte nur eingeschränkt abgerufen werden.
- Lösung: Alle Inhalte sind per Maus/Tastatur bedienbar – unabhängig von der Software.
2. Mensch vs. (Such)Maschinen
Im Web werden Inhalte sowohl vom Mensch als auch von Maschinen abgefragt. Das bedeutet, dass zum Beispiel sehbeeinträchtigte Personen ein Angebot ähnlich wahrnehmen wie Google: Sie können den Text auswerten, meist aber keine Bilder oder Animationen. Web-Accessibility schafft damit einen besseren Zugang für Mensch und Maschine.
3. Die vier Merkmale für barrierefreie Inhalte
Als Grundvoraussetzung gilt: Korrekter Einsatz von Webstandards (HTML/XHTML) und die Trennung von Struktur und Layout (CSS). Zusätzlich sind in den Web Content Accessibility Guidlines vier Merkmale für barrierefreie Inhalte definiert:
- wahrnehmbar: Wir stellen Alternativen bereit und erleichtern es Besuchern, Inhalte zu sehen, hören und verstehen.
- bedienbar: Alle Funktionen sind in angemessener Zeit über die Tastatur bedienbar.
- verständlich: Lesbar, vorhersehbar – ansprechbar (Assistance).
- robust: Mit jeder Software kompatibel.
Neben diesen Merkmalen würden 12 Grundregeln für barrierefreie Inhalte entwickelt. Diese findest du hier: >> zu den WCAG Guidlines
4. Praxis-Check: Accessibility einfach auswerten
- A = Basic
- AA = Best Practices
(zum Beispiel Untertitel für Videos) - AAA = Advanced
(zum Beispiel Untertitel für Videos, die live ausgestrahlt werden)
Mittlerweile ist AA das De-facto-Basislevel für die Barrierefreiheit einer Website. Alle Webseiten, die das Level nicht erreichen, werden als nicht barrierefrei eingestuft. Mit den W3C Easy Checks kannst du deine Seite einfach analysieren und anschließend auswerten.
5. Accessibility ist Sache der Web Entwicklung – falsch!
Um Accessibility erfolgreich einzusetzen benötigst du eine gute Programmierung und ein cleveres Design. Denn beide Disziplinen gehen – auch in Bezug auf Barrierefreiheit – Hand in Hand. Umso wichtiger ist es, dass der Designer früh genug in den Strategie/Konzept-Prozess mit eingebunden wird – möchte man extra Kosten vermeiden.
6. Accessibility als Design-Tool
Wenn wir über Gestaltung und Barrierefreiheit sprechen, sprechen wir auch über einen nutzerfreundlichen Web-Auftritt. Denn in der Regel führt ein "barrierefreies Design" zur Verbesserung der Usability – und zwar für den Mensch und für die Suchmaschine.
7. Accessibility als Rankingfaktor
Und da sind wir auch beim Thema Rankingfaktor. Denn eine barrierefreie Website unterstützt dein Ranking in den Suchmaschinen: Was der Mensch besser lesen kann, das gilt auch für Google & Co. Bereits kleine Kniffe und Optimierungen genügen, um deine Seite "barrierefreier" und attraktiver für Google zu machen.
Meine Tipps für Redakteure
- Symbole: Im Alt-Text angeben, wofür das Symbol steht, nicht wie es aussieht.
- Dekorative Bilder (zum Beispiel Trennlinien): leeres Alt-Attribut für Bilder, die im Zweifelsfall weggelassen werden können Achtung: Nicht komplett weglassen, sonst liest der Screenreader den Dateinamen vor, der häufig nichts über das Bild aussagt.
- Bild mit Link: redundanten Alt-Text vermeiden – das heißt, wenn im Link bereits die Bezeichnung steht, kann der Alttext leer gelassen werden.
- Funktionale Bilder (zum Beispiel Logo das zur Startseite verlinkt): Immer die Funktion nennen («Home»), nicht als «Logo» bezeichnen.
Mein Fazit
«Simple things should be simple, complex things should be possible.» Alan Kay, Computer Scientist
Und damit komplexe Dinge möglich werden, findest du hier die beiden wichtigsten Guidelines, um dein nächstes Web Projekt barrierefrei umzusetzen: And the future is yours!
Und diese vier Webstandardorganisationen sollte man außerdem im Auge behalten: W3C, WHATWG, Ecma International, ISO.
(Bildquelle: Matthew Wiebe/unsplash.com)
