Die Übergangsfrist für barrierefreie Websites läuft ab, die Uhr tickt. Ab 2016 ist vieles Pflicht, woran viele noch nicht denken. Unternehmen, die Waren, Dienstleistungen und Informationen öffentlich anbieten, müssen dies barrierefrei, also für jeden zugänglich, tun.

Zugegebenermaßen haben wir uns am Anfang der Entwicklung recht wenig Gedanken gemacht. „Schaut gut aus, wird schon passen“, haben wir uns gedacht. Seit Mai hat sich das geändert, wir nehmen das Thema Barrierefreiheit ernst. Begleitend zum Entwicklungsprozess holten wir uns einen Berater, der uns bei der Barrierefreiheit hilft – Andreas Jeitler, der auch die Alpen-Adria-Universität Klagenfurt in der barrierefreien Gestaltung von Kommunikationssystemen und in der Lehre berät. Sein erster Check im Sommer fiel nicht übel aus. Er zeigte aber, dass wir noch viele Hausaufgaben machen müssen.

Smartphones sind ideale Helfer.

Für Menschen mit Sehbeeinträchtigungen ist das Smartphone als praktischer Alltagshelfer enorm wichtig. „Ich nutze mein Smartphone täglich: morgens im Bus lasse ich mir zum Beispiel die aktuellen Nachrichten vorlesen, das ist sehr praktisch“, erklärt Jeitler.

Wie können also Inhalte einer mobilen Webseite von Menschen mit Sehbeeinträchtigung gelesen werden? Entweder der Inhalt wird so gut und groß dargestellt, dass er eben für Sehbeeinträchtigte erkennbar ist, oder der User verwendet einen Screenreader. Zusammen mit Andreas Jeitler haben wir daran gearbeitet, Inhalte auf xamoom so barrierefrei wie möglich zu gestalten. Der Experte war nach einigen Verbesserungen begeistert: „Die Features auf eurem CMS sind wirklich super, das machen nicht viele. Ihr sollten veröffentlichen, wie ihr vorgeht“, schwärmt Andreas. Und das machen wir hier.

Welche Tipps und Tricks gibt es, seine mobile Web Angebote barrierefrei für Menschen mit Sehbeeinträchtigungen zu gestalten?

Pali and Andreas testing our product for accessibility

Link Blocks as shown on the mobile web in xamoom1. Verbessere die Kontraste.

Ein simpler Trick hilft vor allem Menschen mit Sehschwäche bei der Rezeption der Webseite. Sie sind darauf angewiesen, dass angezeigte Inhalte einen hohen Kontrast haben. Hierzu gibt es Farbstandards und Grenzwerte. Wer seine Inhalte auf diese prüfen möchte und so erleichterte Lesbarkeit liefern will, kann dafür beispielsweise das Contrast Checker Plugin für Firefox nutzen. Es zeigt an, welche Inhalte ausreichend Kontrast liefern und wo noch nachgearbeitet werden muss.

Der perfekte Kontrast ist selbstverständlich schwarz und weiß. Wenn man mit Farben arbeitet, wird es manchmal schwieriger. So ist das exakte Twitter-Blau (#4099FF) eigentlich nicht mit weiß kombinierbar. Wir mussten die CD-Farbe des Social Media-Riesen (siehe rechts) ein wenig abdunkeln.

2. Mach deine Seite tauglich für Screenreader.

Viele Menschen mit Sehbeeinträchtigung greifen auf Screenreader zurück. Solche Programme lesen Texte vor und leiten so durch die Webseite.

Damit Inhalte Screenreader-tauglich werden, müssen einige HTML-Elemente richtig eingesetzt und mit entsprechenden Attributen versehen werden. Hier drei Beispiele:

Text in der richtigen Sprache vorlesen.

Damit ein Text in der richtigen Sprache vorgelesen wird, muss er mit einem Sprach-Attribut versehen werden. Weil kaum eine Website das mitliefert, kommt beim Vorlesen meist nur Kauderwelsch heraus. Man kann sich vorstellen, wie es sich anhört, wenn beispielsweise deutsche Inhalte englisch ausgesprochen werden.

Eine komplette HTML-Seite wird mit dem „lang“-Attribut des HTML-Tags einer Sprache zugeordnet – in diesem Beispiel französisch:

<html lang="fr">

Man kann aber auch einzelne Absätze in der richtigen Sprache auszeichnen. Bei einem Absatz-Tag <p> sieht das wie folgt aus:

<p lang="fr">Ceci est un paragraphe.</p>

Arbeite mit einer sauberen Struktur.

Sorgfalt bedarf es auch bei der Struktur der Seiten, damit einzelne Elemente richtig erkannt werden. Screenreader können beispielsweise ein Menü erkennen, wenn das NAV-Attribut zum Einsatz kommt.

<nav>
 <a href="/">Home</a> |
 <a href="/product/">Produkt</a> |
 <a href="/contact/">Kontakt</a>
</nav>

Die richtigen Elemente nutzen.

Wir nutzen etwa große, fingerfreundliche Blöcke (siehe rechts oben), um Links am Smartphone darzustellen. Zuvor nutzten wir HTML-Links, die mit CSS rechteckig gestyled werden. Andreas empfahl uns, diese stattdessen als Buttons auszuzeichnen, damit sie von Screenreadern richtig erkannt werden. Hier unser Beispiel:

<button class="link-block youtube">
 <span class="title">YouTube</span>
</button>

Und der Link dazu? Der wird über ein Klick-Event per JavaScript aufgerufen.

Unser großes Ziel: 100% ARIA

Wir sind schon ein Stück weitergekommen, aber noch längst nicht am Ziel. Wir wollen noch einige weitere Empfehlungen von Andreas umsetzen und bei laufenden Entwicklungen die ARIA-Richtlinien (Accessible Rich Internet Applications) des World Wide Web Consortiums möglichst umfassend berücksichtigen.

Einfach wird’s nicht und es braucht immer wieder Kompromisse. Warum wir uns das antun? Weil es am Ende nicht nur Menschen mit Sehbeeinträchtigung, sondern auch uns selbst hilft.

Danke, Andreas, für die Unterstützung und Beratung bis jetzt. Und was er zu unserem Fortschritt sagt, seht ihr hier: