Namen und Rollen

Schaltflächen brauchen einen Namen

Regel: button-name
Schweregrad: Kritisch
WCAG-Stufe A

Warum das wichtig ist

Eine Schaltfläche, die nur ein Icon enthält, wird als „Schaltfläche“ angesagt und sonst nichts. In einer Werkzeugleiste mit sechs Icons klingen alle sechs gleich.

So beheben Sie es

Setzen Sie sichtbaren Text in die Schaltfläche, wo das Design es zulässt.
Sonst ergänzen Sie aria-label mit der Aktion als Verb („Dialog schließen“).
Setzen Sie aria-hidden="true" auf das Icon, damit es nicht mit vorgelesen wird.
Prüfen Sie, dass keine per CSS ausgeblendete Beschriftung der einzige Name ist — display:none entfernt sie auch aus dem Namen.

Im Markup

Fehlerhaft

<button><svg aria-hidden="true">...</svg></button>

Korrekt

<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

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 button-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.