Landmarks mit ARIA und HTML  

Stand der Screenreader-Unterstützung in 2016

  • veröffentlicht am
  • von Jan Hellbusch

Luftaufnahme von Feldern die mit Landmarks beschriftet sind.

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:

  1. Alle 8 Rollen für Regionen (application, banner, complementary, contentinfo, form, main, navigation und search) werden mit dem role-Attribut zugewiesen [Testseite mit ARIA].
  2. Die 5 Rollen, die mit HTML zugewiesen werden können (<aside>, <footer>, <header>, <main> und <nav>), werden mit HTML zugewiesen [Testseite mit HTML5].
  3. 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:

  1. ob die einzelnen Regionen per Tastatur ansteuerbar sind und
  2. 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:

Unterstützung expliziter Rollen
Rolle Internet Explorer Chrome Firefox Safari
Jaws 17 WindowEyes NVDA Cobra Jaws 17 WindowEyes NVDA chromeVox Cobra Jaws 17 WindowEyes NVDA Cobra Voiceover
application Ja Ja Nein Ja Ja Ja Nein Ja Nein Ja Ja Nein Ja Ja
banner Ja Teilweise Ja Ja Ja Ja Teilweise Ja Nein Ja Ja Teilweise Ja Ja
contentinfo Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja
complementary Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja
form Ja Ja Ja Nein Ja Ja Ja Ja Nein Ja Ja Ja Nein Nein
main Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja
navigation Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja
search Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja

Hinweise:

  • Teilweise 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 Internet Explorer Chrome Firefox Safari
Jaws 17 WindowEyes NVDA Cobra Jaws 17 WindowEyes NVDA chromeVox Cobra Jaws 17 WindowEyes NVDA Cobra Voiceover
<aside> Ja Nein Nein Nein Ja Nein Ja Ja Nein Ja Nein Ja Nein Ja
<footer> Ja Ja Nein Nein Ja Ja Ja Ja Nein Ja Ja Ja Nein Nein
<header> Ja Teilweise Teilweise Nein Ja Teilweise Teilweise Ja Nein Ja Teilweise Ja Nein Ja
<main> Ja Ja Nein Ja Ja Ja Ja Nein Nein Ja Ja Ja Ja Ja
<nav> Ja Ja Nein Nein Ja Ja Ja Ja Nein Ja Ja Ja Nein Ja

Hinweise

  • Teilweise 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 Internet Explorer Chrome Firefox Safari
Jaws 17 WindowEyes NVDA Cobra Jaws 17 WindowEyes NVDA chromeVox Cobra Jaws 17 WindowEyes NVDA Cobra Voiceover
<aside> + role="complementary" Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja
<footer> + role="contentinfo" Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja
<header> + role="banner" Ja Teilweise Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja
<main> + role="main" Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja
<nav> + role="navigation" Ja Ja Ja Ja Ja Ja Ja Ja Nein Ja Ja Ja Ja Ja

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.

abgelegt in der Kategorie Barrierefreies Webdesign

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert