Los campos de alternancia ARIA deben tener un nombre accesible

Los campos de alternancia son controles interactivos que permiten a los usuarios seleccionar opciones, alternar configuraciones o hacer elecciones. Cuando estos controles se construyen usando roles ARIA en lugar de elementos HTML nativos, el navegador no deriva automáticamente un nombre de un elemento <label> o contenido interno como lo haría para un <input type="checkbox"> nativo. Debes proporcionar explícitamente un nombre accesible para que las tecnologías asistivas puedan anunciar el propósito del control.

Sin un nombre accesible, un lector de pantalla podría anunciar algo como “checkbox, unchecked” sin indicación alguna de qué representa el checkbox. Esto hace que la interfaz sea inutilizable para personas ciegas, sordociegas, o que dependen de software de control por voz. Los usuarios con discapacidades motoras que usan herramientas de reconocimiento de voz también dependen de nombres accesibles para dirigirse a los controles y activarlos por voz.

Esta regla se aplica a elementos con los siguientes roles ARIA:

• checkbox
• menuitemcheckbox
• menuitemradio
• radio
• radiogroup
• switch

Criterios de conformidad WCAG relacionados

Esta regla se corresponde con el Criterio de Conformidad 4.1.2 de WCAG 2.0, 2.1, y 2.2: Nombre, Función, Valor (Nivel A). Este criterio requiere que para todos los componentes de interfaz de usuario, el nombre y la función puedan determinarse programáticamente. Los campos de alternancia que carecen de un nombre accesible violan este requisito porque las tecnologías asistivas no pueden transmitir el propósito del control al usuario.

Cómo solucionarlo

Puedes proporcionar un nombre accesible para campos de alternancia ARIA usando cualquiera de estas técnicas:

1. Contenido de texto interno — Coloca texto descriptivo dentro del elemento. El navegador usa este texto como el nombre accesible.
2. aria-label — Añade un atributo aria-label con una cadena descriptiva directamente en el elemento.
3. aria-labelledby — Referencia el id de otro elemento que contiene el texto de la etiqueta. Asegúrate de que el elemento referenciado realmente existe en el DOM.
4. title — Usa el atributo title como último recurso. Aunque sí proporciona un nombre accesible, es menos descubrible para usuarios videntes y no es expuesto consistentemente por todas las tecnologías asistivas.

Importante: Si usas aria-labelledby, asegúrate de que el id referenciado coincide con un elemento que existe y contiene texto significativo. Apuntar a un id inexistente resulta en la ausencia de nombre accesible.

Ejemplos

Incorrecto: campos de alternancia sin nombres accesibles

<!-- checkbox con una referencia aria-labelledby rota -->

<div role="checkbox" aria-checked="false" aria-labelledby="nonexistent-id"></div>

<!-- menuitemcheckbox sin nombre -->

<ul role="menu">
  <li role="menuitemcheckbox" aria-checked="true"></li>
</ul>

<!-- menuitemradio sin nombre -->

<ul role="menu">
  <li role="menuitemradio" aria-checked="false"></li>
</ul>

<!-- radio sin nombre -->

<div role="radiogroup">
  <div role="radio" aria-checked="false" tabindex="0"></div>
</div>

<!-- switch sin nombre y con spans hijos vacíos -->

<div role="switch" aria-checked="true">
  <span></span>
  <span></span>
</div>

Cada uno de estos elementos no tiene contenido de texto, no tiene aria-label válido, no tiene aria-labelledby funcional, y no tiene title. Un lector de pantalla no puede anunciar lo que representan.

Correcto: campos de alternancia con nombres accesibles

<!-- checkbox: nombre del contenido de texto interno -->

<div role="checkbox" aria-checked="false" tabindex="0">
  Subscribe to newsletter
</div>

<!-- menuitemcheckbox: nombre de aria-label -->

<ul role="menu">
  <li role="menuitemcheckbox"
      aria-checked="true"
      aria-label="Word wrap">
  </li>
</ul>

<!-- menuitemradio: nombre de aria-labelledby -->

<p id="font-label">Sans-serif</p>
<ul role="menu">
  <li role="menuitemradio"
      aria-checked="true"
      aria-labelledby="font-label">
  </li>
</ul>

<!-- radio: nombre del title -->

<div role="radiogroup" aria-label="Crust type">
  <div role="radio"
       aria-checked="false"
       tabindex="0"
       title="Regular Crust">
  </div>
</div>

<!-- switch: nombre de aria-label -->

<div role="switch"
     aria-checked="true"
     aria-label="Dark mode"
     tabindex="0">
  <span>off</span>
  <span>on</span>
</div>

Preferido: usa elementos HTML nativos cuando sea posible

Los elementos HTML nativos vienen con mecanismos integrados de nombres accesibles y comportamiento de teclado. Siempre que sea posible, prefiere usarlos sobre campos de alternancia ARIA personalizados:

<!-- Checkbox nativo con una etiqueta -->

<label>
  <input type="checkbox"> Subscribe to newsletter
</label>

<!-- Botones de radio nativos con un fieldset -->

<fieldset>
  <legend>Crust type</legend>
  <label><input type="radio" name="crust" value="regular"> Regular Crust</label>
  <label><input type="radio" name="crust" value="thin"> Thin Crust</label>
</fieldset>

Usar elementos nativos reduce el riesgo de problemas de accesibilidad y elimina la necesidad de gestionar manualmente roles, estados e interacciones de teclado.

Learn more:

Deque Reference

Deque University - How To Fix

→