img-alt-decorative
Los elementos <img>/<canvas>/<svg> excluidos deben ser decorativos (revisión manual)
Marca los elementos <img>, <canvas> y <svg> excluidos del árbol de accesibilidad (aria-hidden, role="none"/"presentation", alt vacío, o un svg/canvas sin etiquetar) para revisión manual de que son puramente decorativos.
Ámbito de aplicación. Se aplica a elementos <img>, <canvas> o <svg> visibles excluidos del árbol de accesibilidad por cualquiera de estos motivos: un aria-hidden en el propio elemento o en un ancestro, un role="none"/"presentation" explícito no anulado por la enfocabilidad, un <img alt=""> (el marcador decorativo nativo, con la misma anulación por enfocabilidad; solo un alt literalmente vacío, así que alt=" " no lo es), un <svg> sin etiqueta cuyo rol implícito es graphics-document (sin reformulación de rol img/graphics-symbol, nombre ARIA, <title>/<desc> hijo directo con texto en cualquier posición entre los hijos, ni enfocabilidad), o un <canvas> sin etiqueta y sin ningún rol explícito. Un elemento se omite cuando un ancestro cuyo nombre representa su contenido tiene un nombre proporcionado por el autor (aria-label, aria-labelledby, title o un <label> asociado): ese nombre sustituye a lo que habría dicho la imagen (el caso habitual: un botón solo con icono nombrado con aria-label). Un ancestro así tiene un rol que toma el nombre de su contenido (link, button, heading, cell, option, tab, treeitem, menuitem...) o con hijos presentacionales (img, slider, progressbar...). ACT e88epe omite el elemento bajo cualquier ancestro nombrado por el autor; esta regla sigue preguntando bajo una región de referencia, figure, group, region, dialog o widget compuesto (listbox, menu, grid...) con nombre, cuyo nombre etiqueta un contenedor y no dice nada de lo que muestra una imagen dentro de él: <figure aria-label="Photo: DR"> acredita una foto. Un enlace o un botón nombrado por su texto tampoco exime a una imagen junto al texto: un icono de tipo de archivo, de enlace externo o de valoración puede decir lo que el texto no dice, y ACT la mantiene aplicable. Un elemento dentro de un subárbol [inert], o detrás de un diálogo modal abierto, se deja fuera como el resto del contenido oculto, igual que lo deja fuera img-alt-present: no admite interacción y ninguna tecnología de asistencia lo recibe.
Resultado esperado. Se requiere revisión manual para confirmar que el elemento excluido es puramente decorativo y no transmite ninguna información que un usuario echaría en falta de otro modo.
Qué informa un hallazgo.
element:img,svgocanvas.sameImageCount: cuántos de los hallazgos de este resultado muestran la misma imagen, este incluido: un <img> con la misma fuente actual (currentSrc, si nosrc), o un <svg> en línea con los mismos atributos raíz que cambian su renderizado (viewBox, width, height, class, style, fill, stroke, color) y el mismo marcado. 1 para un canvas, una imagen sin fuente ni marcado que comparar, o un <img> de carga diferida cuyo marcadordata:sustituye a undata-srcodata-srcset.sameImageFirst: true en el primero de ellos en el orden del documento, para que quien lo revise pueda revisar una copia y contar el resto.reasonCode:IMAGE_ONLY_CONTROL_CONTENTcuando la imagen es el único contenido de un enlace o un botón (sin texto ni ninguna otra imagen dentro): el control no recibe entonces ningún nombre de ella, sea o no decorativa, concontrolContentnombrando el rol del control (linkobutton).EXCLUDED_ELEMENT_REVIEWen los demás casos.
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
<img src="quarterly-trend.png" alt="">
Marcado como decorativo con alt="", pero un nombre de archivo como "quarterly-trend" sugiere que en realidad podría tratarse de un gráfico informativo, no de una decoración.
<button aria-label="Close"><img src="x-icon.png" alt=""></button>
El propio aria-label del botón ya proporciona el nombre accesible; la exclusión del icono no es la cuestión decorativa que corresponde revisar en este elemento.
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.
EXCLUDED_ELEMENT_REVIEW
- Localizar la imagen, el svg o el canvas que indica el informe y observarlo en la página.
- Preguntarse qué perdería el usuario si se quitara: información, una etiqueta, los datos de un gráfico o nada.
- Si transmite algo, comprobar si un texto visible cercano ya dice lo mismo.
Se cumple. La imagen es puramente decorativa (un espaciador, un separador, un adorno o una ilustración cuyo contenido ya da el texto), así que ocultarla no hace perder nada.
No se cumple. La imagen transmite información que nada más en la página aporta y, sin embargo, está oculta a las tecnologías de apoyo, lo que incumple WCAG 1.1.1.
IMAGE_ONLY_CONTROL_CONTENT
- Localizar el enlace o el botón que indica el informe; su único contenido es una imagen oculta.
- Leer el nombre calculado del control en el panel Accesibilidad, o desplazarse hasta él con un lector de pantalla y escuchar.
- Comparar lo que se anuncia con lo que hace el control.
Se cumple. El control se sigue anunciando con un nombre que dice lo que hace.
No se cumple. El control se anuncia sin nombre, o solo con su dirección, porque su única imagen está oculta, lo que incumple WCAG 1.1.1 (F89).