Ausschweifende Informationen
(Verbosity)

Hintergrund: Linearen Aufbereitung durch Screen Reader

Um die Problematik der wortreichen Wahrnehmung zu verstehen, muss die Darstellungsweise von Inhalten durch Screen Reader bekannt sein. Im Folgenden wird die Eigenart dieser Darstellungsweise exemplarisch aufgearbeitet.

Beispiel: Positionsangaben

Sehende Menschen können eine Vielzahl an Informationen zu einer Webseite und deren Elementen parallel wahrnehmen. Hier ein Beispiel, wie die visuelle Wahrnehmung auf dieser Webseite gleich mehrere Informationen in einem Aufwaschen liefern kann:

In dieser Wahrnehmung sind eine Reihe von semantischen Zusatzinformationen enthalten, die von einem Screen Reader für die lineare Darstellung an eine Sprachausgabe oder Braillezeile aufbereitet werden:

1. Die Webseite verfügt über einen Kopfbereich.
2. Im Kopfbereich befindet sich ein Navigationsbereich mit Positionsangaben.
3. Die Positionsangaben sind eine Liste von Elementen.
4. Das Element mit dem Text „Assistierende Technologien“ ist ein Link.

Beim Erarbeiten der Webseite ist von einer Sprachausgabe etwa folgender Text zu hören:

Damit ein Screen Reader diese semantischen Informationen korrekt darstellen kann, müssen die entsprechenden HTML-Tags natürlich vorhanden sein.

Notwendige Informationen

Das vorangegangene Beispiel illustriert, wieviel Text durch einen Screen Reader bereitgestellt werden muss, um die nötigen semantischen Informationen zu einem Element im Kontext hinreichend wiederzugeben. Was visuell bei einem sauberen Design intuitiv und spontan erkannt wird, erfordert bei der Nutzung eines Screen Readers die Konzentration auf textliche Informationen.

Auch wenn dieser Wortreichtum ungewohnt erscheint, ist er doch erforderlich und durch die WCAG Erfolgskriterien abgedeckt:

1.3.1 Information und Beziehungen

Der visuellen Darstellung muss eine korrekte semantische Darstellung entsprechen.

1.3.6 Technisches Präzisieren des Verwendungszwecks

Konformitätsstufe AAA

Seitenregionen sind entsprechend dem HTML-Standard vorhanden.

2.4.6 Überschriften und Beschriftungen

Beschriftungen beschreiben präzise den Inhalt des Steuerelements.

4.1.2 Name, Rolle, Wert

Komponenten müssen technisch korrekt und ausreichend mit einem barrierefreien Namen, der jeweiligen Rolle und gegebenenfalls dem präzisen Wert versehen sein.

Optionale wortreiche Informationen

Durch technische Maßnahmen können Informationen bereitgestellt werden, die lediglich bei der Verwendung von einem Screen Reader ausgegeben werden. Solche Maßnahmen sollten nur sehr behutsam eingesetzt werden, da sie möglicherweise die Nutzungsfreundlichkeit beeinträchtigen oder von assistierenden Technologien nicht zuverlässig umgesetzt werden. Hier eine kleine Auswahl:

Explizite Zusatzinformationen durch CSS-Anweisungen

Eine zuverlässige Methode zur exklusiven Darstellung von Informationen für Screen Reader ist das Verbergen eines Elements vom Bildschirm. Dies wird durch CSS-Anweisungen realisiert, typischerweise in einer CSS-Klasse mit dem Namen sr-only.

Beschriftung von Seitenregionen

Mit den Attributen aria-label und aria-labelledby können etwa unterschiedliche Navigationsbereiche oder andere gruppierte Regionen für Screen Reader eine inhaltliche Beschreibung erhalten.

Überschreiben der Rollenbeschreibung

Mit dem Attribut aria-roledescription kann die Standardbezeichnung einer Rolle geändert werden. Dessen Umsetzung ist jedoch sehr eingeschränkt.

Problematischer Wortreichtum

Hier eine Sammlung von absolut verzichtbarem oder zu gut gemeinten technischen und redaktionellen Vorkehrungen:

Unnötige Spezialbeschriftung

Mit dem Attribut aria-label kann die vorhandene Beschriftung eines Steuerelements überschrieben werden. Der Code kann beispielsweise folgendermaßen aussehen:

<button
  aria-label="Drücken Sie Eingabe, um die Suche zu starten!" >
  Suchen
</button>

Dass es sich hierbei um einen Schalter handelt, wird von einem Screen Reader automatisch erkannt und wiedergegeben. Die Nutzungsweise eines Schalters kann als bekannt vorausgesetzt werden. Die Beschriftung „Suchen“ beschreibt den Schalter ausreichend. Der Einsatz von aria-label ist also hier unnötig und stört zudem durch die wortreiche Beschriftung.

Wer über einen Screen Reader verfügt, kann dieses Verhalten im Folgenden testen:

Es ist etwa folgendes zu hören:

Drücken Sie Eingabe, um die Suche zu starten! Schalter

Nutzungserfahrung beachten

Komponenten, die mit HTML-Elementen und Attributen hinreichend versehen und verständlich formuliert sind, benötigen in der Regel keine spezielle Aufbereitung für assistierende Technologien. Ein gut gemeinter Mehraufwand führt vielfach zu unnötigem Wortreichtum und damit zu einer verschlechterten Nutzungserfahrung.

Was an zusätzlichem Inhalt und technischen Vorkehrungen notwendig ist, kann in Einzelfällen von den Zielgruppen abhängen. Übersteigt die Standardbeschreibung durch Screen Reader die kognitiven Fähigkeiten der meisten Nutzer*innen, könnten besondere Maßnahmen angemessen sein. Solche außergewöhnliche Bedürfnisse sollten durch Methoden zur Optimierung der Nutzungsfreundlichkeit mit Zielgruppen abgeklärt werden.