WCAG 2.1 - 2.5.3
Label in Name
Für Benutzeroberflächenkomponenten mit Beschriftungen, die Text oder Bilder von Text enthalten, enthält der Name den Text, der visuell dargestellt wird.
Inhalt
Was Bedeutet das Success Criterium 2.5.3 - Label in Name?Warum ist es so wichtig, das Success Criterium 2.5.3 - Label in Name zu beachten?Was hat das Success Criterium 2.5.3 - Label in Name mit dem BFSG zu tun?Lösungen für 2.5.3 - Label in Name anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 2.5.3 - Label in Name?Was Bedeutet das Success Criterium 2.5.3 - Label in Name?
Das Success Criterion 2.5.3 "Label in Name" verlangt, dass wenn Bedienelemente einer Webseite (wie Buttons, Links, Formulareingabefelder usw.) ein sichtbares Text-Label haben, dieser Text auch so im zugrundeliegenden Programmnamen (dem sog. Accessible Name) enthalten sein muss.
Konkret bedeutet das: Was Sie auf dem Bildschirm als sichtbaren Text für ein Element sehen – zum Beispiel "Suchen" auf einem Such-Button – muss auch im für Programme und Screenreader zugänglichen Namen dieses Buttons enthalten sein.
Das ist besonders wichtig, wenn Nutzer Sprachsteuerung oder Screenreader verwenden. Wenn der sichtbare Text und der zugrundeliegende Name voneinander abweichen, können Nutzer Elemente nicht erwartungsgemäß ansprechen oder identifizieren.
Warum ist es so wichtig, das Success Criterium 2.5.3 - Label in Name zu beachten?
Viele Nutzer mit Behinderungen verwenden Sprachsteuerung oder Screenreader. Ist der sichtbare Text anders als der vom Gerät erkannte Name des Elements, können sie dieses nicht gezielt ansteuern (z.B. durch das Aussprechen von „Suchen“ wenn der Button für den Computer anders heißt, etwa "submitBtn"). Auch die Konsistenz der Bedienung und das Vertrauen in die Benutzerschnittstelle leiden erheblich, wenn Label und Name nicht übereinstimmen.
Was hat das Success Criterium 2.5.3 - Label in Name mit dem BFSG zu tun?
Das Success Criterion 2.5.3 ist Teil der verbindlichen Anforderungen nach BFSG und EN 301 549. Ein Nicht-Erfüllen bedeutet, dass Ihre Webseite wesentliche Zugänglichkeitsstandards nicht einhält. Betroffene Nutzergruppen (z.B. Menschen mit motorischen Einschränkungen oder Sehbehinderungen) werden dadurch ausgeschlossen oder massiv benachteiligt. Ohne die Erfüllung dieses Kriteriums ist BFSG-Konformität nicht gegeben.
Lösungen für 2.5.3 - Label in Name anhand von Codebeispielen
Falscher Code
<button aria-label="Suche absenden">Suchen</button>Korrekter Code
<button aria-label="Suchen">Suchen</button>Im schlechten Beispiel sieht der Nutzer einen Button mit dem Text "Suchen", aber für Screenreader heißt er "Suche absenden". Ein Sprachsteuerungsnutzer wird beim Aussprechen von "Suchen" keinen Erfolg haben. Im guten Beispiel sind sichtbarer Text und Accessible Name identisch: "Suchen".
Falscher Code
<input type="submit" value="Suchen" aria-label="Jetzt absenden">Korrekter Code
<input type="submit" value="Suchen" aria-label="Suchen">Der sichtbare Buttontext ist "Suchen", aber programmatisch wird "Jetzt absenden" angezeigt. Im guten Beispiel stimmen Wert und aria-label überein.
Falscher Code
<a href="#" aria-label="Zur Startseite zurückkehren">Home</a>Korrekter Code
<a href="#" aria-label="Home">Home</a>Der sichtbare Link heißt "Home", aber programmatisch "Zur Startseite zurückkehren". Die Namensgleichheit ist notwendig, damit z.B. Sprachsteuerung "Home" versteht.
Wie löse ich Verstöße gegen das Success Criterium 2.5.3 - Label in Name?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.