Praxisleitfaden Sichtbarer Text und Name
Buttonnamen mit dem sichtbaren Text abstimmen
Erkennen Sie widersprüchliche Beschriftungen und korrigieren Sie den zugänglichen Namen.
label-content-name-mismatchWCAG 2.5.3
Sehen Sie, was sich durch die Korrektur ändert.
Befund verstehen
Ein Button, zwei verschiedene Aktionen
Im Kopistenblatt steht „Stimme öffnen“ auf dem Button. Sein aria-label überschreibt diesen Text für assistive Technik mit „Partitur schließen“. Die Regel label-content-name-mismatch meldet den fehlenden sichtbaren Text im berechneten Namen.
Warum das relevant ist
Wer den Button per Sprache mit „Stimme öffnen“ ansprechen möchte, kann am abweichenden Namen scheitern. Auch die Screenreader-Ausgabe bezeichnet hier eine andere Handlung als die sichtbare Beschriftung.
Scanner-Signal
.ariosti-eingaben button: „Stimme öffnen“ fehlt im zugänglichen Namen „Partitur schließen“.
- Regel
label-content-name-mismatch- Referenz
- WCAG 2.5.3
Namensvergleich vor der Korrektur
Sichtbar: Stimme öffnen
Zugänglicher Name: Partitur schließen
Namensquelle: aria-label
Ergebnis: sichtbarer Text nicht enthaltenSichtbaren und hinterlegten Text zusammen pflegen
Getrennte Textquellen können bei Änderungen auseinanderlaufen. Prüfen Sie jede Verwendung nach Text- oder Übersetzungsänderungen.
- Kopistenblatt× Befund im Beispiel
- Stimmenübersicht× Befund im Beispiel
- Partiturübersicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenVergleichen Sie sichtbaren Text, berechneten Namen und tatsächliche Aktion.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Beschriftung soll gelten?
Klären Sie die tatsächliche Aktion, bevor Sie den Namen ändern.
Die Lehrskizze vergleicht die Namensquellen des vorhandenen Buttons. Nur der abweichende ARIA-Text wird angeglichen; die Aktion ist separat zu prüfen.
Passende Umsetzung auswählen
Fundstelle zuordnen
Der Button im vollständigen Kopistenblatt
Überschrift, Erläuterung und Eingabefelder zeigen den Zusammenhang des Stimmenverzeichnisses. Die Markierung grenzt den betroffenen Button ein.
„Stimme öffnen“ steht unten links neben der Instrumentenauswahl. Der abweichende Name „Partitur schließen“ ist im Bild unsichtbar; der Namensvergleich im Befund macht ihn überprüfbar.
Namen korrigieren
Das vorhandene aria-label angleichen
Die Beispielkorrektur ersetzt „Partitur schließen“ durch „Stimme öffnen“. Buttontext und Darstellung bleiben gleich. Der zugängliche Name enthält jetzt denselben Wortlaut.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
Partitur schließen- Kommt hinzu
Stimme öffnen
Im CMS oder Komponenteneditor Suchen Sie beim betroffenen Button nach „ARIA-Label“ oder „Zugänglicher Name“. Stimmen Sie diesen Wert mit der sichtbaren Beschriftung ab und kontrollieren Sie das veröffentlichte HTML.
Vollständigen Code vergleichen
Vorher
<button aria-label="Partitur schließen">
Stimme öffnen
</button>Nachher
<button aria-label="Stimme öffnen">
Stimme öffnen
</button>Markierte Zeilen wurden geändert
Im Projekt umsetzen
Beschriftungen gemeinsam pflegen
Vermeiden Sie getrennte Texte, die bei Änderungen auseinanderlaufen.
- 1
Prüfen Sie im Accessibility-Bereich der Browserwerkzeuge den berechneten Namen und seine Quelle.
- 2
Kontrollieren Sie auch aria-labelledby: Referenzierte Texte können den Namen anstelle von aria-label bestimmen.
- 3
Leiten Sie sichtbaren Text und einen notwendigen ARIA-Namen aus derselben Übersetzung ab.
- 4
Prüfen Sie dynamische Zustände wie „Öffnen“ und „Schließen“ jeweils nach dem Wechsel.
Fehlkorrekturen vermeiden
Was den Widerspruch nicht zuverlässig beseitigt
Nur ähnliche Wörter verwenden
„Noten anzeigen“ mag inhaltlich passen, enthält aber nicht die sichtbare Beschriftung „Stimme öffnen“. Verwenden Sie deren Wortlaut.
Die Ergänzung in eine Beschreibung schreiben
aria-describedby ergänzt eine Beschreibung. Es repariert den abweichenden zugänglichen Namen nicht.
Den sichtbaren Text für die Prüfung verstecken
Die sichtbare Beschriftung hilft Menschen bei der Bedienung. Beheben Sie den widersprüchlichen Namen an seiner Quelle.
Die tatsächliche Funktion übergehen
Zwei übereinstimmende Namen können dieselbe falsche Aktion beschreiben. Kontrollieren Sie zusätzlich, was der Button wirklich auslöst.
Der sichtbare Text ist jetzt im Namen enthalten
Axe meldet nach der Korrektur einen Pass für label-content-name-mismatch am selben Button. Der Namensvergleich lautet auf beiden Seiten „Stimme öffnen“; der Bildausschnitt bleibt optisch unverändert.
Der Nachweis gilt für diese Regel an diesem Button. Weitere absichtliche Fehler im Kopistenblatt und die tatsächliche Öffnungsfunktion sind damit nicht geprüft.
Namensvergleich nach der Korrektur
Sichtbar: Stimme öffnen
Zugänglicher Name: Stimme öffnen
Namensquelle: aria-label
Ergebnis: sichtbarer Text vollständig enthaltenPrüfgrenzen kennen
Namensvergleich automatisieren, Bedienung prüfen
Der Scan erkennt hier einen Textwiderspruch. Die passende Handlung und praktische Bedienbarkeit benötigen zusätzliche Prüfung.
Automatisch prüfbar
- Abweichungen zwischen sichtbarem Text und ARIA-Namen an unterstützten Bedienelementen erkennen
- Die betroffene Fundstelle mit Selektor und Kontextbild zuordnen
- Die korrigierte Namensübereinstimmung am selben Element erneut testen
Im Kontext zu entscheiden
- Bestätigen, dass „Stimme öffnen“ die tatsächliche Aktion beschreibt
- Die Bedienung mit Sprachsteuerung und die Screenreader-Ausgabe prüfen
- Beschriftungen in weiteren Sprachen, Zuständen und als Bild dargestellte Texte beurteilen