11.2 Which accessible name is used when you provide more than one name to an element?

The Accessible Name and Description Computation Algorithm

Dieser Algorithmus bestimmt, welcher accName »gewinnt«. Definiert ist dieser Algorithmus in der Accessible Name and Description Computation Specification (Link unten).

tl;dr;
Wenn der Browser den accName eines Elements bestimmen muss:
  1. Prüft er, ob das Element ein aria-labelledby-Attribut hat, und wenn ja, und wenn die ID in diesem Attribut eine valide Referenz zu einem anderen Element auf dieser Seite ist, wird der berechnete (computed) Text des referenzierten Elements als accName verwendet.
  2. Anderenfalls prüft er, ob das Element ein aria-label-Attribut hat, wenn ja, wird der Wert dieses Attributes als accName verwendet.
  3. Anderenfalls, und wenn das Element nicht als presentational mit role="presentation" oder role="none" ausgezeichnet ist (in dem Fall akzeptiert das Element sowieso keinen accName mehr), prüft der Browser, ob er den Namen aus folgenden Quellen erhalten kann:
    1. aus einem HTML-Attribut (wie title oder alt),
    2. aus einem anderen Element (wie label oder legend),
    3. oder aus dem Inhalt des Elements.

Wenn zwei gleichwertige Möglichkeiten der Auszeichnung verwendet werden (zwei HTML-Methoden wie z.B. alt und title), dann arbeitet der Browser intern eine Liste von Kriterien ab, nach denen er vorgeht.

Berechnung der accNames für gängige Steuerelemente und Elemente der Benutzeroberfläche

1. <img> element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use alt
  4. Otherwise, use title*
  5. Wenn keines der oben genannten einen accName beinhaltet, gibt es keinen.

* Nicht auf title verlassen! Das ist kein Ersatz für das alt-Attribut! Wenn kein Bild angezeigt werden kann, zeigen Browser das alt-Attribut, somit ist zumindest eine Bildbeschreibung als Text verfügbar.

Wenn sowohl alt als auch title-Attribut vorhanden sind – aber ohne aria-labelledby, dann wird das title-Attribut als accDesc verwendet. Dieses Verhalten ist aber nicht konsistent in den verschiedenen Browser-/Screenreader-Kombinationen.
Zudem kann es, wenn beide Attribute vorhanden und identisch sind, zu doppelten Ansagen kommen. (Das passiert oft bei CMS-generated Code.)
Vermeide das title-Attribut bei Bildern, verwende nur das alt-Attribut.
Wenn ein Bild zusätzlichen Kontext benötigt, verwende figure mit figcaption.

2. <figure> element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use <figcaption> This will change!
  4. Otherwise, use title*
  5. Wenn keines der oben genannten einen accName beinhaltet, gibt es keinen.

Im Moment wird <figure> mit aria-labelledby an die <figcaption> gebunden, in Zukunft wird aber <figcaption> zusätzliche Details für <figure> zur Verfügung stellen, ähnlich wie aria-details für ein Element.

<!-- alte/aktuelle Methode: -->
<figure aria-labelledby="caption_id">
  ..
  <figcaption id="caption_id"></figcaption>
</figure>

<!-- neue/zukünftige Methode: -->
<figure aria-details="caption_id">
  ..
  <figcaption id="caption_id"></figcaption>
</figure>

Das ist praktisch, weil man z.B. ein Video in <figure> und das Transskript in <figcaption> schreiben kann.

3. <iframe> element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use title*
  4. Wenn keines der oben genannten einen accName beinhaltet, gibt es keinen.

*title ist zur Zeit der verlässlichste Weg, einen accName für einen iframe zu vergeben.

4. <fieldset> element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use the first <legend>-Element
  4. Otherwise, use title
  5. Wenn keines der oben genannten einen accName beinhaltet, gibt es keinen.

5.1 input type="[ text | password | search | tel | email | url | number ]", <select> and <textarea> element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use associated <label>-elements*
  4. Otherwise, use title
  5. Otherwise, use placeholder
  6. Wenn keines der oben genannten einen accName beinhaltet, gibt es keinen.

* Wenn mehr als ein <label>-Element damit verbunden ist, werden die Werte der Label nach der DOM-Order zusammengefügt, separiert durch Leerräume.

5.2 input type="[ button | submit | reset ]" element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use the <label>-element(s)
  4. Otherwise, use the value-attribute
  5. For input type="submit": Wenn die vorhergehenden Punkte keinen Namen geliefert haben, wird der accName aus dem String des Wortes »Submit« lokalisiert
  6. For input type="reset": Wenn die vorhergehenden Punkte keinen Namen geliefert haben, wird der accName aus dem String des Wortes »Reset« lokalisiert
  7. Otherwise, use title
  8. Wenn keines der oben genannten einen accName beinhaltet, gibt es keinen.

Für diese drei Buttons gilt: wenn nicht der Wert des value-Attributes verwendet wird, weil es ein aria-label oder ein aria-labelledby-Attribut gibt, dann wird value als accDescr verwendet werden. Wenn das sichtbare Label gleich dem accName ist, ist aria-label redundant. Wenn die beiden unterschiedlich sind, dann bedeutet das ein Usability-Problem, weil die Spracheingabe nicht funktioniert. Es ist darüber hinaus eine Verletzung von SC 2.5.3 Label in Name, weil der Text des Labels (Send away) ist nicht im Text des accName des Input-Feldes vorhanden. (Bsp. Video Minute 10).

6. Grouping and sectioning elements (eg. <section>, <nav>, etc.) element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use title
  4. Wenn keines der oben genannten einen accName beinhaltet, gibt es keinen.

7. Anchor element/Link <a href=""> element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use the element's content
  4. Otherwise, use title
  5. Wenn keines der oben genannten einen benutzbaren Text beinhaltet, gibt es keinen accName.

Wenn es ein title-Attribut gibt, dann sollte dieses als accDescr verwendet werden, sofern der accName aus einem Element mit höherer Priorität generiert werden kann. Allerdings wird das title-Attribut in Links zur Zeit nicht konsistent vorgelesen. Das title-Attribut sollte auch hier vermieden werden!

Link mit Icon - Best practice

Wenn ein Link eine Beschreibung braucht, z.B. dass er in einem neuen Fenster geöffnet wird, sollte das am besten mit einem visually-hidden Text gelöst werden:

<a href="#" target="_blank">
  The ARIA Specification

  <span class="visually-hidden">Opens in a new window</span>

  <svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
    <path d="M6 2v24h24v-24h-24zM28 24h-20v-20h20v20zM4 28v-21l-2-2v25h25l-2-2h-21z" fill="currentColor"></path>
    <path d="M11 8l5 5-6 6 3 3 6-6 5 5v-13z" fill="currentColor"></path>
  </svg>
</a>
The ARIA Specification

8. <button> element accessible name computation

  1. Use aria-labelledby
  2. Otherwise, use aria-label
  3. Otherwise, use the <label>-element(s)
  4. Otherwise, use the element's content
  5. Otherwise, use title
  6. Wenn keines der oben genannten einen benutzbaren Text beinhaltet, gibt es keinen accName.

Ein <button> kann ein Label haben! Labelable elements sind Elemente, die mit einem <label> verbunden werden können (programmatische Assoziation mit for/ID). Das ist aber keine best practice, SC 2.5.3 Label in name kann leicht verletzt werden!

Okay, das sind viele Möglichkeiten ... welche soll ich nehmen?

Wenn die bestehende Markup-Struktur nicht verändert werden kann:

Jede Möglichkeit, die die bestehende überschreibt, ist ok.

aria-labelledby oder eine native HTML-Methode sollte gegenüber aria-label bevorzugt werden.
Wenn aria-labelledby verwendet wird, gibt es einen Text, der irgendwo anders auf der Seite steht und als accName verwendet werden kann?
Wenn es kein solches Element gibt, mach eines. Daumenregel: Text-Content auf der Seite sollte gegenüber Text in Attributen bevorzugt werden.

Best practices für neues Markup:

Bevorzuge eine native HTML-Methode gegenüber ARIA -> The first rule of ARIA
D.h., die erste Frage ist, braucht es ARIA überhaupt? Und wenn HTML-Methoden verwendet werden, sollte in erster Linie das title-Attribut vermieden werden.

Order of priority für die Wahl eines accNames für ein Element:

  1. Benutze HTML content (z.B. Text in einem Link oder einem Button)
  2. Anderenfalls benutze ein HTML Attribut oder ein Element (z.B das alt-Attribut oder das <label> Element )
  3. Anderenfalls benutze aria-labelledby, um ein Element, das bereits auf der Seite existiert, zu referenzieren.
  4. Wenn keine dieser Möglichkeiten in Frage kommt, nimm aria-label.

Wenn das Element, für das ein accName zur Verfügung gestellt wird, kein sichtbares Text-Label hat, verwende einen visually-hidden Text als accName.
Benutze bevorzugt das hidden-Attribut und verbinde es mit aria-labelledby wenn das passend ist.

Grob gesagt, schau immer zuerst nach der Möglichkeit mit der niedrigsten Priorität, und baue dann darauf auf.

Relevante Success Criteria

SC 3.2.2 Labels or Instructions (Level A)
Labels or instructions are provided when content requires user input.
D.h., alle Formularfelder oder Widgets, die Benutzereingaben erwarten, müssen ein visuelles Label haben, und, wo benötigt, eine Beschreibung.

Links