Fieldset-Legenden

Silktide überprüft, dass jede Gruppe von Formularfeldern, die mit einem <fieldset> deklariert ist, auch eine <legend> enthält, die beschreibt, wofür die Gruppe gedacht ist. Die Legende gibt der gesamten Gruppe einen Namen, sodass jede Option im Kontext wahrgenommen wird.

In gruppiert das <fieldset>-Element verwandte Formularelemente – eine Gruppe von Optionsfeldern (Radiobuttons), Kontrollkästchen oder Adressfeldern – und das <legend>-Element ist dessen Beschriftung.

<!-- Problem: Die Gruppe hat keine Legende -->
<fieldset>
  <label><input type="radio" name="size" value="s"> Klein</label>
  <label><input type="radio" name="size" value="l"> Groß</label>
</fieldset>

Warum das wichtig ist

Sehende Nutzerinnen und Nutzer sehen die Beschriftung der Gruppe direkt über den Optionen. Eine -Nutzerin oder ein -Nutzer hört jede Option einzeln; ohne Legende hört die Person nur „Klein“ und „Groß“, ohne Hinweis darauf, was gewählt wird. Die Legende wird angekündigt, sobald die Person die Gruppe betritt, sodass Informationen wie „T-Shirt-Größe“ alle erreichen.

So beheben Sie das

Fügen Sie eine <legend> als erstes Element direkt innerhalb jedes <fieldset> hinzu und beschreiben Sie die Gruppe in wenigen Worten:

<!-- Behoben: Die Legende benennt die Gruppe -->
<fieldset>
  <legend>T-Shirt-Größe</legend>
  <label><input type="radio" name="size" value="s"> Klein</label>
  <label><input type="radio" name="size" value="l"> Groß</label>
</fieldset>

Halten Sie Legenden kurz – Screenreader können die Legende für jedes Feld in der Gruppe wiederholen.

So testet Silktide das

Jedes <fieldset>-Element auf jeder Seite finden.
Jedes melden, das kein <legend>-Element als direktes Kindelement hat.

Fehlerbehebung

Meine Legende existiert, wird aber trotzdem gemeldet

Das <legend> muss ein direktes Kindelement des <fieldset> sein. Eine Beschriftung, die in einem anderen Element verschachtelt ist, etwa einem <div>-Wrapper, wird weder von dieser Prüfung noch von als Legende der Gruppe erkannt.