Praxisleitfaden Schaltflächen zugänglich beschriften
Namenlose Buttons eindeutig beschriften
Machen Sie die Aktion eines Icon-Buttons auch ohne sichtbares Symbol verständlich.
button-nameWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-button-name.html
Befund verstehen
Das Symbol ist sichtbar, die Aktion hat keinen Namen
In der Atlasübung steht rechts neben Ausgangspunkt und Ziel ein Button mit zwei gegenläufigen Pfeilen. Sein einziges Kindelement trägt aria-hidden="true". Ohne weitere Beschriftung liefert der Button daher keinen zugänglichen Namen.
Warum das relevant ist
Menschen mit Screenreader können die Schaltfläche erreichen, erfahren aber nicht, dass sie Ausgangspunkt und Ziel vertauscht. Die benachbarten Ortsangaben benennen diese Aktion nicht automatisch.
Scanner-Signal
button-name meldet #swapRoute: kein zugänglicher Text und keine alternative Benennung.
- Regel
button-name- Referenz
- WCAG 4.1.2
Namensdiagnose vor der Korrektur
Element: #swapRoute
Rolle: button
Zugänglicher Name: leer
Symbol ⇄: durch aria-hidden="true" ausgeblendet
Axe button-name: VerstoßSymbolbuttons nach ihrer Aktion prüfen
Gemeinsame Symbole können verschiedene Aktionen auslösen. Prüfen Sie die Benennung jeder Verwendung.
- Routenplanung× Befund im Beispiel
- Routenvergleich× Befund im Beispiel
- Routenübersicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie Namen und ausgelöste Aktion jedes Buttons mit Tastatur und Screenreader.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Benennen Sie die Handlung, die tatsächlich folgt
Der vorhandene Klick-Handler vertauscht die beiden ausgewählten Orte. Daraus folgt der passende Name.
Die Lehrskizze zeigt den vorhandenen Symbolbutton. Sein ausgeblendeter Pfeil liefert keinen Namen; aria-label benennt die belegte Tauschaktion.
Passende Umsetzung auswählen
Fundstelle ansehen
Die Routenübung im vollständigen Ortsabschnitt
Der Ausschnitt enthält die Überschrift, die Ortskarten und die gesamte Routenzeile. Die markierte Schaltfläche steht rechts neben der Richtungsangabe; Ausgangspunkt Kath und Ziel Gurgandsch bleiben erkennbar.
Die Pfeile deuten den Tausch visuell an. Da sie vor assistiver Technik verborgen sind und am Button kein Name hinterlegt ist, fehlt die Aktion in dessen zugänglicher Beschreibung. Das Bild allein kann diesen Codefehler nicht zeigen; die Namensdiagnose erläutert ihn.
Button korrigieren
Den zugänglichen Namen am Button ergänzen
Die Korrektur fügt dem vorhandenen button ein aria-label hinzu. Symbol, Größe und bestehender Klick-Handler bleiben erhalten. Der Name benennt beide betroffenen Felder und den Tausch als Aktion.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
aria-label="Ausgangspunkt und Ziel tauschen"
Im CMS oder Baukasten Nutzen Sie beim Icon-Button das Feld für die zugängliche Beschriftung. Prüfen Sie im veröffentlichten HTML, ob es am button landet; ein interner Komponentenname oder eine Editor-Notiz reicht nicht.
Vollständigen Code vergleichen
Vorher
<button class="route-button" id="swapRoute">
<span aria-hidden="true">⇄</span>
</button>Nachher
<button class="route-button" id="swapRoute"
aria-label="Ausgangspunkt und Ziel tauschen">
<span aria-hidden="true">⇄</span>
</button>Markierte Zeilen wurden geändert
Im Produkt umsetzen
Der Name muss zur Funktion passen
Prüfen Sie Beschriftung und Verhalten gemeinsam, auch wenn nur ein Attribut geändert wird.
- 1
Beschreiben Sie die Aktion statt das Symbol: „Ausgangspunkt und Ziel tauschen“ statt „Doppelpfeil“.
- 2
Prüfen Sie den berechneten Namen in den Bedienungshilfen der Browser-Entwicklungswerkzeuge.
- 3
Wenn später sichtbarer Buttontext hinzukommt, entfernen Sie ein überflüssiges aria-label oder gleichen Sie es mit diesem Text ab.
- 4
Übersetzen Sie die Beschriftung mit der Oberfläche und halten Sie sie bei Funktionsänderungen aktuell.
- 5
Prüfen Sie wiederverwendete Icon-Komponenten: Jede konkrete Aktion benötigt ihren eigenen passenden Namen.
Fehlversuche vermeiden
Ein nicht leerer Text ist noch keine gute Beschriftung
Nur aria-hidden entfernen
Damit würde das Pfeilzeichen zum Namensinhalt beitragen. Seine Aussprache erklärt den Tausch der beiden Orte aber nicht verlässlich.
value am button setzen
value="Tauschen" gibt einem button-Element keinen zugänglichen Namen. Setzen Sie sichtbaren Inhalt oder eine geeignete Namensquelle.
Nur eine Beschreibung hinzufügen
aria-describedby ergänzt einen Namen um Erläuterungen. Es ersetzt die fehlende Benennung der Schaltfläche nicht.
Eine falsche Aktion benennen
„Route berechnen“ wäre hier irreführend: Der Button vertauscht die Auswahlen. Eine nicht leere, aber falsche Beschriftung kann den Namenscheck trotzdem bestehen.
Der Name ist vorhanden, der Tausch funktioniert
Am selben Button #swapRoute meldet Axe nach der Korrektur einen Pass für button-name. Die zusätzliche Funktionsprüfung vertauscht beide Auswahlwerte und stellt anschließend den Ausgangszustand wieder her.
Nachgewiesen sind die Namenskorrektur und der Klick-Tausch an diesem Button. Die Beschriftung der benachbarten Auswahlfelder, Tastaturbedienung und Ankündigung der Ergebnisänderung benötigen eigene Prüfungen.
Namensdiagnose nach der Korrektur
Element: #swapRoute
Rolle: button
Zugänglicher Name: Ausgangspunkt und Ziel tauschen
Axe button-name: Pass am selben Element
Klick: Ausgangspunkt und Ziel werden vertauscht
Bilddarstellung: unverändertPrüfumfang kennen
Automatisch den Namen prüfen, manuell die Verständlichkeit
Die Regel erkennt fehlende Namen. Ob ein vorhandener Name die richtige Erwartung weckt, hängt von der Aktion ab.
Automatisch prüfbar
- Fehlende zugängliche Namen an erfassten Buttons erkennen.
- Das betroffene Element mit Selektor und Seitenausschnitt zuordnen.
- Die Namensregel nach einer Änderung am gleichen Element wiederholen.
Im Kontext zu entscheiden
- Prüfen, ob die Benennung die tatsächliche Aktion beschreibt.
- Sichtbare Beschriftung und zugänglichen Namen miteinander abgleichen.
- Fokus, Tastaturauslösung und Rückmeldung nach dem Tausch im vollständigen Nutzerweg testen.