11.1 Techniques for providing accessible names and descriptions using HTML and ARIA

1. Providing accessible names in HMTL

Der accName eines Elements kann abgeleitet werden aus:

  • dem Inhalt eines Elements
  • aus einem anderen Element
  • einem Attribut

1.1 Ableitung aus dem Inhalt eines Elements

Manche Elemente beziehen den Namen aus dem Inhalt, z.B. Buttons und Links. Wenn das Label nicht visuell versteckt ist, sind Label und Name in diesem Fall gleich.

In diesem Fall werden die Buttons und Links für User mit Sprachkontrolle sehr viel zugänglicher! Ist also best practice!

<!-- Buttons -->
<button>Download PDF</button>

<!-- Links -->
<a href="https://...">Chia Seeds Pudding recipe</a>

Chia Seeds Pudding recipe

Pseudo-Elemente werden mit vorgelesen, z.B. Icons und Emojis! Aufpassen! Icons mit dem aria-hidden-Attribut verstecken, bzw. inline-svg verwenden. SVG-Icons sind am flexibelsten und einfachsten anzuwenden.

1.2 Verwendung eines anderen Elements

  • label + for und input + id
  • fieldset + legend als erstes Kindelement
  • caption + table

label/input

<!-- the for attribute associates the label with the input, making sure it is used as an accessible name -->
<label for="email">E-Mail Adresse</label>
<input type="email" id="email" autocomplete="email">

fieldset + legend

Wenn das erste Kindelement eines <fieldset>-Elements ein <legend>-Element ist, benutzt der Browser dieses als accName für die Gruppe.

caption + table

Das <caption>-Element stellt den accName für die zugehörige Tabelle dar.

Relevante Success Criteria

SC 1.3.1 Info and Relationships (Level A)
Information, structure and relationships conveyed through presentation can be programmatically determined or are available in text.

1.3 Ableitung aus einem (HTML) Attribut

  • Form controls wie <input type="submit"> wird von dessen value-Attribut hergeleitet.
  • Der accName eines Bildes wird von dessen alt-Attribut abgeleitet.
  • Das title-Attribut soll grundsätzlich nicht als accName verwendet werden! Ausnahme: <iframe> – das ist zur Zeit einerseits die verlässlichste Methode, einen accName zur Verfügung zu stellen, andererseits auch der momentan einzige unproblematische Use-Case dafür. Warum? Weil es Usability- und Accessibility-Probleme damit gibt (siehe Link unten).

2. Providing accNames using ARIA

Wann soll ARIA verwendet werden?

  • um ein Element explizit mit einem anderen Element zu verbinden, wenn es keinen nativen Weg gibt, das mit HTML zu tun
  • wenn mehrere Elemente als accName füreinander verwendet werden sollen
  • um accNames in einer existierenden Codebasis zu vergeben, ohne das Markup zu verändern

Es gibt zwei ARIA-Attribute, die verwendet werden können, um einen accName zu vergeben oder zu überschreiben:

  • aria-labelledby
  • aria-label

2.1 aria-labelledby-Attribut

Dieses Attribut wird verwendet, wenn der Text, der als accName verwendet werden soll, schon irgendwo auf der Seite präsent ist. Es akzeptiert eine oder mehrere IDs, die der Browser verwenden soll, um den accName für das Element, auf das es angewendet wird, zuzuweisen.

Beispiel: ein Heading einer Navigation-Landmark wird als accName für die Navigation verwendet.

<nav aria-labelledby="heading_ID">
  <h3 id="heading_ID">Categories</h3>
  ..
</nav>

<nav aria-labelledby="heading2_ID">
  <h3 id="heading2_ID">Find us elsewhere</h3>
  ..
</nav>
<!-- the id attribute associates the button with the input, making sure it is used as an accessible name -->
<input type="search" aria-labelledby="search-btn">
<button id="search-btn">SUCHE</button>

Das ist ein gutes Beispiel für DRY code, weil <button> eine doppelte Funktion hat: er stellt einen accName sowohl für sich selbst als auch für das <input>-Feld zur Verfügung.

aria-labelledby hat die höchste Priorität bei der Vergabe von accNames!

2.2 aria-label-Attribut

aria-label und aria-labelledby sind sehr ähnlich, aber anders als aria-labelledby, das den »berechneten« Text eines anderen Elements als accName verwendet, nimmt aria-label einen Textstring als Wert und verwendet diesen als accName.

<!-- This button is treated as empty;
 it gets its accName from the aria-label attribute; otherwise, it would not have one. -->
<button aria-label="Settings">
  <i></i>
</button>

aria-label hat weniger hohe Priorität bei der Vergabe von accNames! Es wird von aria-labelledby überschrieben. Das Verhalten dieser beiden Attribute ist ähnlich, aber aria-label soll nur dann verwendet werden, wenn kein sichtbarer Text auf der Seite als Referenz verwendet werden kann oder wenn die Verfolgung von ID-Werten zu schwierig wäre.

Important notes on aria-label and aria-labelledby

  • aria-label wird von automatischen Übersetzungstools nicht gut übersetzt. aria-label, aria-placeholder, aria-roledescription oder aria-valuetext wird möglicherweise nicht in der Sprache vorgelesen, die der Benutzer eingestellt hat. HTML-Methoden sollten bevorzugt verwendet werden! Das hat den Vorteil, dass gleichzeitig SC 2.5.3 Label in name. Mehr dazu auch im Kapitel über Icon-Buttons.
  • aria-label und aria-labelledby funktionieren nicht bei jedem Element. Sie dürfen nicht für »name-prohibited« Elemente verwendet werden <div>, <span> da diese keine semantisch bedeutsame Rolle haben.
  • aria-label und aria-labelledby funktionieren nicht konsistent bei den erlaubten Elementen. Detailliertere Info im Using ARIA Dokument Abschnitt § 2.10 Practical Support: aria-label, aria-labelledby and aria-describedby
  • aria-label und aria-labelledby überschreiben den Inhalt des Elements. Die beiden haben die höchste Priorität bei der Berechnung des accNames für ein Element. Gefährlicher Nebeneffekt: aria-label wird manchmal dazu missbraucht, zusätzliche Informationen zur Verfügung zu stellen – aber es gibt dann einen Mismatch zwischen dem sichtbaren Label/Name und dem vorgelesenen; auch mit Spracherkennung kann das Element dann nicht mehr aktiviert werden, siehe Bsp. unten! Verwende niemals aria-label oder aria-labelledby für eine accDesc!!! Dafür haben wir aria-describedby!
<a href="https://..." aria-label="Please contact one 
of the event organizers for more information">
  Rules of conduct
</a>

Der Name des Elements lautet nun "Please contact ..." - eigentlich wäre der Inhalt des Links das sichtbare Label, dieses wird aber nicht mehr verwendet, weil es vom aria-label Attribut überschrieben wird. Ein sehender Screenreader-Benutzer hört einen Namen, der nicht mit dem zusammenpasst, was er sieht; und die Ansteuerung per Voice Control funktioniert auch nicht mehr.

3. Accessible Descriptions mit ARIA

Das aria-describedby-Attribut ist ähnlich wie das aria-labelledby-Attribut. Es stellt eine accessible Description (accDesc) für ein Element zur Verfügung. Es akzeptiert ebenfalls eine oder mehrere IDs, die auf das Element angewendet werden können.
AccDesc unterscheiden sich von accNames in der Art, wie sie von Screenreadern vorgelesen werden. AccDesc werden zu einem Textstring, der an die Rolle und den Namen eines Elements angehängt wird. Semantik und Struktur innerhalb des beschreibenden Texts gehen verloren, z.B. Listen. Bei einem Bild wird das alt-Attribut vorgelesen, aber nicht die Rolle.

AccDesc werden möglicherweise nicht vorgelesen! Das hängt immer von der Screenreader/Browserkombination und auch von der Art, wie der User navigiert, ab! Beschreibungen sollten daher immer auch auf andere Art und Weise zur Verfügung gestellt werden! (Siehe auch Artikel von Adrian Roselli, Link unten)

Das aria-description Attribut

... wurde in ARIA 1.3 definiert, ist aber noch nicht ausreichend in allen Browsern implementiert, daher kann es noch nicht wirklich produktiv eingesetzt werden. aria-description benutzt keine Referenz, sondern akzeptiert direkt einen Textstring, der als accDesc verwendet wird.

aria-description wird ebenfalls nicht gut übersetzt, daher ist es besser, auf aria-describedby auszuweichen.

Das aria-details-Element

Es verbindet ein oder mehrere Elemente, die zusätzliche Informationen oder Details zu einem Element zur Verfügung stellen, mit dem Element, auf das es angewendet wird. Zweck dieses Elements ist, den User darauf aufmerksam zu machen, dass ein beschreibendes Element existiert. Es ist nicht Teil der accDesc des Elements. Es wird daher auch nicht zu einem »flachen« Textstring gemacht und der Inhalt wird auch nicht automatisch vom Screenreader vorgelesen. Mehr dazu: aria-details Property W3C Editor's Draft

Links