Neues in ARIA 1.1 #2 Mit aria-current das aktuelle Element anzeigen

Eine Breadcrumb; der letzte Eintrag ist mit current, aktueller Standort, aktuelles Objekt und aktuelle Seite beschriftet.

Accessible Rich Internet Applications (ARIA) 1.1 steht vor der Tür und es gibt einige Änderungen und Neuerungen gegenüber ARIA 1.0. Ein neues globales Attribut ist aria-current, das Hilfsmitteln wie Screenreadern das aktuelle Element in einem Satz von verwandten Elementen anzeigen soll.

Das aria-current-Attribut kann die folgenden Werte annehmen:

  • „page“ repräsentiert die aktuelle Seite innerhalb eines Satzes von Webseiten (z.B. in einer Pagination, in der die aktuelle Seite visuell hervorgehoben wird),
  • „step“ repräsentiert den hervorgehobenen Schritt in einem mehrschrittigen Prozess,
  • „location“ repräsentiert die aktuelle Lokation in einer Umgebung oder einem Kontext (z.B. die aktuelle Seite in einer Breadcrumb, der aktuelle Standort auf einer Karte oder eine hervorgehobene Grafik in einem Flow-Chart),
  • „date“ zeigt das aktuelle Datum in einem Satz von Datumsangaben (z.B. in einem Kalender) an und
  • „time“ repräsentiert die aktuelle Zeit in einem Satz von Zeitangaben (z.B. in einem Fahrplan).

Darüber hinaus kann der Wert „true“ für das aktuelle Element in einem Satz von Elementen verwendet werden. Wenn das Attribut einen ungültigen Wert besitzt, dann sollen Hilfsmittel den Wert „true“ ebenfalls annehmen. Ist das aria-current-Attribut gesetzt, so sollen Screenreader und andere Hilfsmittel das Element semantisch identifizieren (z.B. mit „Aktuelle Seite“ für aria-current=“page“).

Wann aria-current eingesetzt werden soll

Der vorgesehene Einsatz von aria-current ist bei einer visuellen Hervorhebung. Typische Fälle sind die aktuelle Seite in der Navigation oder das heutige Datum in einem Kalender, die beide üblicherweise durch Farbe und/oder Fettung erfolgen. Dabei soll innerhalb eines Satzes von verwandten Inhalten das aria-current-Attribut nur einmal gesetzt werden.

Das aria-current-Attribut ist keinesfalls mit dem aria-selected-Attribut zu verwechseln. Wenn in einer Reiternavigation ein Reiter ausgewählt wird, dann ist aria-selected einzusetzen. Obwohl es Situationen geben könnte, wo sowohl aria-selected als auch aria-current angezeigt werden müssten, so wird normalerweise entweder aria-selected oder aria-current in Frage kommen.

Unterstützung

Die Unterstützung für aria-current ist leider noch nicht sehr verbreitet, wie die untenstehende Tabelle zeigt. Die Testseite bietet Beispiele für die Werte „page“, „step“, „location“, „date“, „time“ und „true“. Es wurde lediglich getestet, ob die Screenreader den aktuellen Eintrag durch Text identifizieren.

Auf Windows 10 wurden die folgenden Browser getestet:

  • Internet Explorer 11,
  • Edge 38.14,
  • Firefox 51 und
  • Chrome 56

Folgende Screenreader wurden getestet:

  • JAWS 18,
  • Cobra 11.1,
  • Window Eyes 9.5.4.0,
  • NVDA 2016.3,
  • Narrator und
  • ChromeVox 53 (nur auf Chrome).

Darüber hinaus wurde Safari mit VoiceOver auf iOS 10.2.1 getestet.

Unterstützung von aria-current
Attribute Internet Explorer Chrome Firefox Safari Microsoft Edge
Jaws 18 WindowEyes NVDA Cobra Microsoft Narrator Jaws 18 WindowEyes NVDA chromeVox Cobra Microsoft Narrator Jaws 18 WindowEyes NVDA Cobra Microsoft Narrator Voiceover Microsoft Narrator NVDA
aria-current="page" Ja Nein Nein Nein Nein Ja Nein Nein Nein Nein Nein Ja Nein Nein Nein Nein Ja Nein Nein
aria-current="step" Ja Nein Nein Nein Nein Ja Nein Nein Nein Nein Nein Ja Nein Nein Nein Nein Ja Nein Nein
aria-current="location" Ja Nein Nein Nein Nein Ja Nein Nein Nein Nein Nein Ja Nein Nein Nein Nein Ja Nein Nein
aria-current="date" Ja Nein Nein Nein Nein Ja Nein Nein Nein Nein Nein Ja Nein Nein Nein Nein Nein Nein Nein
aria-current="time" Ja Nein Nein Nein Nein Ja Nein Nein Nein Nein Nein Ja Nein Nein Nein Nein Nein Nein Nein
aria-current="true" Ja Nein Nein Nein Nein Ja Nein Nein Nein Nein Nein Ja Nein Nein Nein Nein Ja Nein Nein

Hinweise:

  • VoiceOver unterstützt aria-current bei Links. Sobald aria-current z.B. auf ein <li> gesetzt wird – etwa im den Beispielen mit dem Wert „step“ oder „true“ – wird aria-current nicht mehr unterstützt.
  • JAWS 18 unterstützt aria-current=“step“ auf das <a href> oder <li> , aber nicht auf das <em> (siehe Beispiel mit „step“).
  • Aufgefallen ist auch, dass aria-current=“true“ in der Kombination JAWS 16/JAWS 17 und Internet Explorer dazu führt, dass der Inhalt ignoriert wird.

Konsequenzen

Noch wird aria-current wenig unterstützt, so dass der Einsatz dieses Attributs vorerst nicht empfohlen werden kann. Um die Hervorhebung zuverlässig auch an Screenreader zu übermitteln, gibt es zwei Möglichkeiten:

1. Nicht-Verlinkung

Durch Nicht-Verlinkung eines Eintrags unterscheidet sich der aktuelle Eintrag semantisch von anderen Einträgen, weil es kein aktives Element mehr ist:

<li class="aktuell"><strong>Eintrag A</strong></li>
<li><a href="/">Eintrag B</a></li>

2. Unsichtbarer Text

Wenn die Verlinkung beibehalten werden soll, kann die uralte Technik mit unsichtbarem (aber für Screenreader zugänglichen) Text genutzt werden:

<li class="aktuell"><a href="/"><span class="unsichtbar">Aktuelle Seite: </span>Eintrag A</a></li>
<li><a href="/">Eintrag B</a></li>

Das aria-current-Attribut kann zwar zusätzlich eingesetzt werden, aber dann kennzeichnen diejenigen Screenreader, die das Attribut unterstützen, die Hervorhebung zweimal. Eine doppelte Kennzeichnung wäre im ersten Beispiel (Nicht-Verlinkung) vertretbar, aber im zweiten Beispiel (unsichtbarer Text) wäre ein doppelter Text bereits störend.

Dieser Beitrag ist Teil einer mehrteiligen Serie zu Aria 1.1:

Schreibe einen Kommentar

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