ARIA

ARIA-Schaltflächen, -Links und -Menüeinträge brauchen einen Namen

Regel: aria-command-name
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Ein Element mit role="button", "link" oder "menuitem" ohne Text wird nur als „Schaltfläche“ angesagt. Vor dem Klick lässt sich nicht erkennen, was es tut.

So beheben Sie es

Setzen Sie sichtbaren Text in das Element, wo das Design es zulässt.
Bei reinen Icon-Bedienelementen ergänzen Sie aria-label mit der Aktion („Löschen“, „In den Warenkorb“).
Kennzeichnen Sie das dekorative Icon selbst mit aria-hidden="true", damit es nicht Teil des Namens wird.

Im Markup

Fehlerhaft

<div role="button" tabindex="0"><svg aria-hidden="true">...</svg></div>

Korrekt

<div role="button" tabindex="0" aria-label="Delete">
  <svg aria-hidden="true">...</svg>
</div>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

4.1.2 Name, Rolle, Wert (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu aria-command-name (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.