Gruppering med fieldset

Silktide kontrollerer at grupper av relaterte alternativknapper eller avmerkingsbokser pakkes inn i et fieldset. Fieldset-elementet forteller at alternativene hører sammen og utgjør ett enkelt spørsmål.

I fungerer alternativknapper og avmerkingsbokser som har samme name-attributt, som én gruppe – velg størrelse, velg tilbehør. Visuelt er grupperingen åpenbar fordi alternativene står sammen; i koden er det bare <fieldset> som gjør dette tydelig.

<!-- Problem: relaterte alternativer uten gruppering -->
<label><input type="checkbox" name="fruit" value="apple"> Eple</label>
<label><input type="checkbox" name="fruit" value="banana"> Banan</label>

Hvorfor dette er viktig

En leser opp hvert alternativ når det nås. Uten en gruppe hører brukeren «Eple, avmerkingsboks» og «Banan, avmerkingsboks», uten noen indikasjon på hvilket spørsmål de svarer på – spørsmålsteksten kan ha blitt lest opp lenge før, eller aldri ha vært knyttet til dem. Når alternativene pakkes inn i et fieldset med en legend, leses hvert alternativ opp i sin sammenheng, slik at brukeren alltid vet hva de velger.

Slik løser du det

Pakk hvert sett med relaterte alternativer inn i et <fieldset>, og beskriv gruppen med en <legend>:

<!-- Løst: gruppen er tydelig og navngitt -->
<fieldset>
  <legend>Velg favorittfruktene dine</legend>
  <label><input type="checkbox" name="fruit" value="apple"> Eple</label>
  <label><input type="checkbox" name="fruit" value="banana"> Banan</label>
</fieldset>

Slik tester Silktide dette

Finn alle alternativknapper og avmerkingsbokser på hver side.
Grupper dem etter name-attributtet.
For hver gruppe på to eller flere rapporteres hvert medlem som ikke er inne i et <fieldset>-element.

Feilsøking

Alternativene mine er gruppert på en annen måte

Denne kontrollen ser spesifikt etter en <fieldset>-forfader. Grupperinger som bare uttrykkes visuelt, eller med annen markering som role="group", oppdages ikke. Fieldset-metoden har bredest støtte; hvis du er sikker på at den alternative grupperingen din leses opp riktig, kan du funnet.