Bei der Umsetzung von barrierefreien Webprojekten kommt es immer wieder zu üblichen Problemstellungen und Fehlern die auftreten. Ein Teil unserer Diplomarbeit war es, diese Problemstellungen zu dokumentieren, und passende Lösungsansätze, Tipps und Hilfestellungen anzubieten. Hoffentlich hilft dir diese Dokumentation dabei, deine zukünftigen Projekte barrierefrei(er) zu gestalten.

Die einzelnen Problemstellungen sind stets mit Codebeispielen ausgeschmückt, um diese anschaulicher zu gestalten.

Bedienung mittels Tastatur

Die Bedienbarkeit einer barrierefreien Website zählt neben der Wahrnehmbarkeit, dem Verständnis und der Robustheit zu einem der großen Teilbereiche der Barrierefreiheit einer Webseite. Dazu zählt auch, dass eine barrierefreie Website nur mit der Tastatur bedienbar sein soll. In den Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 wird diese Anforderung unter Guideline 2.1 beschrieben und festgehalten.

Dies hilft nicht nur Menschen welchen eine Bedienung mit der Maus, z.B. aufgrund einer motorischen Einschränkung nicht möglich ist, sondern trägt wie viele Richtlinien der Barrierefreiheit zu einer allgemeinen Verbesserung der Usability bei. Die Situation, dass bei einem PC kurzfristig keine Maus zur Stelle ist, fehlende Treiber ein funktionieren einer solchen verübeln, oder bei einem Laptop das Touchpad für eine zufriedenstellende Bedienung nicht ausreichend gut ist, kann jedem unterkommen. Eine Navigation mittels Tastatur ist in solchen Momenten ein Segen.

Vor allem in komplexen (aber auch einfachen) Menüstrukturen, und interaktiven Elementen wie z.B. Multi-Level Navigationen mit Hover-Effekten oder Dropdown-Auswahlelementen ist eine Bedienung mittels Tastatur leider oft nicht möglich.

Beispiel: Einfache Multilevel-Menüstrukturen über 2 Ebenen werden gerne und oft nur mittels CSS gelöst. Leider kommt es dabei oft zu Abstrichen in der Tastatur-Bedienbarkeit, wie im folgenden Beispiel zu erkennen ist.
Versuche mit den Tabulator-Tasten die Menüpunkte unter „Work“ zu erreichen – keine Chance.

Das Problem liegt hier beim :hover, welches durch die Tastatur nicht ausgelöst werden kann.

Wie man es richtig macht

Bei der Programmierung von Menüstrukturen sollte immer darauf geachtet werden, dass diese auch mittels Tastatur erreicht werden können.

Arbeite mit click-Events, welche auch mit der Eingabe-Tast der Tastatur aufgerufen werden können.

Ein besonders nettes Feature von Button und Link-Elementen ist, dass das „click“ Event bei diesen nicht nur durch einen Mausklick, sondern auch durch ein Drücken der Eingabetaste während das Element fokussiert ist ausgelöst wird. Du kannst das im folgenden Beispiel austesten:


Probleme bei der Bedienung mit Bildschirmlupen

Oft wird bei der Optimierung von Seiten hinsichtlich Barrierefreiheit an Screen-Reader und Blindheit gedacht. Während die Optimierung einer Applikation für diese Zielgruppe wichtig ist, sollte dabei nicht auf eine Gruppe in der Gesellschaft vergessen werden, die viel größer ist: Menschen mit Sehbehinderung.

Egal ob es sich um eine angeborene Sehbehinderung oder Krankheit handelt, oder um eine im Alter eintretenden Sehschwäche, das Erkennen von Schriften oder Bedienelementen wird zusehend zur Herausforderung. Einige Menschen greifen deshalb auf eine Bildschirmvergrößerungssoftware zurück, eine sogenannte Bildschirmlupe. In einem Artikel über Hilfsmittel für Menschen mit Sehbehinderung haben wir diese Technik schon genauer erläutert, sowie eine Simulation einer Bildschirmlupe eingebaut.

Native Vergrößerung und Responsive Design

Ist eine Seite jedoch schon nativ sehr gut skalierbar, ist der mühsame Workaround mit einer Bildschirmlupe für viele Menschen nicht mehr nötig. Mit der Tastenkombination Strg + oder Strg - kann die Skalierung einer Website nativ im Browser geändert werden. Bei optimaler Umsetzung passen sich der Inhalt, das Layout, die Menüstrukturen sowie sonstige Elemente der Seite der neuen Skalierung automatisch an, und werden nach wie vor korrekt dargestellt.

Dieses Verhalten nennt man responsiv. Es sorgt auch dafür, dass Seiten sowohl auf Smartphones, Tablets und kleinen bzw. großen Laptops oder Desktop-PCs korrekt dargestellt werden. Ein perfektes Beispiel dafür, dass jeder von Barrierefreiheit profitiert, völlig egal ob es sich um einen Nutzer mit einer Sehbehinderung oder einfach nur um einen Nutzer mit einem mobilen Endgerät handelt.

Fallbeispiel: Hover-Tooltips

Besonders Tooltips, welche sich beim Hovern der Maus über ein bestimmtes Element öffnen können für Benutzer mit einer Bildschirmlupe ein großes Problem darstellen. Solche UI-Elemente sind fester Bestandteil vieler Programme und geben nützliches Feedback über die Funktion eines Bedienelements oder Felds, in Form eines kleinen Popups in unmittelbarer Nähe des Bedienelements.

Ist ein Tooltip schlecht programmiert, und wird nur beim Hovern über das Bedienelement selbst, jedoch nicht beim Hovern über das Tooltip selbst angezeigt, kommt es zu dem Problem, dass Nutzer mit einer starken Bildschirmvergrößerung eventuell keine Chance haben das gesamte Tooltip wahrzunehmen.


Unübersichtliche Informationsarchitektur

Barrierefreiheit beginnt nicht erst beim Programmieren. Barrierefreiheit ist ein Aspekt, welcher schon von Anfang an in der Konzeption, Planung und schlussendlich auch in der Umsetzung und Test-Phase berücksichtigt und bedacht werden muss.

Beim Erstellen einer Informationsarchitektur stellt man sich die Frage, wie man die Information welche man vermitteln will optimal darstellen will. Wie viele Ebenen hat die Navigation? Wie wird die Information auf einer Seite dargestellt?

Im Laufe unserer Diplomarbeit haben wir mehrmals gemerkt, dass schlechte Informationsarchitekturen und Layouts nicht barrierefrei sind, und barrierefreie Informationsarchitekturen und Layouts für alle Vorteile haben.

Schlechte Informationsarchitekturen

… sind nicht intuitiv, nicht an die Zielgruppe angepasst, unkonsistent, irreführend und unübersichtlich.

Unklare Navigationsebenen (z.B. mehrere Menüs, deren Aufgabe nicht klar voneinander getrennt ist) und schlechte Seitenlayouts (z.B. dreispaltige Designs mit großen Abständen) stellen vor allem für Menschen mit Sehbehinderungen ein Problem dar, da diese zum Beispiel beim Einsatz einer Bildschirmlupe keinem klaren Informationspfad folgen können (Es fehlt der „Rote Faden“, und Information wird womöglich ausgelassen oder übersprungen). Auch hier hilft Responsives Design, da es dem Entwickler die Möglichkeit gibt die Informationsarchitektur an die Darstellung auf kleinen oder stark skalierten Displays anzupassen.


Unausreichende Kontraste

Die visuelle Gestaltung spielt eine große Rolle beim Entwickeln von barrierefreien Webinhalten. Bei der Umsetzung unserer Diplomarbeit sind wir häufig auf unzureichende Kontraste gestoßen.

Die Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 beschäftigen sich mit diesem Thema in Richtlinie 1.4. In dieser wird ein Kontrastverhältnis von mindestens 4,5:1 festgelegt. Für Text, welcher größer als 18 Punkt oder fetter als 14 Punkt ist, reicht ein Kontrastverhältnis von 3:1 aus.

Diese Kontrastverhältnisse werden leider viel zu selten eingehalten, weshalb es zu empfehlen ist auf eine programmiertechnische Lösung zurückzugreifen.

@function check-contrast($fg, $bg) {
  $r: (max(red($fg), red($bg))) - (min(red($fg), red($bg)));
  $g: (max(green($fg), green($bg))) - (min(green($fg), green($bg)));
  $b: (max(blue($fg), blue($bg))) - (min(blue($fg), blue($bg)));
  $sum: $r + $g + $b;
  @if $sum < 500 {
    @return "false";
  } @else {
    @return "true";
  }
}

 
Diese SCSS Funktion liefert nur dann true zurück, wenn der Kontrast zwischen Vorder- und Hintergrund ausreichend ist. Folgendes Beispiel zeigt, wie diese Funktion eingesetzt werden kann, um immer sicherzugehen, dass ein ausreichender Kontrast vorhanden ist:

$hColor: #ffffff;
h1 {
  color: $hColor;
  @while (check-contrast($hColor, #fff) == "false") {
    color: $hColor;
    $hColor: darken($hColor, 1%);
    @if (check-contrast($hColor, #fff) == "true") {
      color: $hColor;
    }
  }
}

Im folgenden CodePen können Sie die Funktion Live im Einsatz erleben: