aria-required-attr
Los elementos con roles que requieren estados o propiedades ARIA deben incluirlos
Comprueba que los elementos con un rol explícito tengan todo estado/propiedad aria-* requerido, inequívoco e independiente del contexto para ese rol (p. ej. role="checkbox" debe tener aria-checked).
Ámbito de aplicación. Se aplica a elementos con un rol explícito, válido y no abstracto que además sea uno del pequeño conjunto de roles con un estado/propiedad requerido documentado e independiente del contexto (checkbox, combobox, heading, menuitemcheckbox, menuitemradio, meter, radio, scrollbar, separator, slider, switch), excepto cuando ese rol explícito es idéntico al rol nativo/implícito propio del elemento (ACT 4e8ab6: p. ej. <input type="checkbox" role="checkbox">, que queda exento porque la exposición de estado propia del control nativo ya lo cubre; no se requiere aria-checked. helpers.aria.getNativeRoleForElement resuelve esto). Un <input type="checkbox"> o <input type="radio"> nativo con otro rol marcable (switch, menuitemcheckbox, menuitemradio, o checkbox en un radio y viceversa) está dentro del alcance, pero su aria-checked cuenta como proporcionado: el navegador expone el propio estado checked del input (HTML-AAM), así que pasa sin el atributo.
Resultado esperado. Todo estado/propiedad requerido para ese rol está presente y no vacío. Se gradúa según si ARIA proporciona un sustituto para el atributo ausente:
failcuando no lo hace, de modo que el estado simplemente no se expone (aria-checked en checkbox/radio/switch/menuitemcheckbox/menuitemradio, aria-valuenow en slider/scrollbar/meter y en un separator enfocable).cantTellcuando ARIA define un valor implícito al que recurre el rol (aria-expanded en combobox, aria-level en heading), de modo que el rol sigue exponiendo un valor y solo el autor sabe si es el correcto.
Qué informa un hallazgo.
attr: el atributo requerido que falta o está vacío.role: el rol del elemento.implicitValue(el casocantTell): el valor al que recurre ARIA,falsepara aria-expanded en un combobox,2para aria-level en un encabezado.
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
<div role="checkbox" aria-checked="true"></div>
role="checkbox" requiere aria-checked, y está presente.
<div role="checkbox"></div>
role="checkbox" requiere aria-checked; falta por completo.
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_ATTR_REQUIRED_MISSING_IMPLICIT
- Inspeccionar el elemento que indica el informe y anotar su rol y el atributo que falta (como aria-expanded en un combobox, aria-level en un encabezado).
- En un combobox, abrir y cerrar su ventana emergente con el teclado (Alt+Flecha abajo, Esc) y con el ratón, y comprobar si aria-expanded se añade y se actualiza.
- En un encabezado, comparar su lugar en el esquema de la página con el nivel 2, el que recibe por defecto, y comprobar si se pretendía otro nivel.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el estado o el nivel que se anuncia.
Se cumple. El valor por defecto coincide con la realidad: el combobox indica que está contraído solo cuando su ventana emergente está cerrada, o el encabezado es realmente de nivel 2.
No se cumple. El valor anunciado es erróneo, como un combobox anunciado como contraído mientras su lista está abierta o un encabezado de nivel 2 que debería tener otro nivel, lo que incumple WCAG 4.1.2 (o 1.3.1 en los encabezados).
state_internals
- Inspeccionar el elemento personalizado que indica el informe y anotar su rol y el estado que falta (como checked o value).
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y comprobar si ese estado aparece en el elemento.
- Accionar el elemento (hacer clic en él, pulsar Espacio o las teclas de flecha) y comprobar si cambia el estado que muestra el panel.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el estado.
Se cumple. El estado se expone y se actualiza al usar el elemento, establecido mediante sus internals.
No se cumple. El estado requerido falta en el árbol de accesibilidad o no cambia al usar el elemento, lo que incumple WCAG 4.1.2.