Barrierefreies Webdesign: Eine Einführung

Das Internet ist für alle Menschen gemacht, egal welche Hautfarbe, Herkunft oder körperliche Fähigkeiten sie besitzen. Doch besonders Menschen mit beeinträchtigter Sicht und Blinde haben schwer im Web. Sie sind auf technische Hilfsmittel wie Screenreader angewiesen um sich im Internet zurechtzufinden, doch die wenigsten Website-Betreiber machen sich darüber Gedanken.

Dabei stoßen insbesondere blinde Menschen immer wieder auf Hindernisse die so nicht sein müssten. Vor allem veralte Websites mit Layouts auf Basis von Tabellen machen ihnen zu schaffen. Doch beim barrierefreiem Webdesign gibt es noch viel mehr zu beachten. In diesem Beitrag sollen die häufigsten Stolpersteine bei der Gestaltung einer Website aufgedeckt und Hinweise zu deren Beseitigung gegeben werden.

Wie sehbehindete und Blinde Menschen eine Website sehen

Die barriefreie Gestaltung einer Website geht eng mit der Suchmaschinenoptimierung einher. Sowohl Suchmaschinen als auch blinde Menschen sind auf eine korrekte Struktur des Inhaltes und sachgemäße Verwendung von HTML-Elementen angewiesen um eine Website benutzen zu können und zu verstehen.

Betrachten wir einmal die Startseite von Pixelstun.de mit Lynx, einem Textbrowser, der die Inhalte ähnlich wie ein Screenreader verarbeitet.

Screenreader: Darstellung einer Website im Lynx-Browser

Man sieht, dass jegliche Design-Elemente Fehlen und nur strukturiertes HTML angezeigt wird.

Im Gegensatz zum richtigen Screenreader, werden hier auch versteckte HTML Elemente angezeigt. Eine Übersicht, wie man Inhalte exklusiv für Screenreader oder Displays zugänglich machen kann, findet sich hier.

Das Ausblenden bestimmter Elemente funktioniert am besten mit CSS Media Queries und kann in folgender Form stattfinden:

@media tty, braille, speech{
  element{
    display: none;
  }
}

Aber auch die „neuen“ ARIA Attribute sind dafür geeignet.  So kann man auch mit aria-hidden="true" Elemente verstecken. Die Unterstützung in den verschiedenen Browsern und Screenreadern ist jedoch sehr unterschiedlich. Hier gibt es einen sehr guten Artikel dazu.

Layouts auf Tabellenbasis

Eigentlich sind Layouts auf Basis von Tabellen ein Relikt der 90er Jahre, doch immer wieder findet man auch heute noch Websites die Tabellen zweckentfremden und für Designs nutzen. Dabei bringen Tabellen prinzipiell nur Nachteile: sie lassen z.B. sich nicht ohne weiteres für’s responsive Design nutzen und sind schwer zu pflegen. Minimale designtechnische Änderungen  ziehen oftmals sehr viel Aufwand nach sich, sobald Tabellen im Spiel sind.

Besonders problematisch sind Tabellen zudem für alle Menschen die unter einer Sehbehinderung leiden. Screenreader lesen eine Tabelle Zelle für Zelle und der Inhalt der Website wird damit unter Umständen entstellt. Nutzen Sie Tabellen also ausschließlich dafür, wofür sie gedacht sind – um (statistische) Daten darzustellen.

Kontraste

Sehr wichtig sind auch Kontraste. Prüfen Sie ob sich der Inhalt genug vom Hintergrund abhebt. Dies betrifft nicht nur Texte, sondern auch Bilder. Der WCAG 2.0 Level AA-Test erfordert mindestens ein Kontrastverhältnis von 4,5:1 für normalen Text bzw. 3:1 für großen Text. Für das Level AAA sind Kontrastverhältnisse von 7:1 für normalen Text und 4,5:1 für großen Text nötig. Großer Text wird dabei definiert als: 14pt+ und fett, oder 18pt+.

Tools mit dem die Kontrastverhältnisse überprüft werden können, finden sich am Ende des Beitrages.

Inline Styles, Schriftgrößen und Überschriften

Vermeiden Sie die Nutzung von Stil-Deklarationen in HTML. Als inline-Style wird z.B. folgendes definiert:

<div style="border:1px solid red">...

Verwenden Sie stattdessen ausgelagerte CSS-Dateien um Ihre Website zu gestalten. Tückisch sind dabei immer WYSIWYG-Editoren, denn diese legen meist alle Stil-Definitionen als inline-Attribute an, ohne dass sich der Autor darüber bewusst ist.

Versuchen Sie immer relative Größenangaben zu verwenden, insbesondere bei der Schrift. Dies ist nicht nur für responsive Design günstig, sondern ermöglicht auch ein flexibles Anpassen der Schriftgröße für alle Elemente der Website. Sie müssen nur die Basisschriftgröße verändern. 😉

Auch für Überschriften sollten Sie nur die dafür vorgesehenen HTML-Elemente verwenden (<h1>-<h6>).

Bilder und alt-Attribute

Das alt-Attribut ist für die Beschreibung von Bildern gedacht. Im Textbrowser oder bei einem fehlgeschlagenen Ladevorgang wird dieses Attribut angezeigt. Vergeben Sie also für jedes Bild eine Bildbeschreibung und lassen Sie diese nur in Ausnahmefällen leer, z.B. wenn das Bild ein reines Design-Element ist und sich nicht anders einfügen lässt. Verwenden Sie die Beschreibung nicht um Keywords zu platzieren. Auch wenn das früher eventuell funktioniert hat: Suchmaschinen kennen diese Tricks seit langem und analysieren die Bilder nun selbsständig.

Alt-Attribute sind für valides HTML5 übrigens zwingend vorgeschrieben.

<img src="pfad/zum/bild.jpg" alt="Bildbeschreibung" />

JavaScript, Videos und Flash

Manche Elemente können von verschiedenen Programmen (Screenreader, Browser) und Geräten nicht wiedergegeben werden. Fast kein Smartphone kann Flash wiedergeben aber auch Textbrowser und Screenreader haben Probleme mit JavaScript und Adobe Flash.

Prüfen Sie daher ob sich Ihre Website ohne Flash-Plugin und mit deaktiviertem JavaScript nutzen lässt.

Suchmaschinen gehen zwar langsam dazu über JavaScript auszuführen und CSS-Dateien zu laden und die Website zu inspizieren wie Sie in einem „echtem“ Browser angezeigt wird, für Screenreader sind diese Techniken allerdings immer noch ein riesiges Hindernis.

Verwenden Sie Videos auf ihrer Website? Beachten Sie, dass es auch Nutzer mit beeinträchtigtem Hörvermögen gibt. Erstellen Sie ein Transkript zu jedem Video.

Ist meine Website barrierfrei?

Sie möchten Ihre Website auf Barrierefreiheit testen? Die folgenden Tools funktionieren dazu sehr gut und decken prinzipiell alle relevanten Tests ab und geben Hinweise zur Verbesserung:

achecker.ca – Prüft Websites nach folgenden Standards:  BITV 1.0 (Level 2) , Section 508, Stanca Act, WCAG 1.0 (A/AA/AAA), WCAG 2.0 (A,AA,AAA)

wave.webaim.org – Prüft Websites und stellt alle problematischen Elemente  dar

Verlassen Sie sich allerdings nicht nur auf diese Tools. Versetzen Sie sich in die Lage eines seh- oder hörbehinderten Menschen und testen Sie ihre Website auf jede erdenkliche Art und Weise, insbesondere mit einem Textbrowser.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.