Praxisleitfaden Formularfelder beschriften
Sichtbarer Text braucht eine Verbindung zum Feld
Der Regler ist beschriftet – für die Augen. Am Beispiel „Vokaler Schwerpunkt“ sehen Sie, warum der Scanner trotzdem anschlägt und wie der Text auch zum zugänglichen Namen wird.
labelWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-label.html
Befund verstehen
Der Text steht daneben, gehört aber technisch nicht zum Regler
Über dem ersten Regler steht „Vokaler Schwerpunkt“ in einem span. Das Eingabefeld verweist nicht auf diesen Text und besitzt auch keine andere Beschriftung. Die räumliche Nähe stellt keine programmatische Verbindung her.
Warum das relevant ist
Wer mit einem Screenreader durch die drei Regler navigiert, kann den ersten Wert ohne zugeordneten Namen nicht verlässlich seinem Zweck zuordnen. Der Zahlenwert 7 sagt allein nicht, welche Gewichtung er verändert.
Scanner-Signal
Die Regel label meldet am input#voice-weight einen fehlenden zugänglichen Namen.
- Regel
label- Referenz
- WCAG 4.1.2
Diagnose vor der Korrektur
Element: #voice-weight
Rolle: slider
Zugänglicher Name: leer
Wert: 7, Minimum: 0, Maximum: 10
Axe label: VerstoßFeldverknüpfungen in wiederholten Formularen prüfen
Eine gemeinsame Feldkomponente braucht pro Verwendung eindeutige IDs und eine passende Verbindung zur Beschriftung.
- Konzertentwurf× Befund im Beispiel
- Entwurf bearbeiten× Befund im Beispiel
- Profil bearbeiten Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenKontrollieren Sie Namen und eindeutige Verweise in jedem gerenderten Formular.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Verbindung passt zu Ihrem Formular?
Beginnen Sie mit dem sichtbaren Feldnamen. Er soll auch bei der Bedienung mit assistiver Technik verfügbar sein.
Die Lehrskizze zeigt den vorhandenen Regler und seinen Text. aria-labelledby verbindet beide; der Wert bleibt 7.
Passende Umsetzung auswählen
Fundstelle ansehen
Der erste Regler im Konzertplaner
Der Ausschnitt enthält die Überschrift, die drei Gewichtungen, die Auswertungsschaltfläche und das Ergebnis. Damit bleibt nachvollziehbar, wofür der markierte Regler eingesetzt wird.
„Vokaler Schwerpunkt“ beschreibt die Gewichtung der Stimme im Konzertentwurf. Im Ausgangszustand erreicht diese Beschriftung den Screenreader nicht als Name des Reglers. Die Markierung zeigt das betroffene Eingabefeld, nicht einen fehlenden sichtbaren Text.
Verbindung ergänzen
Den vorhandenen Text als Namen verwenden
Das span erhält die id voice-weight-label. Der Regler referenziert genau diese id mit aria-labelledby. Beschriftung, Wert und Darstellung bleiben gleich; ergänzt wird die semantische Beziehung.
In Ihrer Formularvorlage Nutzen Sie nach Möglichkeit die native Label-Funktion Ihres Formularsystems. Prüfen Sie im ausgegebenen HTML, ob sie das Feld tatsächlich verknüpft. Eine Überschrift oder ein Textblock oberhalb des Feldes genügt allein nicht.
Vorher
<span>Vokaler Schwerpunkt</span>
<input id="voice-weight" type="range"
min="0" max="10" value="7">Nachher
<span id="voice-weight-label">Vokaler Schwerpunkt</span>
<input id="voice-weight" type="range"
min="0" max="10" value="7"
aria-labelledby="voice-weight-label">Markierte Zeilen wurden geändert
Im Formular umsetzen
Den Feldnamen über alle Zustände erhalten
Eine funktionierende Zuordnung muss auch bei wiederholten Komponenten und nach Aktualisierungen des Formulars bestehen bleiben.
- 1
Vergeben Sie die id der Beschriftung pro Seite eindeutig; wiederholte Regler benötigen eigene Zuordnungen.
- 2
Verwenden Sie als Namen den sichtbaren Zweck „Vokaler Schwerpunkt“. Den aktuellen Zahlenwert liefert hier bereits der native Regler.
- 3
Prüfen Sie dynamisch eingefügte Felder im gerenderten Zustand: Der referenzierte Text muss vorhanden und für assistive Technik verfügbar sein.
- 4
Übertragen Sie die passende Verbindung auch auf die benachbarten Regler. Der Beleg korrigiert gezielt nur die erste Fundstelle.
Fehlversuche vermeiden
Ein Text mehr ist noch keine Beschriftung
Nur das name-Attribut setzen
name steuert die Datenübermittlung eines Formularfelds. Es macht „Vokaler Schwerpunkt“ nicht zum zugänglichen Namen.
Die falsche id referenzieren
aria-labelledby erwartet die id des beschriftenden Elements. Eine veraltete oder doppelte id kann die Zuordnung verhindern oder einen anderen Text liefern.
Den Namen durch einen Hinweis ersetzen
„Von 0 bis 10 einstellen“ erklärt die Bedienung, benennt aber nicht die Gewichtung. Zusätzliche Hinweise gehören getrennt zum Feld, etwa über aria-describedby.
Den Scanner mit beliebigem Text zufriedenstellen
Ein vorhandener Name kann den automatischen Test bestehen und trotzdem fachlich falsch sein. Vergleichen Sie ihn immer mit der sichtbaren Beschriftung und der tatsächlichen Funktion.
Der Regler hat jetzt einen überprüften Namen
Am selben Element #voice-weight besteht die Regel label nach der Korrektur. Zusätzlich wurde der Regler über die Rolle slider und den exakten Namen „Vokaler Schwerpunkt“ gefunden; sein Wert bleibt 7.
So prüfen Sie die Korrektur nach
- Öffnen Sie die veröffentlichte Seite und kontrollieren Sie den berechneten Namen des Reglers im Accessibility-Bereich der Browserwerkzeuge.
- Starten Sie den erneuten Scan und vergleichen Sie die Fundstelle #voice-weight mit dem vorherigen Lauf.
- Navigieren Sie mit dem Screenreader zum Regler und ändern Sie den Wert per Tastatur. Prüfen Sie, ob Name, Rolle und Wert zusammen verständlich ausgegeben werden.
Der Nachweis betrifft die Namenszuordnung des ersten Reglers. Die anderen beiden Regler und die Verständlichkeit der gesamten Konzertplanung sind dadurch nicht mitgeprüft.
Verifiziert nach der Korrektur
Element: #voice-weight
Rolle: slider
Zugänglicher Name: Vokaler Schwerpunkt
Wert: 7
Axe label: bestanden
Bilddarstellung: unverändertPrüfgrenzen kennen
Einen Namen erkennen und seine Qualität beurteilen
Der automatische Befund zeigt die fehlende technische Benennung. Ob ein vorhandener Feldname die richtige Erwartung vermittelt, braucht eine inhaltliche Prüfung.
Automatisch prüfbar
- Fehlende zugängliche Namen an unterstützten nativen Formularfeldern erkennen
- Den betroffenen Regler im gerenderten Formular lokalisieren
- Die reparierte Zuordnung mit derselben Regel erneut prüfen
Im Kontext zu entscheiden
- Feldnamen mit sichtbarer Beschriftung und tatsächlicher Funktion vergleichen
- Name, Rolle und Wert bei Screenreader- und Tastaturbedienung prüfen
- Dynamische Formularzustände, zusätzliche Hinweise und Fehlermeldungen im vollständigen Ablauf beurteilen