Praxisleitfaden Beschriftung und Eingabehilfe
Mehrfache Feldbeschriftungen prüfen
Klären Sie den Feldnamen, ohne notwendige Eingabehinweise zu verlieren.
form-field-multiple-labelsWCAG 3.3.2
Sehen Sie, was sich durch die Korrektur ändert.
Prüfhinweis einordnen
Zwei Labels sind ein Anlass zur Prüfung
Scanner-Signal
form-field-multiple-labels meldet #rental-hours als manuell zu prüfende Fundstelle: Zwei label-Elemente verweisen auf dieselbe ID.
Technische Einordnung
- Regel
form-field-multiple-labels- Referenz
- WCAG 3.3.2
Im Ausleihrechner stehen „Gewünschte Mietdauer“ und „Dauer in Modellstunden“ am selben Zahlenfeld. Die Texte ergänzen sich. Ihre Anzahl allein belegt weder eine widersprüchliche Eingabeaufforderung noch einen Verstoß gegen WCAG 3.3.2.
Bedeutung im Nutzungskontext
Wenn eine verwendete Screenreader-Browser-Kombination nur einen der Texte ausgibt, kann der Feldzweck oder die Einheit fehlen. Entscheidend ist, ob Menschen die erwartete Eingabe vollständig verstehen.
Zuordnung vor der Korrektur
#rental-hours
Label 1: Gewünschte Mietdauer
Label 2: Dauer in Modellstunden
aria-describedby: nicht vorhanden
Axe: incomplete · manuell prüfenFeldnamen und Hinweise gemeinsam prüfen
Bewerten Sie ergänzende Labels im Formularablauf, bevor Sie Texte entfernen oder neu zuordnen.
Rechenbeispiel · Mehrfache Feldbeschriftung
- Annahme: ein relevantes Formular je Seite.
- Annahme: zwölf Minuten je Seite für Name, Einheit und Screenreader-Ausgabe.
- Umsetzung und vollständiger Formularaudit sind nicht enthalten.
Das ist keine gemessene Prüfzeit und kein Vergleich mit der Scanner-Geschwindigkeit. Inhaltliche Beurteilungen bleiben manuelle Arbeit.
Welcher Text benennt das Feld?
Prüfen Sie Zweck, Einheit und mögliche Widersprüche, bevor Sie eine Beschriftung entfernen.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Ein Name mit ergänzender Hilfe | Ein Text benennt die Mietdauer, der andere erläutert ihre Einheit. So ist es im gezeigten Rechner. | Lassen Sie die Feldbezeichnung als Label bestehen und ordnen Sie die sichtbare Hilfe mit aria-describedby zu. |
| Zwei unterschiedliche Eingabeaufforderungen | Die Beschriftungen verlangen etwa eine Kundennummer und eine davon verschiedene Vertragsnummer. | Klären Sie fachlich, welche Angabe verarbeitet wird. Formulieren Sie danach einen eindeutigen Namen oder trennen Sie tatsächlich verschiedene Eingaben. |
| Mehrere bewusst ergänzende Labels | Die Beschriftungen ergeben zusammen eine verständliche Aufforderung und sind in den unterstützten Bedienwegen vollständig verfügbar. | Dokumentieren Sie die manuelle Bewertung. Mehrere Labels sind in HTML möglich; aus dem Scanner-Hinweis folgt keine pauschale Löschpflicht. |
Kontext betrachten
Die Mietdauer im vollständigen Ausleihblock
Der Ausschnitt enthält die Überschrift, das komplette Formular und die Modellrechnung. Sie sehen, wie die Mietdauer zusammen mit Ausgabefenster, Strecke und Tarif verwendet wird.
Markiert ist das Zahlenfeld mit dem Wert 5. Oberhalb steht die gewünschte Mietdauer, darunter die Einheit Modellstunden. Der zweite Text soll erhalten bleiben; zu prüfen ist seine technische und inhaltliche Zuordnung.
Korrekturbeispiel
Den Einheitenhinweis als Beschreibung verknüpfen
Das zweite label wird durch einen sichtbaren span mit eigener ID ersetzt. aria-describedby verbindet diesen Hinweis mit dem Eingabefeld. Der Feldname bleibt „Gewünschte Mietdauer“, der Hilfetext bleibt wortgleich und sichtbar.
Im Formularsystem Tragen Sie die Einheit im Hilfetext-Feld der Komponente ein und prüfen Sie das gerenderte HTML. Manche Systeme zeigen Hilfetexte an, ohne sie mit dem Eingabefeld zu verknüpfen.
Vorher
<label for="rental-hours">Gewünschte Mietdauer</label>
<input id="rental-hours" type="number"
min="1" max="24" value="5">
<label for="rental-hours" class="second-duration-label">
Dauer in Modellstunden
</label>Nachher
<label for="rental-hours">Gewünschte Mietdauer</label>
<input id="rental-hours" type="number"
min="1" max="24" value="5"
aria-describedby="rental-hours-hint">
<span id="rental-hours-hint" class="second-duration-label">
Dauer in Modellstunden
</span>Markierte Zeilen wurden geändert
Im Produkt umsetzen
Name und Hilfe gemeinsam pflegen
Die Zuordnung muss auch nach Änderungen am Formular verlässlich bleiben.
- 1
Formulieren Sie im Label, welche Angabe erwartet wird; ergänzen Sie Einheit oder Format als sichtbare Hilfe.
- 2
Übernehmen Sie die Darstellung des bisherigen Hinweises in eine passende Hilfetext-Klasse. Das gezeigte HTML konzentriert sich auf die Zuordnung.
- 3
Vergeben Sie für jedes Feld und jeden Hinweis eindeutige IDs, auch in wiederholten Formulargruppen.
- 4
Ergänzen Sie vorhandene aria-describedby-Verweise, statt andere Hilfen oder Fehlermeldungen zu überschreiben.
- 5
Kontrollieren Sie im Browser die berechneten Eigenschaften für Name und Beschreibung sowie die tatsächliche Screenreader-Ausgabe.
Informationsverlust vermeiden
Weniger Labels genügen nicht
Den zweiten Text löschen
Damit verschwände hier der Hinweis auf Modellstunden direkt am Feld. Eine kleinere Label-Anzahl rechtfertigt diesen Informationsverlust nicht.
Nur das for-Attribut entfernen
Die Hilfe ist dann nicht automatisch als Beschreibung zugeordnet. Ersetzen Sie das Label durch ein geeignetes Textelement und verknüpfen Sie dessen ID.
Den Namen mit aria-label überdecken
Ein zusätzlicher unsichtbarer Name klärt weder die sichtbaren Beschriftungen noch ihre Beziehung. Er kann zudem von der sichtbaren Feldbezeichnung abweichen.
Den technischen Re-Test als Fachfreigabe werten
Ein einzelnes Label kann weiterhin unverständlich sein. Erwartete Eingabe, Einheit und Bedienung müssen im Formular geprüft werden.
Die Zuordnung ist geändert; die Bewertung bleibt offen
Der erneute Axe-Lauf meldet an #rental-hours keine Mehrfachbeschriftung mehr. Der DOM-Test bestätigt ein Label, den verknüpften sichtbaren Hilfetext und die unveränderten Eingabewerte. Das Beispiel bleibt ausdrücklich ein Korrekturbeispiel mit manueller Prüfung.
Im Beispiel dokumentiert
Korrekturbeispiel · Manuell nachprüfen
„Dauer in Modellstunden“ bleibt sichtbar und ist jetzt über aria-describedby zugeordnet. Die Bildpixel bleiben unverändert; geändert ist die HTML-Beziehung.
Was Sie zusätzlich beurteilen müssen
Die unveränderten Rohbilder belegen keine Screenreader-Ausgabe. Eine solche Bedienprüfung wurde mit dieser Aufnahme nicht durchgeführt. Aus dem einzelnen Korrekturbeispiel folgt keine Aussage zur Barrierefreiheit des gesamten Rechners.
Was die Regel feststelltPrüfauftrag für Ihre Umsetzung
- Fokussieren Sie die Mietdauer mit Tastatur und Screenreader. Prüfen Sie, ob „Gewünschte Mietdauer“ als Name und „Dauer in Modellstunden“ als Beschreibung verfügbar sind.
- Lassen Sie eine Person aus dem Formular erklären, welche Zahl und welche Einheit erwartet werden, ohne die technische Umsetzung zu erläutern.
- Prüfen Sie bei Vergrößerung, dass Feldname, Eingabe und Hilfe zusammen erkennbar bleiben.
- Testen Sie den Formularablauf nach der Änderung: Die Mietdauer muss weiterhin in die Modellrechnung eingehen.
Technisch geprüft, manuell zu bewerten
#rental-hours
Label: Gewünschte Mietdauer
Beschreibung: Dauer in Modellstunden
Verknüpfung: aria-describedby="rental-hours-hint"
DOM-Prüfung: bestätigt
Fachliche Bewertung und Screenreader-Bedienprüfung: offenPrüfgrenzen kennen
Was die Regel feststellt
Die Regel erkennt mehrfache technische Beschriftungen; ihre Angemessenheit erfordert Kontext.
Automatisch prüfbar
- Mehrere label-Elemente am selben Feld als Prüfkandidaten erkennen
- Die Fundstelle mit Selektor und Seitenausschnitt zuordnen
- Nach der Änderung erneut prüfen, ob mehrere Labels bestehen
Im Kontext zu entscheiden
- Entscheiden, ob die Texte einander ergänzen oder unterschiedliche Eingaben verlangen
- Prüfen, ob Name, Einheit und weitere Hinweise vollständig verständlich sind
- Die Ausgabe und Bedienung mit den unterstützten Screenreader-Browser-Kombinationen erproben