Accesibilidad web: ¿Cómo etiquetar correctamente grupos de botones de opción y casillas de verificación?

Al crear formularios, ¿alguna vez se ha preguntado cómo manejar las etiquetas label para grupos de botones de opción o casillas de verificación? En particular, puede resultar confuso determinar cómo etiquetar todo el grupo y cómo tratar el atributo for.

Esta vez, organizaremos estos temas sobre etiquetado de grupos e introduciremos métodos específicos.

Métodos comunes y sus problemas

Dirigir el for al primer elemento

Es un método para dirigir el atributo <label>for de <label> al primer elemento de un grupo de botones de radio o casillas de verificación.

Por ejemplo, código como el siguiente:

<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>

Aunque puede parecer que no hay problema en la apariencia visual, en los lectores de pantalla la etiqueta "fruta favorita" se asocia solo con el primer botón de opción, por lo que el grupo completo no se reconoce correctamente.

No 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 se asocia la etiqueta. Especialmente para usuarios que utilizan lectores de pantalla, no queda evidente cuál opción se vincula a la etiqueta.

Una mejor opción de mejora

Agrupar con el atributo role y etiquetar con aria-labelledby

Un método que agrupa botones de radio o casillas de verificación con role="radiogroup" o role="group", y los relaciona mediante aria-labelledby con el elemento cuyo ID corresponde a la etiqueta especificada. De esta forma, se puede indicar explícitamente al lector de pantalla que la etiqueta "Fruta favorita" se aplica a todo el grupo.

Botón de radio

<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>

Casilla 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 que utiliza <fieldset> y <legend>

Como otro enfoque, existe un método que utiliza <fieldset> y <legend>. Este método se basa en la semántica de HTML y, sin necesidad de agregar atributos especiales o role, el grupo completo se reconoce correctamente.

En el siguiente ejemplo, se envuelve un grupo de botones de radio con <fieldset> y se utiliza <legend> como etiqueta.

Nota: Ten cuidado. Es posible que en algunos casos de diseño quieras colocar etiquetas e inputs en una disposición horizontal. En esos casos, necesitarías establecer fieldset con display: contents;, pero algunos navegadores eliminan legend del árbol de accesibilidad, por lo que no lo recomendamos. No es adecuado comprometer la accesibilidad forzando el diseño con CSS.

<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 se puede organizar de la siguiente manera:

Método usando atributo role y aria-labelledby

• Puede adaptarse de forma flexible si es necesaria la personalización
• Establece explícitamente la etiqueta del grupo combinándola con role="group"

Método que utiliza <fieldset> y <legend>

• Método estándar basado en semántica
• Permite una implementación más robusta y accesible
• Algunos diseños pueden tener problemas de accesibilidad

Dependiendo del diseño y los requisitos, ambos métodos pueden lograr una accesibilidad apropiada.

Aunque usar <fieldset> y <legend> es más semántico, en formularios de contacto y similares, el uso de atributos role y aria-labelledby podría resultar más práctico dependiendo de la estructura del diseño general.

¡La accesibilidad web es mucho más profunda de lo que parece!