Prüfkriterium 9.1.3.3: Sensorische Merkmale

Riechen, Schmecken, Tasten, Sehen und Hören – für viele Menschen gehören diese mal mehr, mal weniger stark ausgeprägten Sinneswahrnehmungen zum täglichen Leben dazu. Sie sind Teil der eigenen Normalität. Manch einer sehnt sich nach der Erfindung des Fernsehers, der auch Geruch und Geschmack übertragen kann… doch bisher funktioniert die digitale Welt vor allem über den Hör- und Sehsinn.

Nun verfügt nicht jeder Mensch über diese beiden Sinne, was bei der Entwicklung und Umsetzung digitaler Angebote mitberücksichtig werden muss. Insbesondere blinde Menschen können beispielsweise mit Verweisen wie „Klicken Sie auf den ovalen Button“, „Füllen Sie das rechte Feld aus“ oder „Mehr Informationen finden Sie im rot eingerahmten Kasten“ wenig anfangen.

Damit es hier zu keiner Hürde kommt, ist diesen sensorischen Merkmalen ein eigener Prüfschritt in der Barrierefreien-Informationstechnik-Verordnung (BITV) gewidmet: Es handelt sich um Prüfschritt 9.1.3.3 „Ohne Bezug auf sensorische Merkmale nutzbar“. Er verweist auf das Erfolgskriterium 1.3.3 der Web Content Accessibility Guidelines (WCAG).

Warum ist dieser Prüfschritt wichtig?

Geschätzte 1,2 Millionen Menschen in Deutschland verfügen über eine Sehbehinderung oder sind blind. Für sie funktionieren Websites anders als für Sehende. Formen, Farben, Größen oder Positionsangaben von bestimmten Seiteninhalten sind für sie nicht oder nur eingeschränkt wahrnehmbar.

Zwar würde ein Screenreader unser obiges Beispiel „Klicken Sie auf den ovalen Button“ dem blinden Menschen vorlesen, doch weiß er dann dennoch nicht, um welchen Button es sich genau handelt. Er darf davon ausgehen, dass es mehrere Buttons auf der Seite gibt. Steuert er sie an, sagt ihm der Screenreader jedoch nur, dass es sich um eine Schaltfläche handelt und wie diese beschriftet ist. Der Screenreader sagt nichts über dessen Styling. Insofern bleibt einer blinden Person nur das Trial-and-Error-Prinzip, um zum Ziel zu kommen.

Anforderungen des Prüfschritts

Für blinde oder stark seheingeschränkte Menschen ist es wichtig, dass Informationen nicht ausschließlich über sensorische Merkmale wie zum Beispiel die Form oder Position vermittelt werden. Für sie muss eine Webseite auch ohne Anwendung des Stylesheets funktionieren und zugänglich sein. Dies lässt sich umsetzen, indem zusätzlich zum sensorischen Merkmal auch die dazugehörige Überschrift oder ein entsprechendes Lable genannt wird. Unser Beispiel könnte dann lauten: „Klicken Sie auf den ovalen Button ‚Unser Ökostrom‘.“ Damit ist die Zuordnung auch ohne Berücksichtigung des Designs eindeutig möglich und die Formangabe lediglich ein Zusatz für Sehende.

Wichtige Hinweise zur Umsetzung

Positionsangaben mit Bezug zum Layout

Auch vage Ortsangaben wie „oben“, „rechts“ oder „unter dem Bild“ sind problematisch, wenn keine weitere Orientierungshilfe durch Textbezeichnungen gegeben wird. Da die visuelle Positionierung je nach Bildschirmgröße, Zoomstufe oder Hilfstechnologie stark variieren kann, sind solche Angaben nicht zuverlässig barrierefrei. Was auf einem großen Bildschirm rechts ist, bricht auf einem kleineren durch das responsive Design wahrscheinlich nach unten um.

Hinzukommt, dass für Screenreader-Nutzende Positionsangaben wie links, rechts, oben, unten beziehungsweise unter nicht aussagekräftig sind. Sie bewegen sich mit der Tabulatortaste durch eine Webseite und erhalten ihre Informationen somit linear im Sinne von vor und zurück und nicht räumlich.

So wie bei Linktexten (mehr zum Thema barrierefreie Links und Linktexte finden Sie in unserem Fachartikel und dem Prüfschritt 9.2.4.4 „Aussagekräftige Linktexte“) sollten auch nicht verlinkte Textinhalte das Wort „hier“ im Sinne einer Positionsangabe eher vermeiden.

Beispiel:

• Statt zu schreiben „Hier finden Sie die Ergebnisse der Arbeitsgruppe“ sollte möglichst konkret auf das Format eingegangen werden, in dem eine Information bereitgestellt wird. Oder auf dazugehörige Überschriften, Titel und Label verwiesen werden.
• Besser: „In der folgenden Tabelle finden Sie die Ergebnisse der Arbeitsgruppe“ Diese Angabe ist konkreter und bezieht sich auf die Reihenfolge, die auch für Screenreader-Nutzende eindeutig ist.

Bildbeschreibungen für komplexe Grafiken

Der Prüfschritt gilt auch für Bildbeschreibungen. Insbesondere bei Diagrammen oder anderen Infografiken muss auf Eindeutigkeit geachtet werden.

Das folgende, fiktive Diagramm „Deutsche Single- und Familienhaushalte (in Millionen) mit neu angeschafften Haustieren in den Jahren 2020 und 2025“ soll uns als Beispiel dienen:

Nicht barrierefreie Bildbeschreibung des Diagramms:

„Balkendiagramm: Auf der x-Achse sind die Jahre 2020 und 2025 eingetragen. Die y-Achse zeigt die Werte in Millionen von 0 bis 6. Im Jahr 2020 haben sich 5 Millionen Singlehaushalte und 2 Millionen Familienhaushalte ein Haustier zugelegt. Im Jahr 2025 liegt der blaue Balken bei 3,5 und der grüne bei 3 Millionen.“

Aus dieser Bildbeschreibung geht nicht hervor, wofür die beiden Balken – der blaue und der grüne – jeweils stehen.

Barrierefreie Bildbeschreibung des Diagramms:

„Balkendiagramm: Auf der x-Achse sind die Jahre 2020 und 2025 eingetragen. Die y-Achse zeigt die Werte in Millionen von 0 bis 6. Im Jahr 2020 haben sich 5 Millionen Singlehaushalte und 2 Millionen Familienhaushalte ein Haustier zugelegt. Im Jahr 2025 sind die Zahlen bei den Singlehaushalten auf 3,5 Millionen gesunken und die der Familienhaushalte auf 3 Millionen angestiegen.“

Diese Bildbeschreibung ist eindeutig und funktioniert ohne Nennung der Farben.

Fazit: Sagen Sie, was gemeint ist – nicht, wie es aussieht

So wie das Prüfkriterium 9.1.4.1 „Ohne Farbe nutzbar“ dient auch das Prüfkriterium zu den sensorischen Merkmalen der Vermeidung von Hürden für blinde oder seheingeschränkte Menschen. Informationen müssen auch ohne Einbezug des Designs und Layouts für diese Zielgruppe zugänglich sein. Dies gelingt durch farb- und positionsunabhängige Angaben, die sich stattdessen auf die konkreten Beschriftungen von Inhalten beziehen.

Autorin: Stiftung Pfennigparade