Saltar a contenido principal

Agrupar controles usando ARIA

Si por algún motivo no puedes usar fieldset y legend para agrupar controles de formulario puedes usar la alternativa ARIA, en inglés: Accessible Rich Internet Applications.

Ejemplo para opciones de botón

<div role="radiogroup" aria-labelledby="etiqueta-frutas-1">
  <span id="etiqueta-frutas-1">Fruta favorita</span> 
  <div>
    <input
      type="radio"
      name="fruta"
      id="fruta-1" 
      value="manzana"
    >
    <label for="fruta-1">Manzana</label>
  </div>
  <div>
    <input
      type="radio"
      name="fruta"
      id="fruta-2"
      value="sandia"
    >
    <label for="fruta-2">Sandía</label>
  </div>
</div>

El valor de aria-labelledby debe ser único en la página e igual al valor del atributo id al cual está asociado.

Ejemplo para casillas de verificación

<div role="group" aria-labelledby="etiqueta-frutas-2">
  <span id="etiqueta-frutas-2">Fruta favorita</span> 
  <div>
    <input
      id="fruta-3"
      type="checkbox"
      value="manzana"
    >
    <label for="fruta-3">Manzana</label>
  </div>
  <div>
    <input
      id="fruta-4"
      type="radio"
      value="sandia"
    >
    <label for="fruta-4">Sandía</label>
  </div>
</div>