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.