Im letzten Herbst habe ich im Beitrag Mehr als nur Semantik über Nutzungsszenarien für die HTML5-Elemente mit einer Rolle eines Landmarks geschrieben. Seinerzeit hatte ich die Beispiele mit Internet Explorer und dem Screenreader JAWS vorgestellt. Obwohl inzwischen die Unterstützung von Landmarks im Internet Explorer kaum zu beanstanden ist, so ist die Unterstützung für Landmarks immer noch uneinheitlich in den verschiedenen Browser-Screenreader-Kombinationen.
Hintergrundinformationen zu Landmarks sind in den folgenden, aufeinander aufbauenden Beiträgen nachzulesen:
Getestete Browser und Screenreader
Auf Windows 10 wurden die folgenden Browser getestet:
Internet Explorer 11,
Firefox 47 und
Chrome 51
Wer in der Browserauflistung Microsoft Edge vermisst: In Edge werden keinerlei Strukturen – auch keine Regionen – erkannt.
Folgende Screenreader wurden getestet:
JAWS 17
Window Eyes 9.2
NVDA 2016.2 und
Cobra 11
ChromeVox 53.0 (nur auf Google Chrome)
Darüber hinaus wurde Safari mit
VoiceOver auf
iOS 9.3 getestet.
Testszenarien
Es wurden drei Testseiten getestet:
- Alle 8 Rollen für Regionen (application, banner, complementary, contentinfo, form, main, navigation und search) werden mit dem role-Attribut zugewiesen [Testseite mit ARIA].
- Die 5 Rollen, die mit HTML zugewiesen werden können (
<aside>
,<footer>
,<header>
,<main>
und<nav>
), werden mit HTML zugewiesen [Testseite mit HTML5]. - Da die Ergebnisse für die Rollenzuweisung per HTML nicht überall überzeugen, wurden die HTML-Elemente mit expliziter Zuweisung der ARIA-Rollen ebenfalls getestet [Testseite mit HTML5 und ARIA].
In den Screenreader-Browser-Kombinationen wurde getestet:
- ob die einzelnen Regionen per Tastatur ansteuerbar sind und
- ob Nutzer erfahren, um welche Art von Region es sich dabei handelt.
Explizite Zuweisung der Rollen mit dem role-Attribut
Es gibt insgesamt 8 verschiedene landmark roles, die mit dem role-Attribut beispielsweise einem <div>
zugewiesen werden können, z.B.:
<div role="main">
Hauptinhalte der Seite
</div>
Strukturelle Navigation
Die folgende Tabelle zeigt, welche Screenreader in welchen Browsern die Ansteuerung von explizit zugewiesenen Rollen per Tastatur erlauben:
Rolle | ![]() |
![]() |
![]() |
![]() |
||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
application |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
banner |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
contentinfo |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
complementary |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
form |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
main |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
navigation |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
search |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Hinweise:
bedeutet in diesem Fall, dass die Regionen mit der Screenreaderfunktion zwar angesprungen, aber semantisch nicht identifiziert werden.
- In Chrome und in Firefox erkennt NVDA die Rolle application nicht.
- VoiceOver erkennt die Rolle form nicht.
- JAWS 17 in Verbindung mit Firefox springt bei role=“application“ sofort in den Anwendungsmodus (auch wenn dort keine fokussierbaren Inhalte vorkommen).
Semantische Identifizierung
Die Screenreader identifizieren explizit zugewiesener Regionen wie folgt:
JAWS 17
application |
Anwendung |
---|---|
banner |
Banner |
contentinfo |
Inhaltsverzeichnis |
complementary |
Ergänzende Information |
form |
Formular |
main |
Haupt |
navigation |
Navigation |
search |
Suche |
WindowEyes
application |
Anwendung |
---|---|
banner |
– |
contentinfo |
Inhaltsorientierungspunkt |
complementary |
Ergänzender Orientierungspunkt |
form |
Orientierungspunkt Formular |
main |
Orientierungspunkt Hauptorientierungspunkt |
navigation |
Orientierungspunkt Navigationsorientierungspunkt |
search |
Suchorientierungspunkt |
NVDA
application |
– |
---|---|
banner |
Sprungmarke Logo |
contentinfo |
Sprungmarke Inhaltsübersicht |
complementary |
Sprungmarke Ergänzung |
form |
Sprungmarke Formular |
main |
Sprungmarke Haupt |
navigation |
Sprungmarke Navigation |
search |
Sprungmarke Suche |
ChromeVox
application |
App |
---|---|
banner |
Banner |
contentinfo |
Inhaltsinfo |
complementary |
Ergänzend |
form |
Formular |
main |
Hauptinhalt |
navigation |
Navigation |
search |
Suchen |
Cobra
application |
Anwendung |
---|---|
banner |
Banner |
contentinfo |
Info |
complementary |
Ergänzung |
form |
– |
main |
Inhalt |
navigation |
Navigationsbereich |
search |
Suchbereich |
VoiceOver
application |
Programm Orientierungspunkt |
---|---|
banner |
Banner Orientierungspunkt |
contentinfo |
Inhaltsinformationen Orientierungspunkt |
complementary |
Komplementär Orientierungspunkt |
form |
– |
main |
Inhalt Orientierungspunkt |
navigation |
Orientierungspunkt |
search |
Suche Orientierungspunkt |
Implizite Zuweisung der Rollen mit HTML
5 der acht landmark roles können mit HTML-Elementen zugewiesen werden:
<aside>
(entspricht role=”complementary”)<footer>
(contentinfo)<header>
(banner)<main>
(main)<nav>
(navigation)
Strukturelle Navigation
Die folgende Tabelle zeigt, welche Screenreader in welchen Browsern die Ansteuerung von implizit zugewiesenen Rollen per Tastatur erlauben:
Rolle | ![]() |
![]() |
![]() |
![]() |
||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
<aside> |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
<footer> |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
<header> |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
<main> |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
<nav> |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Hinweise
bedeutet in diesem Fall, dass die Regionen mit der Screenreaderfunktion zwar angesprungen, aber semantisch nicht identifiziert werden.
- Im Internet Explorer erkennt NVDA 2016.2 keine Regionen.
- Window Eyes erkennt
<aside>
nicht. - ChromeVox erkennt
<main>
nicht. - VoiceOver kann
<footer>
nicht.
Semantische Identifizierung
Die semantische Identifizierung bei der impliziten Zuweisung von Rollen weicht von der Identifizierung mit per ARIA zugewiesenen Rollen ab. Implizit zugewiesene Regionen werden wie folgt identifiziert:
JAWS 17
<aside> |
Ergänzung |
---|---|
<footer> |
Inhaltsangabe |
<header> |
Banner |
<main> |
Hauptregion |
<nav> |
Navigation Region |
WindowEyes
<aside> |
aside |
---|---|
<footer> |
Fußzeile |
<header> |
– |
<main> |
Haupt |
<nav> |
Navigation |
NVDA
<aside> |
Sprungmarke Ergänzung |
---|---|
<footer> |
Sprungmarke Inhaltsübersicht |
<header> |
Sprungmarke Logo |
<main> |
Sprungmarke Haupt |
<nav> |
Sprungmarke Navigation |
ChromeVox
<aside> |
Aside-Element |
---|---|
<footer> |
Footer-Element |
<header> |
Header-Element |
<main> |
– |
<nav> |
Navigation |
Cobra
<aside> |
– |
---|---|
<footer> |
– |
<header> |
– |
<main> |
Inhalt |
<nav> |
– |
VoiceOver
<aside> |
Komplementär Orientierungspunkt |
---|---|
<footer> |
– |
<header> |
Banner Orientierungspunkt |
<main> |
Inhalt Orientierungspunkt |
<nav> |
Orientierungspunkt |
Ergänzung der HTML-Elemente mit dem role-Attribut
Zur Kontrolle wurden die fünf HTML-Elemente für Regionen mit einer expliziten Rolle ergänzt, z.B.
<header role="banner">
…
</header>
Die strukturelle Navigation sieht deutlich besser aus:
Rolle | ![]() |
![]() |
![]() |
![]() |
||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
<aside> + role="complementary" |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
<footer> + role="contentinfo" |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
<header> + role="banner" |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
<main> + role="main" |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
<nav> + role="navigation" |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Hinweis: Die Semantische Identifizierung entspricht der Identifizierung der explizit zugewiesener Regionen.
Schlussfolgerung
Der Einsatz von HTML-Elementen wird inzwischen in sehr vielen Browser-Screenreader-Kombinationen unterstützt. Es sind deutliche Verbesserungen gegen über früheren Untersuchungen festzustellen. Im Allgemeinen kann bei der impliziten Zuweisung von Rollen für Regionen von einer „zugänglichkeitsunterstützenden Technik“ gesprochen werden.
Die Tests haben aber auch gezeigt, dass die zusätzliche Berücksichtigung eines role-Attributs die Unterstützung von Regionen eindeutig verbessert und eine fast vollständig übergreifende, gleiche Behandlung erwirkt.
Es wird daher nach wie vor empfohlen, die implizit zugewiesenen Rollen bei den fünf getesteten HTML-Elementen durch explizit zugewiesene Rollen zu ergänzen.