Beschriftung im Namen

Silktide vergleicht den Text, den Besucher auf Schaltflächen und Links sehen, mit dem Namen, den Hilfstechnologien für dasselbe Steuerelement verwenden. Wenn beide nicht übereinstimmen, können Personen, die Websites per Sprache bedienen, das Steuerelement nicht aktivieren, indem sie sagen, was sie sehen.

Warum das wichtig ist

Nutzende der Spracherkennung schauen auf den Bildschirm und sagen, was sie sehen: „Klicke auf Senden“. Die Software gleicht diese Wörter mit dem jedes Steuerelements ab – dem Namen, den verwenden. Attribute wie aria-label ersetzen diesen Namen, sodass eine Schaltfläche, die „Senden“ anzeigt, aber mit aria-label=\"Absenden\" beschriftet ist, nur auf „Klicke auf Absenden“ reagiert. Das sichtbare Wort bleibt wirkungslos, und die Person hat keine Möglichkeit, den verborgenen Namen herauszufinden, den sie sagen müsste.

Die Abweichung verwirrt auch -Nutzende, die mit sehenden Kolleginnen und Kollegen arbeiten, da sie einen anderen Namen hören, als die Person neben ihnen sieht.

Dies ist das -Erfolgskriterium 2.5.3 (Beschriftung im Namen), eine Anforderung der – Teil des grundlegendsten Konformitätsniveaus.

So beheben Sie es

Entfernen Sie die -Überschreibung, wenn sie keinen Mehrwert bietet: Eine Schaltfläche, deren sichtbarer Text bereits sagt, was sie tut, braucht kein aria-label.
Wenn die Überschreibung Kontext hinzufügt, beginnen Sie sie mit dem sichtbaren Text: aria-label=\"Mehr über die Preise erfahren\" für einen „Mehr erfahren“-Link sorgt dafür, dass der gesprochene Befehl weiterhin funktioniert.
Verwenden Sie aria-label niemals, um etwas anderes auszusagen als der sichtbare Text.

<!-- Problem: zeigt „Senden“, reagiert aber auf „Absenden“ -->
<button aria-label=\"Absenden\">Senden</button>

<!-- Lösung: sichtbarer Text im zugänglichen Namen enthalten -->
<button aria-label=\"Nachricht senden\">Senden</button>

<!-- Einfachste Lösung: gar keine Überschreibung -->
<button>Senden</button>

So testet Silktide das

Sichtbare Schaltflächen und Links auf jeder Seite finden, einschließlich Elementen mit einer ARIA-Rolle button oder link.
Nur Steuerelemente prüfen, die ihren Namen mit aria-label oder aria-labelledby überschreiben – ohne Überschreibung ist der sichtbare Text der zugängliche Name und das Kriterium ist automatisch erfüllt.
Das sichtbare Label des Steuerelements lesen: seinen Textinhalt plus den von Bildern darin. Beschriftungen mit weniger als 2 Zeichen werden übersprungen, ebenso Steuerelemente mit leerem zugänglichen Namen (ein separates Problem, das durch andere Prüfungen abgedeckt wird).
Beide Zeichenfolgen normalisieren – in Kleinbuchstaben umwandeln, Leerzeichen zusammenfassen und dekorative Interpunktion entfernen – und dann verlangen, dass das sichtbare Label im zugänglichen Namen vorkommt.
Bei kartenartigen Links im Card-Style, die eine Überschrift plus unterstützenden Text enthalten, stattdessen die Überschrift als Label akzeptieren, da dies der Text ist, den ein Besucher typischerweise sagen würde.

Fehlerbehebung

Der zugängliche Name ist länger als der sichtbare Text

Das ist in Ordnung, sofern der sichtbare Text darin vorkommt. Die WCAG empfiehlt, dass der zugängliche Name mit dem sichtbaren Text beginnt, aber jede Position besteht diese Prüfung.

Formularfelder werden nicht geprüft

Texteingaben und andere Formularfelder erhalten ihre sichtbare Beschriftung über ein <label>- Element statt über ihren eigenen Text, daher werden sie durch separate Beschriftungsprüfungen und nicht durch diese hier abgedeckt.