Zum Inhalt springen
A11ySignal
kritischWCAG 4.1.2 · A

<form>-Elemente müssen eine Beschriftung haben.

label

Stellt sicher, dass jedes <form>-Element über eine Beschriftung verfügt.

Das Kriterium dahinter

4.1.2 Name, Rolle, Wert

Jedes Bedienelement muss preisgeben, was es ist, wie es heißt und in welchem Zustand es sich befindet.

Stufe A · EN 301 549 § 9.4.1.2

Warum es diese Prüfung gibt

Das ist das Kriterium, an dem eigene Komponenten scheitern. Ein als Checkbox gestyltes `div` sagt assistiver Technik nichts darüber, ob es angehakt ist.

Was sie üblicherweise auslöst

  • fällt durchEin `<div>`-Umschalter ohne `role="switch"` und ohne `aria-checked`.
  • fällt durchEin Icon-Button ohne zugänglichen Namen.
  • fällt durchEin Akkordeon, dessen Kopf `aria-expanded` nie aktualisiert.
  • fällt durchEin eigenes `<select>` ohne `role="combobox"` und ohne `aria-activedescendant`.

So beheben Sie es

  • tunNehmen Sie das native Element, wo es eines gibt. `<button>`, `<input type="checkbox">` und `<select>` bringen all das von Haus aus mit.
  • tunFür ein wirklich eigenes Widget folgen Sie dem passenden Muster der ARIA Authoring Practices, einschließlich Tastaturverhalten.
  • tunHalten Sie die Zustandsattribute mit dem synchron, was auf dem Bildschirm steht.

Wie es gemeldet wird

A11ySignal meldet das mit der Schwere kritisch. Jedes fehlerhafte Element kommt mit seinem CSS-Selektor und dem Markup, das durchgefallen ist — Sie kommen also direkt zur Zeile, statt sie zu suchen. Deque veröffentlicht die Details auf Engine-Ebene:

https://dequeuniversity.com/rules/axe/4.13/label

Prüfung umgesetzt in axe-core 4.13.0, © Deque Systems, MPL-2.0.

Weitere Prüfungen für 4.1.2