A: ARIA Befehle müssen einen zugänglichen Namen (accessible name) besitzen (WCAG 4.1.2)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Stellt sicher, dass jeder ARIA-button, -link und jedes -menuitem einen zugänglichen Namen (accessible name) hat.

Das bedeutet

Interaktive ARIA-Elemente (z. B. role="button", role="link", role="menuitem") brauchen einen Accessible Name. Fehlt er (Icon-only, leeres <a>, SVG ohne Text/Label), melden Screenreader nur die Rolle („Button“), aber keinen Zweck.

Auswirkung

Ohne Namen sind Sprach- und Screenreader-Nutzung erschwert; Nutzerinnen und Nutzer können Aktionen nicht zuordnen → Abbrüche, Fehlbedienungen und WCAG-Verstoß (A).

Empfehlung

• Bevorzugt sichtbarer Text im Element (kurz, eindeutig).
• Falls kein sichtbarer Text möglich: aria-label oder aria-labelledby setzen.
• Icon-only immer mit verstecktem Text (.sr-only) oder aria-label.
• Möglichst native HTML-Steuerelemente verwenden (<button>, <a> statt div role="button").
• Leere Links/Buttons vermeiden.

Beispiel

Problematisch

<button><svg aria-hidden="true"></svg></button>        <!-- kein Name -->
<a href="#"><i class="icon-link"></i></a>              <!-- kein Linktext/Label -->
<div role="menuitem"></div>                            <!-- kein Name -->

Besser

<button aria-label="Suche öffnen"><svg aria-hidden="true"></svg></button>
 
<a href="/spenden">Jetzt spenden</a>
<!-- oder: -->
<a href="/spenden" aria-label="Jetzt spenden"><i class="icon-link" aria-hidden="true"></i></a>
 
<button role="menuitem">Profil</button>
<!-- oder: -->
<div role="menuitem" aria-label="Profil">Profil</div>