Assistierende Technologien
Symbolgrafik Barrierefreiheits-Person stützt sich auf AT. Das T dient als Tisch.

Ausschweifende Informationen
(Verbosity)

Extra Vorkehrungen für Screen Reader sind bei korrektem HTML meist unnötig und sollten nur sorgfältig reflektiert eingesetzt werden. Redaktionelle Formulierungen mittels technischer Anweisungen sind oft zu gut gemeint und eine Verschlimmbesserung.

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: Standortangaben

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:

Im Kopfbereich befinden sich Standortangaben. Zur übergeordneten Seite gelange ich durch einen Klick auf „Assistierende Technologien“.

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 Standortangaben.
  3. Die Standortangaben 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:

Banner

Standort Navigation Region

Liste mit 4 Einträgen

Besuchter Link Startseite

[…]

Link Assistierende Technologien

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.
Ü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.