Rol Estructura del documento

`group`

Marca una agrupación genérica de elementos relacionados. Tiene menos peso semántico que un punto de referencia — los lectores de pantalla no lo anuncian en el menú de puntos de referencia. Para controles de formulario se prefiere <fieldset> + <legend>; role="group" aplica a agrupaciones que no sean de formulario.

Cuándo utilizarlo

Para controles de formulario agrupados, se recomienda usar <fieldset> con <legend>. El elemento nativo proporciona la semántica de agrupación, el borde visual (que puede estilizarse libremente) y la asociación con la leyenda.

role="group" es la herramienta adecuada cuando:

Se engloba un conjunto de controles relacionados que no son controles de formulario (los tres cuadros combinados de un selector de fecha, una fila de botones de alternancia con iconos).
Es necesario marcar una subregión dentro de un árbol, vista de árbol o cuadrícula donde los hijos de cada nivel forman un grupo lógico.
Se desea una agrupación que NO se exponga como punto de referencia — para esa distinción, véase role="region".

Un grupo DEBERÍA tener un nombre accesible (aria-label o aria-labelledby) cuando su propósito no sea evidente por el contexto. Sin nombre, el grupo es invisible para los lectores de pantalla y el rol no aporta valor.

Errores frecuentes

role="group" sin nombre accesible. Los lectores de pantalla ignoran el rol; el grupo es invisible.
Usar role="group" donde <fieldset> + <legend> funcionarían. Se prefiere el elemento nativo.
Confundir role="group" con role="region". Region es un punto de referencia y aparece en la navegación por puntos de referencia; group no.
Marcar cada sección de la interfaz como un grupo. Debe usarse con moderación — demasiadas agrupaciones diluyen el valor de cada una.
role="group" en el contenedor de un role="tablist". Redundante; el tablist ya es una construcción de agrupación.

Ejemplo

<!-- Preferido para controles de formulario -->
<fieldset>
  <legend>Fecha de nacimiento</legend>
  <label>Día <input type="text" inputmode="numeric"></label>
  <label>Mes <input type="text" inputmode="numeric"></label>
  <label>Año <input type="text" inputmode="numeric"></label>
</fieldset>

<!-- Agrupación fuera de formulario -->
<div role="group" aria-labelledby="ratingLabel">
  <span id="ratingLabel">Valorar este artículo</span>
  <button type="button" aria-label="1 estrella">★</button>
  <button type="button" aria-label="2 estrellas">★★</button>
</div>