Los atributos ARIA deben cumplir con 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 asistivas como lectores de pantalla y displays braille. Cuando estos atributos contienen valores inválidos, la comunicación se rompe por completo. Un lector de pantalla podría ignorar el atributo, representar incorrectamente el estado del elemento o comportarse de manera 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 asistiva para navegar e interactuar con el 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 el Criterio de Cumplimiento 4.1.2 de WCAG 2.0, 2.1 y 2.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 asistivas. Los valores ARIA invá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.

Entendiendo los tipos de valores

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

• true/false — Valores booleanos. El valor predeterminado es típicamente "false". Ejemplo: aria-hidden="true".
• tristate — Acepta "true", "false" o "mixed". Ejemplo: aria-checked="mixed" para una casilla de verificación 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 los Estados y Propiedades Compatibles de WAI-ARIA 1.1.

Ten cuidado con errores comunes

• Errores tipográficos en valores booleanos — "ture", "flase", "yes" y "no" son todos invá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 que no existen — Si aria-labelledby apunta a un id que no existe en el documento, la referencia es inválida.
• Valores predeterminados implícitos — Algunos roles cambian el valor predeterminado de ciertas propiedades. Por ejemplo, aria-expanded en un combobox tiene como valor predeterminado "false" en lugar de "undefined". Ten en cuenta los valores predeterminados específicos del rol.

Ejemplos

Incorrecto: valor booleano mal escrito

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

El valor "flase" no es un booleano válido. Las tecnologías asistivas 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 asistiva.
</div>

Incorrecto: valor de token invá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 invá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 inválido para aria-sort

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

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

Correcto: valor válido para aria-sort

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

Incorrecto: referencia de ID que no existe

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