Über zugängliche Namen von Bedienelementen wie Links, Buttons oder Formularelemente können Nutzerinnen und Nutzer die Funktionen einer Webseite per Sprachbefehl steuern. Die Web Content Assessibility Guidelines fordern, dass die sichtbare Beschriftung eines Bedienelements Teil des zugänglichen Namens ist (SC 2.5.3). Nur so erfahren Nutzer*innen, welche Befehle sie sprechen müssen. Für Entwickler*innen stellt sich die Frage, wie der zugänglich Name bei verschiedenen Elementen vermittelt wird.
Link-Element (<a>)
Bei Verwendung des HTML Link-Elements entspricht der zugängliche Name dem eingeschlossenen Link-Text:
<a href=“Beispiel.html“>Das ist der zugängliche Name</a>
Im Normalfall kommt es hier nicht zum Konflikt mit Erfolgskriterium 2.5.3. Der sichtbare Linktext entspricht immer dem zugänglichen Namen.
Verlinkte Bild-Elemente (<a><img>)
Bei verlinkten Bild-Elementen setzt sich der zugängliche Name aus dem Inhalt des alt-Attributs und dem Link-Text zusammen.
<a href=“Beispiel.html“><img src=“bild.jpg“ alt=“Das ist der 1. Teil“>und das ist der 2. Teil des zugänglichen Namens</a>
Hier können Konflikte auftreten. Sofern auf dem Bild („Bedienelement“) bezeichnender Text sichtbar ist, sollte der Beschriftungstext in der gleichen Form im zugänglichen Namen vorkommen. Der zugängliche Name kann zusätzlichen Text enthalten.
Beschriftete Formularelemente (<label><input>)
Bei Formularelementen entspricht der zugängliche Name der über <label> verknüpften Beschriftung.
<input type=“checkbox“ id=“12″>
<label for=“12″>Das ist der zugängliche Name</label>
ARIA-Attribute
Der zugängliche Name eines Elements kann auch über die ARIA-Attribute aria-label bzw. aria-labelledby festgelegt werden. Hierdurch werden die durch HTML definierten Namen überschrieben.
<button aria-label=“Das ist der zugängliche Name“>Dieser Name wird überschrieben</button>
Auswahl zugänglicher Namen
Achten Sie darauf, dass Sie Elementen mit identischer Funktion auf einer Webseite auch identische zugängliche Namen zuweisen. Bei Elementen mit abweichender Funktion sollten sich die Namen hingegen unterscheiden.