Los atributos ARIA deben ajustarse a valores válidos

Los atributos ARIA comunican información esencial sobre el estado, propiedades y roles de los elementos de interfaz a las tecnologías de asistencia como lectores de pantalla y pantallas braille. Cuando estos atributos contienen valores no válidos, la comunicación se interrumpe completamente. Un lector de pantalla podría ignorar el atributo, representar incorrectamente el estado del elemento o comportarse de forma impredecible — cualquiera de estas situaciones puede hacer que el contenido sea inutilizable.

Este problema tiene un impacto crítico en usuarios que son ciegos, sordociegos o tienen discapacidades de movilidad que dependen de tecnología de asistencia para navegar e interactuar con contenido web. Por ejemplo, si una casilla de verificación usa aria-checked="ture" en lugar de aria-checked="true", un lector de pantalla no puede determinar si la casilla está marcada, dejando al usuario incapaz de entender el estado actual del formulario.

Esta regla se corresponde con WCAG 2.0, 2.1 y 2.2 Criterio de Éxito 4.1.2: Nombre, Rol, Valor (Nivel A), que requiere que para todos los componentes de interfaz de usuario, el nombre, rol y valor puedan ser determinados programáticamente y establecidos por tecnologías de asistencia. Los valores ARIA no válidos violan este criterio porque el valor no puede ser determinado de manera significativa.

Cómo solucionarlo

Para cada atributo aria- en tu marcado, confirma que su valor:

1. Esté escrito correctamente — un error tipográfico como "flase" en lugar de "false" causará un fallo.
2. Sea un valor permitido para ese atributo específico — cada atributo ARIA acepta solo ciertos tipos de valores.
3. Tenga sentido en contexto — el valor debe ser significativo para el rol y estado del elemento.

Comprendiendo los tipos de valores

Diferentes atributos ARIA aceptan diferentes tipos de valores. Estos son los más comunes:

• true/false — Valores booleanos. El valor por defecto es típicamente "false". Ejemplo: aria-hidden="true".
• tristate — Acepta "true", "false", o "mixed". Ejemplo: aria-checked="mixed" para una casilla parcialmente seleccionada.
• true/false/undefined — Como true/false, pero "undefined" indica explícitamente que la propiedad no es relevante.
• token — Un valor de un conjunto limitado de cadenas permitidas. Ejemplo: aria-sort acepta "ascending", "descending", "none", o "other".
• token list — Una lista separada por espacios de uno o más tokens permitidos. Ejemplo: aria-relevant="additions text".
• ID reference — El id de otro elemento en el mismo documento. Ejemplo: aria-labelledby="heading-1".
• ID reference list — Una lista separada por espacios de IDs de elementos. Ejemplo: aria-describedby="desc1 desc2".
• integer — Un número entero sin parte fraccionaria. Ejemplo: aria-level="2".
• number — Cualquier número real. Ejemplo: aria-valuenow="3.5".
• string — Un valor de texto sin restricciones. Ejemplo: aria-label="Close dialog".

Para una referencia completa de qué valores acepta cada atributo, consulta WAI-ARIA 1.1 Supported States and Properties.

Ten cuidado con los errores comunes

• Errores tipográficos en valores booleanos — "ture", "flase", "yes" y "no" son todos no válidos para atributos que esperan "true" o "false".
• Usar tokens incorrectos — Atributos como aria-sort, aria-autocomplete y aria-current solo aceptan valores de cadena específicos.
• Referenciar IDs inexistentes — Si aria-labelledby apunta a un id que no existe en el documento, la referencia es no válida.
• Valores por defecto implícitos — Algunos roles cambian el valor por defecto de ciertas propiedades. Por ejemplo, aria-expanded en un combobox tiene por defecto "false" en lugar de "undefined". Ten en cuenta los valores por defecto específicos de cada rol.

Ejemplos

Incorrecto: valor booleano mal escrito

<div aria-hidden="flase">
  Este contenido debería ser visible para la tecnología de asistencia.
</div>

El valor "flase" no es un booleano válido. Las tecnologías de asistencia pueden no ser capaces de interpretar el estado previsto.

Correcto: valor booleano escrito correctamente

<div aria-hidden="false">
  Este contenido es visible para la tecnología de asistencia.
</div>

Incorrecto: valor de token no válido

<button aria-pressed="yes">
  Negrita
</button>

El atributo aria-pressed acepta "true", "false" o "mixed" — no "yes".

Correcto: valor de token válido

<button aria-pressed="true">
  Negrita
</button>

Incorrecto: valor tristate no válido en una casilla de verificación

<div role="checkbox" aria-checked="partial" tabindex="0">
  Seleccionar todos los elementos
</div>

El atributo aria-checked en un rol checkbox solo acepta "true", "false" o "mixed". El valor "partial" no es reconocido.

Correcto: valor tristate válido en una casilla de verificación

<div role="checkbox" aria-checked="mixed" tabindex="0">
  Seleccionar todos los elementos
</div>

Incorrecto: valor no válido para aria-sort

<th aria-sort="alphabetical">Nombre</th>

El atributo aria-sort solo acepta "ascending", "descending", "none" u "other".

Correcto: valor válido para aria-sort

<th aria-sort="ascending">Nombre</th>

Incorrecto: referencia de ID inexistente

<input type="text" aria-labelledby="username-label">
<!-- No existe ningún elemento con id="username-label" en el documento -->

Correcto: referencia de ID válida

<label id="username-label">Nombre de usuario</label>
<input type="text" aria-labelledby="username-label">

Qué verifica esta regla

La regla aria-valid-attr-value inspecciona cada elemento que tiene uno o más atributos aria- y verifica que el valor de cada atributo se ajuste a los valores permitidos definidos en la especificación WAI-ARIA. Verifica la escritura correcta, tokens válidos, tipos de valores apropiados (booleano, entero, referencia de ID, etc.), y asegura que los IDs referenciados existan en el documento.