Webseiten zum anhören: Tipps für die Sprachausgabe

Lesen lassen – nicht nur für Blinde eine Hilfe

Webseiten sind in den meisten Fällen mit viel Aufwand optisch ansprechend gestaltet. Sie lassen sich heute in der Regel sowohl an einem großen Bildschirm, als auch auf dem kleinen Smartphone-Display bequem betrachten und bedienen.

Aber habe Sie sich Ihre Webseite schon einmal vorlesen lassen? Zwar sind die Computerstimmen nicht so nett anzuhören, wie ein Mensch, aber es wurde eine Menge Aufwand in die einzelnen Systeme gesteckt, damit die Sprache weitgehend natürlich klingt. Na ja, das klappt nicht hundertprozentig, aber heutige Vorleseautomaten sind einwandfrei zu verstehen. Wenn man seine Hände frei haben möchte, ist das Hören einer Webseite – insbesondere bei einem längeren Text – eine nicht zu verachtende Alternative zum Selberlesen.

Besonders gut ist das auf iOS-Geräten umgesetzt. In den Bedienungshilfen lässt sich aktivieren, dass eine Seite vorgelesen werden soll, wenn man mit zwei Fingern von oben nach unten streicht. Dann erscheint auch ein kleiner Player, mit dem man die Geschwindigkeit bestimmen und das Vorlesen pausieren kann. Der Browser Safari bietet darüber hinaus einen Lesemodus, der sich aktivieren lässt, indem man in der Adressleiste des Browsers auf ein Text-Symbol klickt, ähnlich dem Symbol für linksbündigen Text in einer Textverarbeitung wie Word.

Dann werden Navigation, Kopf- und Fußbereich und Werbung ausgeblendet und gezeigt wird nur noch der Hauptinhalt der geöffneten Seite. Sehr angenehm zu lesen (Einstellungen zu Schriftgröße, Darstellung usw lassen sich auf die persönlichen Wünsche abstimmen).

Diese Darstellung ist aber auch sehr gut geeignet, um vorgelesen zu werden.

Wenn Sie die Seite nicht nur lesen möchten, sondern auch mit ihr interagieren wollen, ist der Lesemodus natürlich nicht geeignet, denn ohne Links und Schlatflächen, keine Interaktion.

Mit einer freien Hand beim Essen oder Kaffetrinken, kann man sich per Tastatur durch die Webseite bewegen. Mit der Tabulator-Taste beispielsweise springt man von Link zu Link.

In vielen Situationen ist das eine echte Hilfe. Noch freier wird man in der Bedienung, wenn man nicht ständig auf den Bildschirm schauen muss. Dazu benötigt man eine Sprachausgabe. Auch diese ist in iOS bereits integriert (in Android auch, aber als Apple-User kann ich zur Bedienung wenig sagen – auch unter Windows und Windows für mobile Geräte wird es sicher so etwas geben).

Manche von uns sind sogar auf die Bedienbarkeit ohne Bildschirm angewiesen, weil sie nicht oder so schlecht sehen, dass die Seite auch ohne Bild funktionieren muss, um von ihnen bedient werden zu können.

Auf vielen modernen Webseiten gehrt das schon ganz gut, weil diese meistens einige wichtige Aspekte beachten. Sonst würden auch so Dinge wie der Lesemodus von Apple nicht funktionieren.

Um Blinde so zu unterstützen, dass eine Webseite nicht nur irgendwie vorgelesen wird, sondern auch noch ein komfortabel zu bedienen ist, braucht es dann noch ein bisschen mehr. Man kann exklusiv für die Nutzer von Screenreadern mit mehreren Methoden Hinweise geben, die das Layout der Seite für Sehende nicht „stören“, weil sie nicht angezeigt werden.

So ist es beispielsweise eine große Hilfe, wenn die einzelnen Bereiche einer Webseite mit Überschriften versehen sind. Haben Hauptnavigation, Inhaltsbereich, Seitenleiste und Fußbereich sinnvolle Überschriften, wissen Blinde, die von Überschrift zu Überschrift navigieren können, auf Anhieb, wo sie sich innerhalb einer Seite befinden.

Sinnvolle Überschriften wären beispielsweise

• „Navigation“ für die Hauptnavigation,
• die Artikelüberschrift für den Hauptbereich (möglichst identisch mit dem Titel der Seite und mit den Links, die auf diese Seite führen),
• „Weiterführende Informationen“ für die Seitenleiste und
• „Über diese Webseite“ für den Fußbereich, der in der Regel Copyright-Hinweis, Kontakt-Adresse des Betreibers u.ä. enthält

Anhand der Positionierung und des Layouts sollten alle diese Bereiche auf den ersten Blick für sehende Besucher erkennbar sein. Man ist gewohnt, die Navigation oben oder links zu finden und weiß, wie die ungefähr gestaltet ist (ein zusammengehöriger Block mit einer Liste von Links – oft fahren Unterpunkte bei Berührung mit der Maus oder Touch-Kontakt aus).

Also benötigen Sehende diese Informationen in der Regel nicht. Es gibt nämlich Ausnahmen – haben Sie sich mal eine komplexe Webseite ohne Layout angeschaut? – Sicher haben Sie so etwas schon mal gesehen, weil hin und wieder kommt es bei der einen oder anderen Seite zu so einem Fehler, weil ein Entwickler sich vertan hat, im Server etwas falsch konfiguriert ist oder bei der Übertragung etwas schief gelaufen ist. Die Formate (CSS) lassen sich aber auch vom Besucher gezielt ausschalten oder durch eigene Formatierungen ersetzen. In diesen Fällen ist nicht mehr sichergestellt,  dass die geannnten Bereiche auf Anhieb erkannt werden.

Darum ist es sinnvoll, die Überschriften der Seite nur dann auszublenden, wenn das Original-Autoren-Stylesheet des Seitenbetreibers verwendet wird.

Das geht recht einfach: die nicht anzuzeigenden Inhalte sollen vorgelesen werden, aber nicht zu sehen sein. Screenreadern (und Blinden) ist es egal, ob ein Text in ein Element hinein passt oder ob es sich außerhalb des sichtbaren Bereiches befindet. Wenn die entsprechende Stelle im Quelltext „an der Reihe ist“, vorgelesen zu werden, gibt das Vorleseprogramm den Text aus.

Also sorgen Sie dafür, dass solche Texte per CSS aus dem sichtbaren Bereich verschoben werden. Klingt einfacher, als es ist, damit es auch in allen Browsern und Screenreader-Kombinationen funktioniert (siehe auch Diskussion unter https://github.com/h5bp/html5-boilerplate/issues/194/). Ich benutze die Lösung von HTML5 Boilerplate (die diverse Vorläufer hat) seit Jahren ohne Probleme. Sie funktioniert wie folgt:

HTML

<h2 class="visuallyhidden">Navigation</h2>

CSS

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Auf diese Weise verstecken Sie Elemente vor Sehenden, sorgen aber dafür, dass diese zugänglich sind, wenn Ihre Webseite mit einem Screenreader besucht wird oder Ihre Styles vom Besucher nicht genutzt werden.

Bilder für blinde Hörer beschreiben

Wichtige Informationen zu Bildern, die Sie exklusiv für Nutzer von Screenreadern mitgeben wollen, schreiben Sie in das alt-Attribut des Bildes:

<figure>
  <img alt="Lachendes Mädchen schaut in einen blauen Sommerhimmel" src="Sommer.jpg">
  <figcaption>Auch das Wetter hat bei unserem Urlaub mitgespielt</figcaption>
</figure>

Beachten Sie, dass der Alternativ-Text keine Wiederholung der Bildbeschreibung ist. Der Alternativ-Text informiert zusätzlich über das Motiv und die Stimmung des Bildes.

Nerven Sie Blinde nicht, indem Sie eine Visitenkarte basteln, die mit Max Muster überschrieben ist, dann Vorname: Max, Name: Muster enthält, daneben ein Bild mit der Beschreibung (figcaption) Porträt von Max Muster und demselben Text nochmal im alt– und title-Attribut.

Zusätzlicher Nutzen: steht ein Bild mal nicht zur Verfügung, wird statt des Bildes der alternativ-Text angezeigt (darum heißt der auch so). Gründe für das Fehlen von Bildern sind zahlreich, z.B.:

• ein Entwickler hat einen Fehler gemacht (z.B. falscher Dateipfad)
• bei der Übertragung ist etwas schief gegangen
• das Bild stammt liegt nicht auf dem Server, die das HTML-Dokument und obwohl das HTML-Dokument erreichbar ist, ist der Bilderserver nicht erreichbar
• das Bild liegt in einer Datenbank, die gerade nicht funktioniert
• der Besucher Ihrer Webseite ist eine Suchmaschine
• der Besucher Ihrer Webseite ist im Ausland und kann oder will sich die hohen Kosten für den Download der Bilder nicht leisten oder
• hat die Darstellung aus anderen Gründen abgeschaltet (beispielsweise um Werbebildchen zu entgehen und so das Laden von Webseiten zu beschleunigen)
• …

Mehr Möglichkeiten mit WAI-ARIA

Wenn es mal nötig und unumgänglich ist, den Sehenden noch einmal denselben Text zu präsentieren, den Sie bereits im alt-Attribut verwendet haben, gibt es eine Wunderwaffe für Barrierefreiheit: WAI-ARIA.

Damit können Sie insbesondere Screenreader-Nutzer über zahlreiche Dinge informieren (z.B. ob ein Untermenü aufgeklappt ist oder nicht). Mit dem Attribut aria-hidden haben Sie aber auch die Möglichkeit, das Vorlesen eines bestimmten Textes zu verhindern:

<p aria-hidden="true">Dieser Text ist sichtbar, wird aber von Screenreadern nicht vorgelesen.</p>

Über WAI-ARIA werde ich sicher in Zukunft noch eine Artikel schreiben – ein weites Feld, das eine genauere Betrachtung verdient.

An dieser Stelle möchte ich noch auf den Artikel von Jan Eric Hellbusch zu alternativ-Texten für Bilder hinweisen, die für Screenreader-Nutzer nicht unbedingt identisch mit dem alt-Attribut sind.

Längere Beschreibungen können Sie einem Element zuweisen, indem Sie einen Text, den Sie schon geschrieben haben (z. B. ein Hinweis in einem aside-Element) in einen logischen Bezug mit dem zu beschreibenden Element setzen.

Diesen Bezug stellen Sie über eine ID her. Das heißt, Sie geben dem informativen Text eine ID und verknüpfen diesen Text, mit dem Element, das beschrieben werden soll mittels aria-describedby:

HTML

<figure>
 <img
    alt="Lachendes Mädchen schaut in einen blauen Sommerhimmel"
    src="Sommer.jpg"
    aria-describedby="bildbeschreibung">
 <figcaption>Auch das Wetter hat bei unserem Urlaub mitgespielt</figcaption>
</figure>
<aside id="bildbeschreibung">Länger Text Lorem ipsum....</aside>

Wo bin ich?  Orientierung geben mittels aria-current

Ein sehr wichtiger Hinweis für Menschen, ist die Angabe des aktuellen Ortes oder auch einer Zeit – beispielsweise „heute“ in einem Kalender. Mit dem Attribut aria–current können Sie genau diese Information Blinden mitgeben. Es dient dazu ein Element aus einer Liste von Elementen als „das Aktuelle“ zu markieren. Das kann zum Beispiel der Eintrag in der Hauptnavigation sein, der auf die aktuell geöffnete Seite verweist oder eben „heute“ in einem Kalender. Dazu sind entsprechende Werte erlaubt:

• page (Aktuelle Seite)
• step (z.B. In einem Bestellprozess)
• location (z.B. der aktuelle Aufenthaltsort auf einer Reiseroute)
• date (z.B. Heute im Kalender)
• time (z.B. die aktuelle Uhrzeit in einem Veranstaltungsprogramm)
• true (das Element ist tatsächlich das aktuelle Element)
• false (Standard-Wert – das Element ist nicht das aktuelle Element einer Liste)

Jeder Wert ungleich „true“ oder „false“ wird von Screenreadern interpretiert und der Hörer bekommt einen sinnvollen Text angesagt – in der Sprache, die im HTML-Attribut lang angegeben ist.