Fieldset-legender

Silktide kontrollerar att varje grupp av formulärfält som deklarerats med ett fieldset också innehåller en legend som beskriver vad gruppen är till för. Legenden ger hela gruppen ett namn, så att varje alternativ hörs i sitt sammanhang.

I grupperar elementet <fieldset> relaterade formulärkontroller – en uppsättning radioknappar, kryssrutor eller adressfält – och elementet <legend> är dess rubrik.

<!-- Problem: gruppen saknar en legend -->
<fieldset>
  <label><input type="radio" name="size" value="s"> Liten</label>
  <label><input type="radio" name="size" value="l"> Stor</label>
</fieldset>

Varför detta är viktigt

En seende besökare ser gruppens rubrik precis ovanför alternativen. En användare av en hör varje alternativ ett i taget och hör utan en legend bara ”Liten” och ”Stor”, utan någon indikation på vad som väljs. Legenden läses upp när användaren kommer till gruppen, så att frågor som ”T-shirtstorlek” når alla.

Så här åtgärdar du det

Lägg till en <legend> som det första elementet inuti varje <fieldset> och beskriv gruppen med några få ord:

<!-- Åtgärdat: legenden namnger gruppen -->
<fieldset>
  <legend>T-shirtstorlek</legend>
  <label><input type="radio" name="size" value="s"> Liten</label>
  <label><input type="radio" name="size" value="l"> Stor</label>
</fieldset>

Håll legenderna korta – skärmläsare kan upprepa legenden för varje fält i gruppen.

Så här testar Silktide detta

Hitta varje <fieldset>-element på varje sida.
Rapportera varje sådant element som saknar ett <legend>-element som direkt barn.

Felsökning

Min legend finns, men rapporteras fortfarande

<legend> måste vara ett direkt barn till <fieldset>. En rubrik som ligger inuti ett annat element, till exempel ett <div>-omslag, känns inte igen som gruppens legend – varken av denna kontroll eller av .