Barrierefreiheit Teil 1

Welche Richtlinien gibt es bei Barrieriefreiheit und auf was sollte man achten? Hinter Türchen Nr. 5 findet ihr die Antwort.

Wahrnehmbar, Bedienbar, Verständlich und Robust

muss eine Seite sein, damit sie barrierefrei ist.  Menschen die nichts oder wenig sehen, nichts oder wenig hören, Farbenblinde und Gelähmte, Legastheniker – einfach alle - sollen mit der Seite arbeiten können.

Seit Dezember 2016 gilt die  EU-Richtlinie über den barrierefreien Zugang zu Websites und Apps öffentlicher Stellen. Nachlesen kann das jeder selbst: http://eur-lex.europa.eu/legal-content/DE/TXT/HTML/?uri=CELEX:32016L2102&from=DE, es ist etwas öde und zu viel, um hier auf Details einzugehen.

Jedenfalls müssen bis Ende September 2018 alle Webseiten, die ein öffentliches Angebot sind, barrierefrei  (Konformitätsstufe AA) sein. Betroffen sind also Seiten von Gemeinden, Stadtbibliotheken, öffentlichen Schulen, Verkehrsbetrieben und so fort.

Basis des Ganzen sind die Web Content Accessibility Guidelines (WCAG) 2.0, für die inzwischen eine Version 2.1 in Arbeit ist. Die Version 2.1 ist im Wesentlichen eine Erweiterung für mobile Apps. Denn die gab es noch nicht, als die 2.0 erarbeitet wurde. Sicher gibt es zu dieser Regel gefühlt eine Million Ausnahmen und Erleichterungen aber doch: Zugang zu Informationen ist ein Menschenrecht, eine Benutzergruppe wegen einer Behinderung auszuschließen ist eine Diskriminierung.

Um barrierefrei zu sein muss eine Seite wahrnehmbar, bedienbar, verständlich und robust sein – das sind die Prinzipien. Diese Schlagwörter sind allerdings noch nicht geeignet um damit konkret eine Seite aufzubauen. Dafür gibt es 12 Richtlinien und darin >60 Erfolgskriterien, die erfüllt sein müssen,damit eine Seite sich als barrierefrei bezeichnen darf.

Bei der Planung eines neuen Projekts ist es einfacher, von Anfang an alles unter dem Aspekt der Barrierefreiheit zu planen. Schwieriger ist es, eine vorhandene Seite barrierefrei zu machen. Hier müssen die Barrieren erst einmal erkannt werden. Und sie zu beseitigen kann einen kompletten Relaunch der Seite erfordern.

Zur Beruhigung für Designer: Die Zeiten als „barrierefrei“ = dröge, langweilig, statisch war sind lange vorbei. Eine barrierefreie Seite sieht aus wie die schönste nicht-barrierefreie, sie ist nur besser durchdacht und besser gemacht.

Robustheit

Grob gesagt: Die Seite muss korrekt programmiert sein, so dass Browser und Hilfsprogramme (Screenreader, Braille-Zeile) keine Fehler finden und alle Tags richtig interpretieren können. Im Wesentlichen sorgt Joomla! für die Robustheit momentan nicht 100% und nicht im Backend. Ab Version 4.0 ist Joomla! auch im Backend barrierefrei. Ein wichtiges und unverzichtbares Feature, um Angebote für öffentliche Seiten zu erstellen.

Verständlichkeit

Über die Struktur des Content macht man sich ja schon zu allererst seine Gedanken. Content und Struktur müssen verständlich sein. Was verständlich ist hängt auch von der Zielgruppe ab. Eine Seite über Quantenphysik wird 99% der Menschen ausschließen, das ist eben so und läßt sich nicht ändern. Es muss in Konformitätsstufe AA auch keine „leichte Sprache“ sein. Aber eine gute und korrekte Sprache ist Voraussetzung für Verständlichkeit. Gut geschriebene Texte sind auch für Suchmaschinen gut lesbar und ein Pluspunkt für SEO.

Fast automatisch hat eine benutzerfreundliche Website eine flache und gut erkennbare Navigationsstruktur. Eine flache Struktur ist eine Wohltat für alle. Am besten sind nicht mehr als zwei Stufen direkt sichtbar. Bei zwei Stufen sind dropdown menus auch noch barrierefrei möglich, Splitmenus sind einfach zu machen. Natürlich kann es mehr als zwei Stufen geben, aber dann überlegt man sich eine intelligente Lösung.

In einer verständlichen Struktur weiß der Benutzer immer, wo er sich befindet und wie er hierhin gekommen ist – auch wenn er nicht um die Ecke denken kann.

Breadcrumbs müssen daher sein, sie sind in Joomla auch vorgesehen – und bedenkt, dass sie Blinden vorgelesen werden (soll heißen: keine extra Elemente als Trennzeichen – sonst hören Blinde ungefähr so etwas:  Link zu Startseite Grafik Doppelstrich Link zu Weihnachtsmenü Grafik Doppelstrich Link zu Suppe ….  

Jedes überflüssige Element und jedes unnötige Wort stielt dem Benutzer die Zeit, vor allem wenn er sich durchtabben oder vorlesen lassen muss.

Verständlichkeit heißt auch: Die Seite verhält sich vorhersehbar. Ein Button soll eine Aktion auslösen, ein Link soll zu einer anderen Seite verlinken, nicht umgekehrt und vor allem nicht mal so – mal so. Wie es optisch aussieht ist dabei zweitrangig, es geht um die semantische Auszeichnung, die Tags.

Wahrnehmbarkeit

Bei wahrnehmbar denkt man als erstes an Farben und Schriften. Bei Überschriften, also einer Größe von 1.5rem oder mehr gibt es kaum Probleme beim Lesen, aber kursive Schriften vermeidet man generell, ebenso unruhige Hintergründe.

Bei Texten gibt es ein paar Faustregeln: Normale font-size sollte mindestens 1rem  sein, oder 16px. Die Verwendung von rem ist vorzuziehen. Schriften müssen sich auf mindestens 200% vergrößern lassen. Die Zeiten der Funzelschriften sind zum Glück vorbei und auch die Zeiten, in denen Texte per Photoshop auf Bilder praktiziert wurden sollten Vergangenheit sein. Texte sollen immer Texte sein – und Bilder müssen immer einen alt-Text haben. Der alt-Text kann für dekorative Bilder leer sein. Für Bilder mit Information muss er aber sinnvoll sein.

Bei Farben gilt es eventuell, einen Kampf mit den Designer  - oder dem Designer in sich - auszufechten. Lea Verou hat einen wundervollen Contrast Ratio Interpreter gebaut: http://leaverou.github.io/contrast-ratio . Von Anfang an soll klar sein, dass Text und Hintergrund eine Contrast Ratio von mindestens 4.5 haben müssen. Denkt gar nicht mal an hellgraue Schriften auf weissem Hintergrund, egal wie elegant das aussieht!

Ein weiterer Kampf mit dem Designer: Links im Text müssen erkennbar sein, auch für Farbenblinde. Zu Deutsch:  Links dürfen sich nicht nur durch ihre Farbe vom Text unterscheiden sondern müssen unterstrichen oder mit einem icon versehen sein. Das Unterstreichen sehen Designer meist nicht gerne. Dann sind Icons das Mittel der Wahl. ::before und ::after in CSS sind nützlich Konstrukte.

Zur Wahrnehmbarkeit gehört auch die Überlegung ob und wie Slider eingesetzt werden. Menschen mit Aufmerksamkeitsstörung können nämlich keine sich bewegenden Objekte ertragen – die müssen sich anhalten lassen.

Bedienbarkeit

Wie bedient man eine Seite? Durch Navigieren und Ausfüllen von Feldern, also von Formularen. Navigiert wird mit der Maus oder mit dem Keyboard oder geführt durch einen Screenreader.

Welches Menü ist nun am besten bedienbar? Es gibt hier keine Vorschrift. Sicher ist nur: Die Elemente müssen groß genug sein, um auch mit unsicherer Hand angesteuert zu werden und sie müssen still halten, dürfen nicht bei einer falschen Bewegung wieder weggleiten. Splitmenüs sind eine gute Lösung für Barrierefreie Seiten.

Die Reihenfolge der Module ist ebenfalls wichtig. Ist es angenehmen, sich bei jedem Neuaufbau einer Seite zuerst durch das Wettermodul, einen Slider mit Urlaubsfotos, dann den immer gleiche „Willkommen auf der Startseite“ Text zu tabben? Wie wäre es statt dessen mit einem Newsflash-Modul gleich am Anfang, um schnell zu den neuesten Artikeln zu kommen?

Keyboardnutzung hängt am Focus! Der Focus -  in diesem Kontext - ist gewöhnlich ein Rahmen um Links bzw. Buttons oder auch eine deutlich andere Färbung eines Elements. Der Focus ist wichtig! Egal wie er aussieht – er muss immer sichtbar bleiben. Ohne sichtbaren Focus ist ein Tastaturnutzer verloren. Es ist der Job des Designers, den Focus mit einzuplanen und ins Design zu integrieren.

Nun soll der Templatebauer auch unbedingt noch einen „Navigation-Bypass“ einplanen, mit dem der Keyboardnutzer oder der Blinde direkt zum Content oder zur Navigation springen kann.  Es sind nur ein paar Zeilen, sie stören niemanden. Aber sie ersparen es dem Benutzer, sich bei jedem Neu-Laden der Seite durch x links des menus durchzutabben. Das Beispiel aus beez:

<ul class="skiplinks">
    <li><a href="#main" class="u2"><?php echo JText::_('TPL_BEEZ3_SKIP_TO_CONTENT'); ?></a></li>
    <li><a href="#nav" class="u2"><?php echo JText::_('TPL_BEEZ3_JUMP_TO_NAV'); ?></a></li>
    <?php if ($showRightColumn) : ?>
        <li><a href="#right" class="u2"><?php echo JText::_('TPL_BEEZ3_JUMP_TO_INFO'); ?></a></li>
    <?php endif; ?>
</ul>

Die Bedienbarkeit betrifft natürlich in erster Linie Formulare und spontan fällt mir hier ein: Formulare müssen lang genug aktiv bleiben damit auch ein „Langsamer“ genug Zeit hat, sie auszufüllen.

Wenn sauber mit Joomla! FormFields gearbeitet wird sind Formulare gut gebaut – solange keiner auf die Idee kommt, zum Beispiel labels zu unterdrücken. Dann könnte ein Blinder nicht mehr wissen, was er wo eingeben muss, auch wenn es für Sehende irgend einen anderen Hinweis gäbe.

Captchas sind aus Sicht der Barrierefreiheit fürchterlich, die sollte man keinesfalls einplanen. Es gibt andere Methoden, die ebenso sicher aber benutzerfreundlicher sind.

Das sind ein paar Vorüberlegungen um gleich von Anfang an auch der Barrierefreiheit eine Chance zu geben. Sie sind natürlich nicht vollständig – aber man muss ja irgendwo anfangen. Wer sich bei der Planung ständig fragt: Was hört der Blinde, wie geht der Tastaturnutzer vor, was sieht der Farbenblinde wird schon das meiste berücksichtigen und sicherstellen dass niemand aufgrund einer Behinderung von der Benutzung der Seite ausgeschlossen ist.