Legend-tekster for fieldset

Silktide kontrollerer at hver gruppe med skjemafelt som er deklarert med et fieldset, også har en legend som beskriver hva gruppen brukes til. Legenden gir hele gruppen et navn, slik at hvert alternativ blir lest opp i riktig sammenheng.

I grupperer <fieldset>-elementet relaterte skjemakontroller – et sett med alternativknapper, avkrysningsbokser eller adressefelt – og <legend>-elementet er overskriften for gruppen.

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

Hvorfor dette er viktig

En seende besøkende ser gruppens overskrift rett over alternativene. En bruker av hører hvert alternativ ett om gangen, og uten en legend hører brukeren bare «Liten» og «Stor», uten noen indikasjon på hva som velges. Legenden leses opp når brukeren går inn i gruppen, slik at spørsmål som «T-skjortestørrelse» blir forståelige for alle.

Slik løser du det

Legg til en <legend> som det første elementet i hvert <fieldset>, og beskriv gruppen med noen få ord:

<!-- Løst: legenden navngir gruppen -->
<fieldset>
  <legend>T-skjortestørrelse</legend>
  <label><input type="radio" name="size" value="s"> Liten</label>
  <label><input type="radio" name="size" value="l"> Stor</label>
</fieldset>

Hold legendene korte – skjermlesere kan gjenta legenden for hvert felt i gruppen.

Slik tester Silktide dette

Finn hvert <fieldset>-element på hver side.
Rapporter hvert element som ikke har et <legend>-element som direkte barn.

Feilsøking

Legenden min finnes, men rapporteres fortsatt

<legend> må være et direkte barn av <fieldset>. En overskrift som ligger inne i et annet element, for eksempel en <div>-omslutning, blir ikke gjenkjent som gruppens legend – verken av denne kontrollen eller av .