group

Кога се използва

За групирани контроли в форма използвайте <fieldset> с <legend>. Нативният елемент ви дава семантиката на групата, визуалната рамка (стилизирайте я по желание) и асоциирането с легенда.

role="group" е правилният инструмент, когато:

• Обгръщате набор от свързани, но нефункционални контроли (три комбинирани полета за избор на дата, ред от икони-превключватели).
• Трябва да маркирате подобласт в дърво, дървовиден изглед или таблица, при която децата на всяко ниво образуват логическа група.
• Искате групиране, което НЕ е изложено като ориентир — вижте role="region" за това разграничение.

Групата ТРЯБВА да има достъпно наименование (aria-label или aria-labelledby), когато предназначението й не е очевидно от контекста. Без наименование групата е невидима за екранните четци и ролята не носи никаква стойност.

Чести грешки

• role="group" без достъпно наименование. Екранните четци игнорират ролята; групата е невидима.
• Употреба на role="group" там, където <fieldset> + <legend> биха свършили работа. Нативният елемент е предпочитан.
• Бъркане на role="group" с role="region". Region е ориентир и се появява в навигацията с ориентири; group — не.
• Маркиране на всеки раздел от потребителския интерфейс като група. Използвайте пестеливо — прекалено много групирания обезценяват всяко от тях.
• role="group" върху обвивката около role="tablist". Излишно е; tablist вече е конструкция за групиране.

Пример

<!-- Препоръчително за контроли в форма -->
<fieldset>
  <legend>Date of birth</legend>
  <label>Day <input type="text" inputmode="numeric"></label>
  <label>Month <input type="text" inputmode="numeric"></label>
  <label>Year <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Нефункционално групиране -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Rate this article</span>
  <button type="button" aria-label="1 star">★</button>
  <button type="button" aria-label="2 stars">★★</button>
</div>