Accesibilidad web: ¿cómo asignar correctamente un label a grupos de botones de radio y casillas de verificación?

¿Alguna vez has dudado sobre cómo tratar el label de un grupo de botones de radio o casillas de verificación al crear un formulario? En particular, es común tener dudas sobre cómo etiquetar el grupo en su conjunto y cómo manejar el atributo for.

En este artículo, organizamos cómo etiquetar estos grupos y presentamos métodos concretos para hacerlo.

Métodos habituales y sus problemas

Apuntar for al primer elemento

Para grupos de botones de radio o casillas de verificación, se trata de dirigir el atributo <label>for al primer elemento del grupo.

Por ejemplo, el siguiente código.

<div class="form-group">
  <label for="fruit-apple">好きな果物</label>
  <div>
    <label><input type="radio" id="fruit-apple" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

Visualmente no parece haber ningún problema, pero en los lectores de pantalla el label "Fruta favorita" solo queda asociado al primer botón de radio, por lo que el grupo no se reconoce correctamente en su conjunto.

Sin especificar for

<div class="form-group">
  <label>好きな果物</label>
  <div>
    <label><input type="radio" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

Este método no deja claro a qué elemento está asociada la etiqueta. Especialmente para los usuarios de lectores de pantalla, resulta poco claro qué opción está vinculada a la etiqueta.

Una posible mejora

Agrupar con el atributo role y etiquetar con aria-labelledby

Este método consiste en agrupar los botones de opción y las casillas de verificación con role="radiogroup" o role="group", y asociarlos con el elemento que corresponde a la etiqueta con ID especificado mediante aria-labelledby. Así se indica claramente a los lectores de pantalla que la etiqueta "Fruta favorita" se aplica a todo el grupo.

Botones de opción

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="radiogroup" aria-labelledby="fruit-group">
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

Casillas de verificación

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="group" aria-labelledby="fruit-group">
      <label><input type="checkbox" name="fruit" value="apple">りんご</label>
      <label><input type="checkbox" name="fruit" value="orange">みかん</label>
      <label><input type="checkbox" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

Método con <fieldset>fieldset y <legend>legend

Como alternativa, existe un método que utiliza <fieldset>fieldset y <legend>legend. Este enfoque se basa en la semántica de HTML, por lo que el grupo completo se reconoce correctamente sin necesidad de añadir atributos especiales ni roles.

En el siguiente ejemplo, el grupo de botones de opción se envuelve en <fieldset>fieldset y se usa <legend>legend como etiqueta.

Nota: ¡Atención! Puede darse el caso de que, por motivos de diseño, quiera colocar las etiquetas y los campos de entrada en una disposición horizontal. En ese caso, sería necesario aplicar display: contents; a fieldset, pero no lo recomendamos, ya que en algunos navegadores el legend se elimina del árbol de accesibilidad. Forzar la alineación con CSS a costa de la accesibilidad no es una buena práctica.

<div class="form-group">
  <fieldset>
    <legend>好きな果物</legend>
    <div>
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </fieldset>
</div>

Conclusión

El etiquetado de grupos de botones de radio y casillas de verificación puede organizarse de la siguiente manera.

Método con role y aria-labelledby

• Permite una personalización flexible cuando es necesaria
• Establecer explícitamente la etiqueta del grupo combinándola con role="group"

Método con <fieldset>fieldset y <legend>legend

• Método estándar basado en la semántica
• Permite una implementación más robusta y accesible
• Según la disposición, puede presentar problemas de accesibilidad

Según el diseño y los requisitos, cualquiera de los dos métodos permite lograr una accesibilidad adecuada.

Usar <fieldset>fieldset y <legend>legend es más semántico, pero en formularios de contacto y otras estructuras de diseño complejas, role y aria-labelledby pueden resultar más prácticos.

¡La accesibilidad web todavía tiene mucha profundidad!