group

När används det

För grupperade formulärkontroller, använd <fieldset> med <legend>. Det native elementet ger dig gruppsemanken, den visuella ramen (styla som du vill) och legend-kopplingen.

role="group" är rätt verktyg när:

• Du omger en uppsättning relaterade men icke-formulärkontroller (ett datumväljarens tre comboboxar, en rad ikonväxlar).
• Du behöver markera ett delområde inuti ett träd, treeview eller rutnät där varje nivås barn bildar en logisk grupp.
• Du vill ha en gruppering som INTE exponeras som ett landmärke — för den skillnaden, se role="region".

En grupp BÖR ha ett tillgängligt namn (aria-label eller aria-labelledby) när syftet inte är uppenbart av sammanhanget. Utan namn är gruppen osynlig för skärmläsare och rollen tillför inget värde.

Vanliga fel

• role="group" utan tillgängligt namn. Skärmläsare ignorerar rollen; gruppen är osynlig.
• Att använda role="group" där <fieldset> + <legend> skulle fungera. Native föredras.
• Att förväxla role="group" med role="region". Region är ett landmärke och visas i landmärksnavigering; group gör det inte.
• Att markera varje UI-sektion som en grupp. Använd sparsamt — för många grupperingar urholkar värdet av var och en.
• role="group" på omslaget runt ett role="tablist". Redundant; tablist är redan en grupperingskonstruktion.

Exempel

<!-- Rekommenderat för formulärkontroller -->
<fieldset>
  <legend>Födelsedatum</legend>
  <label>Dag <input type="text" inputmode="numeric"></label>
  <label>Månad <input type="text" inputmode="numeric"></label>
  <label>År <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Icke-formulär-gruppering -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Betygsätt den här artikeln</span>
  <button type="button" aria-label="1 stjärna">★</button>
  <button type="button" aria-label="2 stjärnor">★★</button>
</div>