Layout für Blinde sichtbar machen

Eine oft vernachlässigte Aufgabe von Web-Agenturen ist es, ihre Webseite auch für Blinde und fast-Blinde zugänglich zu machen.

Das ist kein Wunder - denn zum einen ist es aufwändig. Zum anderen aber betritt man damit eine fremde Welt, in der man sich als Sehender erstmal unwohl fühlt. Das ganze normale Leben ist aufs Sehen ausgerichtet. Wie bloß soll man sich ohne das überhaupt zurecht finden?

Um die ersten Schritte in diese Welt soll es in diesem Blog gehen. Wir werden nicht darstellen können, wie man eine ganze Webseite auch ohne Sehen erschließen kann - das wäre viel zu umfangreich und ist Stoff für weitere Blog-Artikel. In diesem Beitrag werden wir uns nur um den ganz großen Rahmen kümmern: Wie übersetzt man die grundsätzliche Gestaltung einer Webseite für jemanden, der sie nicht sehen kann?

Unsere Blog-Serie zur Barrierefreiheit

Bisher sind erschienen:

Barrierefreiheit in der Praxis: Wie plant man die Umsetzung richtig?

Rechtliche Grundlagen: Wer muss Barrierefreiheit umsetzen und ab wann?

Website-Struktur zum Vorlesen

Was Sehende sofort erfassen können (wenn Gestalter und Entwickler genügend Mühe darauf verwendet haben), ist die Grundstruktur einer Seite: Dort oben ist das Logo, daneben die Navigation, darunter der Hauptteil. Im Hauptteil wiederum gibt es einen wichtigen Teil, der eher in der Mitte zu finden ist und unwichtigere Dinge, die sich meist seitlich befinden. 

Irgendwo sind Suchfelder zu sehen, dann gibt es Formulare, ganz unten auf einer Seite meist grundsätzliche Infos, die man nicht dauernd braucht. Eine Art Nachschlagewerk zum Seitenabschluss. 

Diese grundsätzlichen Strukturelemente einer Seite müssen für Blinde nun zugänglich gemacht werden. 

Blinde lassen sich die Seite meist von einem Screenreader vorlesen. Damit dieser sich auf der Seite zurecht findet, muss man ihm Hilfestellung geben. Das geschieht über viele verschiedene Stufen. Die erste und wichtigste davon sind die Landmarks.

Landmarks beschreiben die Struktur

Tokyo Tower als Landmark ähnelt dem Eiffelturm
Kein Eiffelturm, trotzdem ein "landmark": der Tokyo-Tower.

Landmarks bezeichnen im englischen Wahrzeichen oder Orientierungspunkte. Prominentes Beispiel dafür ist der Eiffelturm. Beim Bummel durch eine fremde Stadt liefern Landmarks gut sichtbare Anhaltspunkte, anhand derer man sich orientieren kann. 

Aus diesem Grund werden die nötigen Code-Ergänzugen ebenfalls “landmarks” genannt, mit denen Screenreader sich einen groben Überblick über den Aufbau der Website verschaffen können. 

Wo und wie diese Kennzeichnungen im Quellcode untergebracht werden müssen, damit sich die Screenreader zurecht finden, darum soll es im folgenden gehen.

 

Landmarks: die technische Umsetzung

Um einem Screenreader Orientierung im Dokument zu ermöglichen, dienen als erstes die entsprechenden html-Tags:

html<header><main><footer><nav><section>
html<aside><article><search><form> 

Ergänzt und erweitert werden diese durch so genannte “ARIA-Landmarks”

html<header><main><footer><nav><section>
ARIAbannermaincontentinfonavigationregion
      
html<aside><article><search><form> 
ARIAcomplementaryarticlesearchform 

Die html-Tags werden direkt im html-Code verwendet, die ARIA-Landmarks werden als “role”-Attribut eingestellt:

<header class="myclass"> html-Example </header>

<div class="myclass" role="banner"> ARIA-Example </div>

Wenn man die Auswahl hat, sollte man besser html-Tags verwenden als die ARIA-landmarks, denn diese werden von den Browsern besser unterstützt. 

Unbedingt vermeiden sollte man, mit beiden Systemen widersprüchliche Signale an den Screereader zu senden. So führt z.B. <header role="footer"> zu unvorhersagbarem Verhalten.

Um die Screenreader richtig zu leiten, sind ein paar Feinheiten zu beachten: 

<header> || role="banner"

Das Header-Element steht typischerweise am Anfang einer Seite. Es enthält Dinge wie das Logo, Suchfunktionen, oft auch die Navigation. Hier befinden sich die Informationen über die Website. 

Damit das html-Element <header> zu einem Landmark wird, muss es sich unbedingt direkt unterhalb von <body> befinden. 

Man darf <header> auch innerhalb von anderen Elementen wie zum Beispiel <article> verwenden. Aber dann bezeichnet es den Überschriftsbereich für diesen Artikel und ist keine Landmark mehr. 

<main> || role="main"

Main identifiziert den Hauptinhalt einer Seite und sollte deshalb nur einmal vorkommen. Zusätzlich sollte es mit einer id verwendet werden, damit es möglich ist, Springlinks dorthin zu bauen. So kann man mit dem Screenreader gleich alles Überflüssige überspringen und sich gleich den wesentlichen Inhalt vorlesen lassen. 

Hilfreich ist es zudem, den Abschnitt mit einem Label zu versehen:

<main id="inhalt" aria-label="Unsere neuen Produkte"> ...</main>       oder:

<main id="inhalt" aria-labelledby="products">
  <h1 id="products">Unsere neuen Produkte</h1>
</main>

<footer> || role="contentinfo"

Für den footer gilt ähnliches wie für den header: der footer wird automatisch zur Landmark, wenn es ein Nachfahre von body ist. Steht der Footer innerhalb von <article>, <aside>, <section>, <main> oder <nav>, enthält er ergänzende Informationen zum jeweiligen Abschnitt. 

Eine footer-landmark sollte auf jeder Seite genau einmal vorkommen. Der Abschnitt enthält im allgemeinen Informationen wie Urheberrecht, Navigationslinks, Datenschutz, Impressum etc.

<nav> || role="navigation"

<nav> bezeichnet einen Abschnitt mit Navigationslinks: Menüs, Inhaltsverzeichnisse oder Link-Listen.

Hinweis:

  • nicht jeder Link muss damit ausgezeichnet werden, nur größere Blöcke
  • <nav>-Elemente dürfen nicht ineinander geschachtelt werden!
  • Die Links müssen nicht als Liste enthalten sein.
  • Man kann auf einer Seite mehrere <nav>-Abschnitte einfügen, sollte sie dann aber mit aria-label oder aria-labelledby versehen.

Bei der Benennung der <nav>-Abschnitte sollte man wieder im Sinn haben, welche möglichst kurz Bezeichnung das entsprechende Menü möglichst genau kennzeichnet:

<nav role="navigation" aria-labelledby="Main">
  <h3 id="Main">Mobile Hauptnavigation</h3>
</nav>
<div role="navigation" aria-label="Service-Navigation">
  <h3>Unsere Services</h3>
</div>

<section> // role="region"

Die <section> kennzeichnet Inhaltsabschnitte, die wichtig genug sind, um dem Nutzer einen einfachen Zugang zu ermöglichen (z.B. Info-Kästen). Sparsam verwenden, denn es erhöht das Rauschen! 

Eine <section> sollte in jedem Fall auch ein aria-label enthalten, oder noch besser ein aria-labelledby, das auf eine vorhandene Überschrift verweist. Wenn der Inhalt wichtig genug für eine Section ist, hat er ja auch meist eine entsprechende Überschrift.

<aside> // role="complementary"

<aside> bezeichnet einen unterstützenden Abschnitt, der sich auf den Hauptinhalt bezieht. Typischerweise sind das Neben-Informationen, die sich in einer Seitenspalte befinden, oder Hervorhebungsboxen. Das Label kann den Bezug auf den main-Inhalt vertiefen.

Wenn es mehrere <aside>-Abschnitte gibt, sollten sie wieder einen aussagekräftigen Namen bekommen.

<article> || role="article"

Alleinstehender Abschnitt einer Seite: Blog- oder News-Artikel, Forenbeiträge, Kommentare. Es kann sich auch Feeds oder Cards handeln. 

<article> dürfen selbst wieder <header> und <footer>-Abschnitte enthalten. Aber diese sind dann keine landmarks. 

<search> || role="search"

Diese Auszeichnung kennzeichnet einen Bereich, der der Suche dient. Meist umfasst der Bereich nur das Eingabefeld für die Suche. Gibt es mehrere davon, brauchen sie wieder ein sprechendes Label, damit die Nutzer wissen, welches Suchfeld sie ansteuern.

<form> || role="form"

Der <form>-Tag umschließt ein Formular. Zu welchem Zweck das Formular dient sollte immer über ein Label angegeben werden. 

Dient das Formular der Suche, ist der <search>-Tag zu bevorzugen. Innerhalb des <form>-Abschnitts sollte nach Möglichkeit ein <button>-Element zum Abschicken des Formulars vorhanden sein, damit screenreader es sicher finden können.

Landmarks richtig verwenden

Wenn man all diese Landmarks richtig in der Seite einbaut, gewinnt ein Nutzer auch mit dem Screereader schnell einen guten Überblick über den Inhalt. Wichtig ist dabei, dass die Anzahl der Landmarks nicht zu groß wird. Ca. 7 bis 10 sind eine gute Größe.

Fast immer wird man dabei auf die html-Tags zurück greifen können. Wenn aus anderen Gründen die html-Struktur nicht geändert werden kann, steht immer noch die ARIA-Auszeichnung zur Verfügung. 

Mit der korrekten Verwendung der entsprechenden Auszeichung erfreut man übrigens nicht nur die sehbehinderten Nutzer, sondern auch die Suchmaschinen, die sich auf diese Weise viel besser auf der Seite orientieren können.

Kontaktieren Sie uns für barrierefreie Umsetzungen

Wenn Sie Ihre TYPO3-Seite an die neuesten Standards zur Barrierefreiheit anpassen wollen, so rufen Sie uns einfach an. Wir haben immer ein offenes Ohr: 089 / 38 15 76 400