Informationen, Semantik & Feedback

Viele Informationen, die für die Interaktion mit Benutzeroberflächen wichtig sind (z. B. die Überschriftenstruktur), werden über visuelle Hinweise vermittelt. Semantisches Markup macht diese für Benutzer von Assisitiven Technologien wie Screenreadern zugänglich. Deshalb wird dieser Aspekt oft auch als Sicherstellung der Kompatibilität mit Assisitiven Technologien gleichgesetzt.

Die anspruchsvollsten Anforderungen an barrierefreie Inhalte betreffen die Kompatibilität mit komplexen assistiven Technologien wie Screenreader- und Sprachsteuerungssoftware.

In beiden Fällen müssen alle relevanten impliziten semantischen Informationen und Eigenschaften explizit gemacht werden, damit die Kommunikation zwischen Menschen und Maschine (z. B. Screenreader) gelingt.

Regions

Verschiedene Regionen oder Bereiche der Benutzeroberfläche, wie z. B. Banner/Kopfzeile, Navigation, Hauptinhalt oder Fußzeile, müssen sprachlich explizit benannt sein. Meistens sind diese aufgrund von Konventionen nur anhand von visuellen Hinweisen/Gestaltungseigenschaften zu erkennen.
Das Gleiche gilt für die semantische Struktur von Textinhalten. Dies betrifft vor allem Überschriftenstrukturen, Listen und Tabellen.
Buttons/Schalter dürfen nicht nur aufgrund ihrer visuellen Gestaltung als solche erkennbar sein. Das Gleiche gilt für Icons.
Formularfelder und Formularfeldgruppen müssen korrekt mit den jeweiligen Bezeichnungen verknüpft sein, damit klar ist, welche Eingaben wo erwartet werden.

Interaktive Komponenten (Widgets)

Schwieriger wird die Frage der expliziten semantischen Information im Zusammenhang mit geskripteten interaktiven Elementen wie

Modale Dialoge / Pop-up-Fenster
(Mega-) Dropdown-Menüs
Akkordeons, Tab-Listen und einfache Drop-Down-Elemente
Karussells
Schieberegler / Schiebereglerleisten
Tooltips
und viele mehr.

Für Webinhalte gilt daher die allgemeine Regel, dass natives HTML interaktiven Komponenten mit Skripten vorzuziehen ist, wo immer möglich. Die überwiegende Mehrheit der HTML-Komponenten hat eine semantische Bedeutung und kann von Bildschirmlesegeräten korrekt interpretiert werden.

Der WAI-ARIA-Standard des W3C erlaubt es auch, skriptgesteuerte Komponenten mit semantischen Informationen zu ergänzen. Mit Hilfe von WAI-ARIA-Attributen können Rolle (Worum geht es bei einem Widget?), Eigenschaften (z.B. Minima und Maxima von Schiebereglern) und Zustände (z.B. aktuelle Schiebereglerposition) "manuell" expliziert werden.

Feedback

Gerade bei Interaktionen ist es extrem wichtig, dass Zustandsänderungen immer explizit als Feedback zurückgegeben werden und nicht nur visuell. → ARIA-Live-Regionen.

Search engine optimization (SEO)

Abschließend sei noch erwähnt, dass Suchmaschinen enorm von expliziten semantischen Inhalten profitieren. Daraus folgt: Zugängliche Inhalte sind SEO-freundliche Inhalte.

Semantik - kurz getestet

Regions, Landmarks und Überschriften (Container)

Untersuchen Sie, ob die einzelnen Bereiche einer typischen Ansicht/Seite eindeutig und sinnvoll gekennzeichnet sind. Hierfür benötigen wir zwei äußerst wertvolle Werkzeuge:
1. externe Seite H123-Bookmarklet: Dieses Tool ermöglicht eine übersichtliche Darstellung der Überschriftenstruktur einer Webseite.
2. externe Seite Landmarks Extension, (externe Seite auf Github) : Dieses Tool bietet einen Überblick über die auf einer Website verfügbaren Landmarks (HTML5-Landmarks und WAI-ARIA-Landmark-Rollen).
Überprüfen Sie, ob die verschiedenen Seitenbereiche durch Landmarks und/oder Überschriften richtig strukturiert sind. Dies erfordert einige Erfahrung.
1. Idealerweise werden die verschiedenen Seitenbereiche durch Landmarks mit zusätzlichen Labels (aria-label, aria-describedby) gekennzeichnet, während im (Haupt-)Inhaltsbereich Überschriften verwendet werden. Vgl. die WAI-Seiten.

Überschriften (Inhalt / Content)

Konzentrieren Sie sich auf die Überschriftenstruktur im eigentlichen Inhaltsbereich; ohne Kopf- und Fußzeilen, Seitenspalten, Navigationsbereiche, etc. Hierfür verwenden wir wieder das Bookmarklet H123.

Beginnt der Hauptinhalt mit einer Überschrift auf H1-Ebene? Werden Überschriftenebenen übersprungen?
Beschreiben die einzelnen Überschriften den nachfolgenden Inhalt prägnant und präzise? Folgt auf jede Überschrift der eigentliche Inhalt in Form von Text, Bildern, Tabellen oder Medieninhalten?

Listen und Tabellen

Die Anforderungen an die Zugänglichkeit von Listen und Datentabellen verlangen, dass diese in semantisch korrekter Weise beschriftet / getaggt sind. Der einfachste Weg, dies zu überprüfen, ist die Verwendung von Browser-Entwickler-Tools zur Quellcode-Inspektion.

Auflistungen: SInd alle Auflistungen korrekt als Listen mit <ul> oder <ol> und <li> Elementen gekennzeichnet? Besonderes Augenmerk sollte auf Linklisten gelegt werden, vor allem in Navigationsbereichen. Dies ist wichtig für Screenreader-Nutzerinnen, um abschätzen zu können, wie viele Elemente in einer Liste folgen werden.
Tabellen: Verfügt die Tabelle über Tabellenüberschriften <th> in mindestens einer Dimension? Dies ist wichtig, damit Screenreader-Nutzer die Bedeutung der Daten in einer Tabellenzelle zuordnen können.

Formulare

Bei Formularen ist es wichtig, dass Formularfelder korrekt mit ihren Bezeichnungen (labels) verknüpft sind, z. B. durch for-id-Verknüpfung oder Verschachtelung (<label>< input ...></label>). Beim Anklicken der Beschriftung muss der Tastaturfokus auf das Formularfeld springen und der Cursor sollte dort blinken.
Eine weitere wichtige Anforderung an Formulare ist, dass Fehlermeldungen mit den jeweiligen Formularfeldern verknüpft sind (z.B. via aria-describedby). Dieser Aspekt lässt sich am einfachsten mit einem Screenreader testen.

Javascript-Widgets

Die Semantik interaktiver, skriptgesteuerter Komponenten, so genannter Widgets (wie Overlays, Dropdown-Elemente oder Slider), wird direkt mit Screenreadern getestet. Dieser Prozess beinhaltet die Identifizierung des Komponententyps, das Verstehen seines Zwecks und den Zusatnd seiner aktuellen Einstellungen und wie man sie ändern kann.