role-img-text-alternative-present
Los elementos con rol img, graphics-symbol o graphics-document deben tener una alternativa textual
Comprueba que los elementos con role="img", "graphics-symbol" o "graphics-document" proporcionen un texto alternativo accesible mediante aria-label, aria-labelledby, un atributo title, o (para elementos SVG) un <title> hijo.
Ámbito de aplicación. Se aplica a elementos cuyo atributo role se resuelve en img, graphics-symbol o graphics-document (el primer token de rol conocido de la lista de reserva, sin distinguir mayúsculas de minúsculas) incluidos en el árbol de accesibilidad (la exención de "oculto mediante programación" de ACT 23a2a8: display:none/visibility:hidden/aria-hidden="true" en el elemento o en un ancestro, sin excepción para elementos enfocables o referenciados por IDREF; de esos se ocupan por separado aria-hidden-focus y duplicate-id-aria). Según ACT 7d6734, esto alcanza a cualquier elemento con uno de estos roles, no solo a la raíz <svg>, por ejemplo un <circle role="graphics-symbol"> anidado dentro de un <svg> simple. Todos los elementos <svg> quedan a cargo del tratamiento de title/nombre ARIA de svg-text-alternative-present (ya limpio frente a ACT), así que un <svg role="img"> sin nombre se informa una sola vez, allí; la etiqueta <img> se excluye aquí porque tiene su propia regla dedicada. También entra en el alcance un elemento personalizado cuyos ElementInternals le dan uno de esos roles (this.attachInternals().role), sin un atributo role que nombre otro: es su rol por defecto, y ninguna otra regla lo comprueba.
Resultado esperado. Cada elemento aplicable tiene un texto alternativo accesible:
- aria-label con un valor no vacío; O
- aria-labelledby que referencia al menos un elemento existente que aporta texto no vacío; O
- un atributo title no vacío (fuente de nombre accesible de último recurso según HTML-AAM); O
- para un elemento del espacio de nombres SVG, un <title> hijo directo no vacío, en cualquier posición entre los hijos (el propio mecanismo de nombrado de SVG-AAM, no solo para la raíz <svg>); cuenta el primero.
Qué informa un hallazgo.
ariaLabel: elaria-labeldel elemento sin los espacios en blanco del principio y del final, o null cuando no lo tiene.ariaLabelledby: la lista de ids delaria-labelledbydel elemento sin los espacios en blanco del principio y del final, o null cuando no lo tiene.accessibleNameInfo(nameNotResolved): el nombre accesible con el que acaba el elemento:present,value,mechanism(de dónde procede el nombre, comoaria-labelledby) yflags(notas sobre lo que falló, comoidref-missingpara una referencia a un id que no existe). Null en los demás hallazgos.
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
<span role="img" aria-label="Notifications"></span>
aria-label proporciona el texto alternativo.
<span role="img">notifications</span>
El contenido de texto no es una fuente de nombre válida para un elemento con role="img" explícito.
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.
name_internals
- Inspeccionar la imagen que indica el informe, un elemento personalizado, y anotar su rol.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del elemento.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el nombre que se anuncia.
Se cumple. El árbol de accesibilidad muestra un nombre para la imagen, establecido mediante sus internals o de otro modo, y el lector de pantalla lo anuncia.
No se cumple. La imagen no tiene nombre en el árbol de accesibilidad y el lector de pantalla solo anuncia su rol, lo que incumple WCAG 1.1.1.