group

Wanneer gebruiken

Voor gegroepeerde formulierbesturingselementen gebruikt men <fieldset> met <legend>. Native geeft de groeperingssemantiek, de visuele rand (naar wens te stylen) en de legendekoppeling.

role="group" is het juiste instrument wanneer:

• Een set verwante maar niet-formulierbesturingselementen wordt omhuild (de drie keuzelijsten van een datumkiezer, een rij pictogramschakelknoppen).
• Een subgebied in een boom, boomweergave of raster moet worden gemarkeerd waarbij de kinderen van elk niveau een logische groep vormen.
• Een groepering gewenst is die NIET als landmark wordt weergegeven — zie role="region" voor dat onderscheid.

Een groep ZOU een toegankelijke naam moeten hebben (aria-label of aria-labelledby) wanneer het doel niet duidelijk is uit de context. Zonder naam is de groep onzichtbaar voor schermlesers en voegt de rol geen waarde toe.

Veelvoorkomende fouten

• role="group" zonder toegankelijke naam. Schermlesers negeren de rol; de groep is onzichtbaar.
• role="group" gebruiken waar <fieldset> + <legend> zou werken. Native heeft de voorkeur.
• role="group" verwarren met role="region". Region is een landmark en verschijnt in landmarknavigatie; group niet.
• Elke UI-sectie als groep markeren. Spaarzaam gebruiken — te veel groeperingen verminderen de waarde van elke afzonderlijke groepering.
• role="group" op de wrapper rondom een role="tablist". Overbodig; de tablist is al een groeperingsconstructie.

Voorbeeld

<!-- Voorkeur voor formulierbesturingselementen -->
<fieldset>
  <legend>Geboortedatum</legend>
  <label>Dag <input type="text" inputmode="numeric"></label>
  <label>Maand <input type="text" inputmode="numeric"></label>
  <label>Jaar <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Niet-formuliergroepering -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Beoordeel dit artikel</span>
  <button type="button" aria-label="1 ster">★</button>
  <button type="button" aria-label="2 sterren">★★</button>
</div>