group

Hvornår skal den bruges

Til grupperede formkontroller bruges <fieldset> med <legend>. Det native element giver gruppesemantik, den visuelle kant (stil som ønsket) og legend-tilknytningen.

role="group" er det rette værktøj, når:

• Man omslutter et sæt relaterede, men ikke-formkontroller (en datovælgers tre comboboxer, en række ikontoggles).
• Man skal markere en underregion inde i et tree, treeview eller gitter, hvor hvert niveaus underordnede elementer udgør en logisk gruppe.
• Man ønsker en gruppering, der IKKE eksponeres som et landmark — for den skelnen, se role="region".

En gruppe BØR have et tilgængeligt navn (aria-label eller aria-labelledby), når dens formål ikke er tydeligt af konteksten. Uden et navn er gruppen usynlig for skærmlæsere, og rollen tilføjer ingen værdi.

Typiske fejl

• role="group" uden tilgængeligt navn. Skærmlæsere ignorerer rollen; gruppen er usynlig.
• Brug af role="group", hvor <fieldset> + <legend> ville fungere. Native foretrækkes.
• Forveksling af role="group" med role="region". Region er et landmark og vises i landmark-navigation; group er det ikke.
• Markering af hvert UI-afsnit som en gruppe. Brug sparsomt — for mange grupperinger udhuler værdien af hver enkelt.
• role="group" på en wrapper rundt om en role="tablist". Overflødigt; tablist er allerede en grupperingskonstruktion.

Eksempel

<!-- Foretrukket til formkontroller -->
<fieldset>
  <legend>Fødselsdato</legend>
  <label>Dag <input type="text" inputmode="numeric"></label>
  <label>Måned <input type="text" inputmode="numeric"></label>
  <label>År <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Ikke-formgruppering -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Bedøm denne artikel</span>
  <button type="button" aria-label="1 stjerne">★</button>
  <button type="button" aria-label="2 stjerner">★★</button>
</div>