11.4 Concatenating accNames: using aria-labelledby to provide 'DRY' names to interactive elements

accNames lassen sich auch kombinieren: aria-labelledby akzeptiert Referenzen auf ein oder mehrere Elemente. Die IDs werden mit Leertaste voneinander getrennt, die Reihenfolge ist wichtig.
Gestalte es DRY!
Zwei Anwendungsfälle:

  • Blog-Paginations
  • Tag-Pills

Beispiel
accName mit DevTools anschauen:

Click me 
<span id="span_1">Click</span>
<span id="span_2">me</span>

<!-- the accName of this button is "Click me" -->
<button aria-labelledby="span_1 span_2"></button>

Auch das benannte Element selbst kann in aria-labelledby referenziert werden! So ist es möglich, dem accName des Elements einen Text voranzustellen oder anzuhängen.

Beispiel
accName mit DevTools anschauen:

this thing 
<span id="el">dieses Ding</span>
<!-- Der accName des Buttons ist "Schließe dieses Ding" -->
<button id="self" aria-labelledby="self el">Schließe</button>

'DRY' accNames in einer einfachen Blogpagination

Anmerkungen zum Beispiel unten:

  • Das Label eines Links soll das Linkziel beschreiben, aber Links in einer Pagination haben eine Zahl als Label und sind daher nicht beschreibend (nicht aussagekräftig).
  • Vor- und Zurück-Schaltflächen sollen vor der Pagination stehen. Für Keyboard-Benutzer sind diese sonst nutzlos, weil sie sich erst recht durch die Seiten tabben müssen.

Beispiel
accName mit DevTools anschauen:

'DRY' accNames für Buttons in interaktiven Pillen

Bestandteile einer typischen interaktiven Pille:

  • Der Pillen-Container (kann auch ein Umriss sein)
  • Optional ein Miniaturbild/Thumbnail
  • Text
  • "Entfernen" Icon Button

Anmerkungen zum Beispiel unten:

  • Der Name des Buttons soll die Aktion, die er auslöst, beschreiben.
  • Jeder Button soll einen individuellen Namen haben, außer, er macht exakt dasselbe wie ein anderer Button.

Include jobs tagged:

  • HTML
  • CSS
  • JavaScript

Takeaway

Wenn ein Element oder eine Komponente einen accName erhalten soll:

  • Überlege, wie der Name des Elements lauten soll
  • Überlege, ob du ein bereits existierendes Element benutzen kannst, inklusive dem Element selbst
  • Überlege, ob du mehrere Namen aneinanderreihen kannst, um dich nicht zu wiederholen (DRY)

Relevante Success Criteria

SC XXX (Level A)
XXX

Links