Español
Menú del sitio

aria-valid-attr-value

Los valores de los atributos aria-* deben ajustarse al tipo definido

automaticWCAG 4.1.2 (A)confianza: highgravedad: seriousrobust

Comprueba que cada atributo aria-* reconocido tenga un valor que se ajuste al tipo declarado por WAI-ARIA (booleano, triestado, token, entero, número o referencia de ID).

Ámbito de aplicación. Se aplica a cualquier elemento que tenga al menos un atributo aria-* reconocido (los nombres de atributo no reconocidos son competencia de aria-valid-attr y no se evalúan aquí).

Resultado esperado. El valor de cada atributo se ajusta al tipo de valor que declara WAI-ARIA: booleano ("true"/"false"), triestado ("true"/"false"/"mixed"), un token de un conjunto enumerado fijo, un entero (dentro del rango que WAI-ARIA fija para él), un número real, o una referencia de ID (o lista de ellas) que resuelve a un elemento existente en el documento. Los valores booleanos, triestado y de token se leen sin distinguir mayúsculas y minúsculas, como los lee Chromium (aria-checked="TRUE" está marcado). Según la propia aplicabilidad de ACT 6a7281 ("cualquier estado o propiedad que NO esté vacío"), un valor explícitamente vacío, incluido un atributo de estilo booleano sin "=valor", por ejemplo aria-checked solo, queda fuera del alcance para todos los tipos de valor y no es una infracción: es un patrón habitual y deliberado en el marcado generado con plantillas (por ejemplo, React renderizando condicionalmente aria-describedby={hasError ? errorId : ''}). Un valor del tipo incorrecto es una infracción de WAI-ARIA, que según ACT 6a7281 "no es necesaria para la conformidad con WCAG 2.1 en ningún nivel". Solo es fail cuando deja sin declarar el estado o el valor que el usuario puede cambiar en un control, o el elemento con el foco, que el SC 4.1.2 exige que se pueda determinar mediante programación: uno de aria-checked, aria-pressed, aria-selected, aria-expanded o aria-valuenow en un elemento con un rol de widget, o cualquier aria-activedescendant no válido. En cualquier otro caso es cantTell. Algunos atributos también se restringen entre sí, lo que se comprueba una vez que cada uno es válido por separado:

  • En un elemento cuyo rol es slider, scrollbar, progressbar, meter, separator o spinbutton: un aria-valuemin mayor que aria-valuemax falla (ARIA_VALUE_RANGE_INVERTED), y también un aria-valuenow fuera del rango (ARIA_VALUENOW_OUT_OF_RANGE), ya que el navegador da entonces a la tecnología de asistencia el extremo más cercano del rango (Chromium anuncia 10 para 50 en un rango de 0 a 10). El rango es el declarado; si no, el propio de un elemento nativo (un <progress>, un <meter>, un input range o number, por su min y su max), tal como lo asigna HTML-AAM; si no, los valores por defecto de ARIA, 0 y 100, salvo en un spinbutton, que no tiene ninguno. Con aria-valuetext, que se anuncia en lugar del número, el valor no se compara.
  • Un aria-posinset mayor que aria-setsize falla (ARIA_POSINSET_EXCEEDS_SETSIZE); un tamaño de conjunto de -1 (desconocido) no se tiene en cuenta.
  • Un aria-haspopup cuya ventana emergente, un elemento que nombra aria-controls (o uno dentro de él), tiene otro rol: cantTell (ARIA_HASPOPUP_ROLE_MISMATCH), ya que un script puede mostrar otra ventana emergente. true significa menu. Solo se compara cuando un elemento nombrado tiene rol.
  • Un aria-activedescendant que nombra un elemento que no está ni dentro del elemento ni dentro de uno que este nombra en aria-owns o aria-controls: cantTell (ARIA_ACTIVEDESCENDANT_OUTSIDE). Se excluye el combobox, ya que sus opciones están en la ventana emergente que controla.

Qué informa un hallazgo.

  • attr: el atributo cuyo valor no es válido.
  • value: su valor tal como está escrito.
  • valueReason: qué tiene de incorrecto. En un hallazgo ARIA_ATTR_VALUE_INVALID (de cualquier nivel): expected-true-false, expected-true-false-undefined, expected-true-false-mixed, expected-integer, expected-number o invalid-token cuando no es del tipo del atributo, integer-out-of-range cuando está por debajo del valor mínimo que permite ARIA, expected-single-idref cuando un atributo que admite un id contiene varios, idref-not-found cuando el id de aria-activedescendant no coincide con ningún elemento. En un cantTell: idref-list-none-found cuando ninguno de los ids de una lista coincide con un elemento, idref-controls-not-found para lo mismo en aria-controls.
  • Para las restricciones entre atributos, los valores comparados: role, valuenow, valuemin, valuemax (el rango usado, valores por defecto incluidos); posinset, setsize; haspopup, expectedRole, popupRole; activedescendant.

Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.

Ejemplos

pass
<div aria-hidden="true"></div>

"true" es un valor válido para aria-hidden, de tipo booleano.

fail
<div role="checkbox" tabindex="0" aria-checked="yes">Subscribe</div>

aria-checked es triestado; "yes" no es un token válido, así que no se declara el estado marcado de la casilla.

can't tell
<div aria-hidden="yes"></div>

aria-hidden es de tipo booleano; "yes" no es un token booleano válido. No lleva el estado de ningún control, así que que falle un criterio de WCAG depende de la página.

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

ARIA_ACTIVEDESCENDANT_OUTSIDE

  1. Inspeccionar el elemento que indica el informe y anotar el id de su aria-activedescendant y dónde se encuentra ese elemento.
  2. Poner el foco en el elemento y usar las teclas de flecha para mover el elemento activo.
  3. Con un lector de pantalla en marcha, escuchar si cada elemento activo se anuncia a medida que se desplaza.
  4. Comprobar si el elemento referenciado podría moverse dentro del elemento o vincularse a él con aria-owns o aria-controls.

Se cumple. Cada elemento activo se anuncia a medida que las teclas de flecha lo recorren.

No se cumple. El lector de pantalla no anuncia nada, o anuncia un elemento equivocado, cuando cambia el activo, así que quienes usan el teclado no pueden seguirlo, lo que incumple WCAG 4.1.2.

ARIA_ATTR_VALUE_INVALID

  1. Inspeccione el elemento que indica el informe y anote el atributo, su valor y el tipo de valor que WAI-ARIA espera para él.
  2. Determine qué pretendía transmitir el atributo, como un nivel de encabezado, un ajuste de región activa o una posición en un conjunto.
  3. Compruebe si la página muestra esa información y si se transmite de alguna otra forma que lean los productos de apoyo.

Se cumple. La información no se muestra en la página o también se transmite de otra forma. Aun así, corrija el valor: WAI-ARIA no le da ningún significado.

No se cumple. La página muestra información, como un nivel de encabezado, que solo este atributo pretendía transmitir, y su valor no válido no transmite nada (WCAG 1.3.1).

ARIA_ATTR_VALUE_TARGET_ABSENT

  1. Inspeccionar el elemento que indica el informe y anotar el atributo y los id a los que remite.
  2. Usar la página como lo haría un usuario (abrir, desplegar, enviar) hasta llegar al estado en que debería existir el elemento referenciado.
  3. En la consola de las herramientas para desarrolladores, ejecutar document.getElementById('the-id') para cada id y buscar en el marcado un id casi igual (con otras mayúsculas, una errata o dentro de otra raíz shadow).
  4. Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y comprobar si aparece el nombre, la descripción o la relación que debería aportar.
  5. Si no aparece, comprobar en el panel de accesibilidad si el elemento sigue recibiendo ese nombre o descripción de otra forma, por ejemplo de su propio texto, de un <label> o de un aria-label.

Se cumple. El elemento referenciado existe cuando importa y el nombre, la descripción o la relación aparece en el árbol de accesibilidad, o el elemento recibe el mismo nombre o descripción de otra forma.

No se cumple. El id nunca se resuelve (falta, está mal escrito o cruza un límite de shadow DOM) y nada más da la etiqueta, la descripción o la relación, así que se pierde, lo que incumple WCAG 4.1.2 (ACT 6a7281).

ARIA_HASPOPUP_ROLE_MISMATCH

  1. Inspeccionar el elemento que indica el informe y anotar su valor de aria-haspopup (menu, listbox, tree, grid, dialog; true equivale a menu).
  2. Abrir la ventana emergente con el ratón y con el teclado (Intro, Espacio o Flecha abajo).
  3. Inspeccionar la ventana emergente que aparece y comprobar su rol en el panel Accesibilidad de las herramientas para desarrolladores del navegador.
  4. Comparar el rol de la ventana emergente con el tipo que anuncia aria-haspopup.

Se cumple. La ventana emergente que se abre tiene el rol que anuncia aria-haspopup.

No se cumple. La ventana emergente que se abre tiene un rol distinto del anunciado (como un diálogo anunciado como menú), lo que confunde a quienes usan lector de pantalla e incumple WCAG 4.1.2.

Ver código fuente