s Guías Prácticas de Código Accesible
Escudo de la República de Colombia

Controles de Agrupación

Agrupar controles de formulario relacionados hace que los formularios sean más comprensibles para todos los usuarios, ya que estos son más fáciles de identificar. El agrupamiento debe llevarse a cabo visualmente y en el código, la técnica para realizar esto es agrupar los elementos utilizando un elemento <fieldset>, luego usar un elemento <legend> para marcar la pregunta. Además, las entradas relacionadas de un elemento <select> se pueden agrupar utilizando <optgroup>.


Agrupación de controles usando los elementos <fieldset> y <legend>

<fieldset>: Este elemento proporciona un contenedor para controles de formulario relacionados.

<legend>: Este elemento actúa como un encabezado para identificar el grupo. La leyenda de un grupo de controles también puede resaltar los atributos comunes de todos los controles, por ejemplo, para avisar que se requiere todos los campos del grupo.


Agrupación de radio buttons
Ejemplo:
Tipo de Documento
Fragmento de Código: 
<fieldset>
<legend>Tipo de Documento</legend>
  <div>
    <input type="radio" name="format" id="cc" value="cc" checked>
    <label for="cc">Cedula</label>
  </div>
  <div>
    <input type="radio" name="format" id="pasaporte" value="pasaporte">
    <label for="pasaporte">Pasaporte</label>
  </div>
  […]
</fieldset>

Agrupación de Checkbox
Ejemplo:
Color favorito
Fragmento de Código: 
<fieldset>
<legend>I want to receive</legend>
  <div>
    <input type="checkbox" name="azul" id="check_1">
    <label for="check_1">Azul</label>
  </div>
  […]
</fieldset>

Agrupación de campos relacionados
Ejemplo:
Datos Personales:





Datos de un Familiar:





Fragmento de Código: 
<fieldset>
  <legend>Datos Personales:</legend>
  <div>
    <label for="p_name">
      <span class="visuallyhidden">Personal </span>Nombres:
    </label><br>
    <input type="text" name="p_name" id="p_name">
  </div>
  <div>
    <label for="p_lastname">Apellidos:</label><br>
    <input type="text" name="p_lastname" id="p_lastname">
  </div>
  […]
</fieldset>
<fieldset>
  <legend>Datos de un Familiar:</legend>
  <div>
    <label for="f_name">
      <span class="visuallyhidden">Family </span>Nombres:
    </label><br>
    <input type="text" name="f_name" id="f_name">
  </div>
  <div>
    <label for="f_lastname">Apellidos:</label><br>
    <input type="text" name="f_lastname" id="f_lastname">
  </div>
  […]
</fieldset>

Agrupación de campos relacionados usando WAI-ARIA
Ejemplo:
Datos Personales:





Datos de un Familiar:






Fragmento de Código:: 
<div role="group" aria-labelledby="p_head">
  <div id="p_head">Datos Personales:</div>
  <div>
    <label for="p_name">
      <span class="visuallyhidden">p </span>Nombres:
    </label><br>
    <input type="text" name="p_name" id="p_name">
  </div>
  […]
</div>
<div role="group" aria-labelledby="f_head">
  <div id="f_head">Datos de un Familiar:</div>
  <div>
    <label for="f_name">
      <span class="visuallyhidden">f </span>Nombres:
    </label><br>
    <input type="text" name="f_name" id="f_name">
  </div>
  […]
</div>

Agrupación de controles usando el elemento <optgroup>
Ejemplo:
¿Que pelicula desea ver hoy?
Fragmento de Código:: 
<select>
  <optgroup label="8.01 Acción">
    <option value="8.01.1">Rápido y Furioso 7</option>
    <option value="8.01.2">Deadpool</option>
    <option value="8.01.3">X-mens</option>
  </optgroup>
  <optgroup label="8.02 Romanticas">
    <option value="8.02.1">Querido jhon?</option>
    […]
  </optgroup>
  […]
</select>