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

Este es un método en el que el atributo for de la etiqueta de un grupo de botones de opción o casillas de verificación se dirige al primer elemento.

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

Otra opción es utilizar y . Este enfoque se basa en la semántica de HTML, y permite que todo el grupo sea reconocido apropiadamente sin necesidad de añadir atributos especiales ni roles.

En el siguiente ejemplo, se rodea el grupo de botones de radio con y se utiliza 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 con y

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

y son más semánticos, pero en formularios de contacto y similares, es posible que el método con atributo role y aria-labelledby sea más fácil de usar según la estructura del diseño general.

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