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 de asistencia puedan anunciar el propósito del control.

Sin un nombre accesible, un lector de pantalla podría anunciar algo como “checkbox, sin marcar” sin ninguna indicación de lo que representa el checkbox. Esto hace que la interfaz sea inutilizable para personas que son ciegas, sordociegas, o que dependen de software de control por voz. Los usuarios con impedimentos de movilidad que usan herramientas de reconocimiento de voz también dependen de nombres accesibles para dirigirse y activar controles por voz.

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

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

Criterios de éxito WCAG relacionados

Esta regla se mapea con el Criterio de Éxito 4.1.2 de WCAG 2.0, 2.1, y 2.2: Nombre, Rol, Valor (Nivel A). Este criterio requiere que para todos los componentes de interfaz de usuario, el nombre y el rol puedan ser determinados programáticamente. Los campos de alternancia que carecen de un nombre accesible violan este requisito porque las tecnologías de asistencia 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 contenga el texto de la etiqueta. Asegúrate de que el elemento referenciado realmente exista en el DOM.
4. title — Usa el atributo title como último recurso. Aunque sí proporciona un nombre accesible, es menos descubrible para usuarios con visión y no es expuesto consistentemente por todas las tecnologías de asistencia.

Importante: Si usas aria-labelledby, asegúrate de que el id referenciado coincida con un elemento que exista y contenga texto significativo. Apuntar a un id no existente resulta en ningún 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 spans hijo 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 un aria-label válido, no tiene un 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">
  Suscribirse al boletín
</div>

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

<ul role="menu">
  <li role="menuitemcheckbox"
      aria-checked="true"
      aria-label="Ajuste de línea">
  </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 de title -->

<div role="radiogroup" aria-label="Tipo de masa">
  <div role="radio"
       aria-checked="false"
       tabindex="0"
       title="Masa Regular">
  </div>
</div>

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

<div role="switch"
     aria-checked="true"
     aria-label="Modo oscuro"
     tabindex="0">
  <span>desactivado</span>
  <span>activado</span>
</div>

Preferido: usa elementos HTML nativos cuando sea posible

Los elementos HTML nativos vienen con mecanismos de nombres accesibles incorporados y comportamiento de teclado. Cuando sea posible, prefiere estos sobre campos de alternancia ARIA personalizados:

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

<label>
  <input type="checkbox"> Suscribirse al boletín
</label>

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

<fieldset>
  <legend>Tipo de masa</legend>
  <label><input type="radio" name="crust" value="regular"> Masa Regular</label>
  <label><input type="radio" name="crust" value="thin"> Masa Fina</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

→