svg-text-alternative-quality
La alternativa textual de <svg> debe ser adecuada (revisión manual)
Marca los gráficos <svg> aplicables con una alternativa textual detectada para que una persona evalúe si es adecuada.
Ámbito de aplicación. Se aplica a los elementos <svg> en línea que ya llevan una alternativa textual: texto <title> o <desc> no vacío, un aria-label no vacío, o un aria-labelledby que resuelve a texto no vacío. <desc> cuenta aquí como algo que revisar aunque nunca contribuya al nombre accesible: esa distinción corresponde a svg-text-alternative-present. El elemento debe estar incluido en el árbol de accesibilidad, y role="presentation"/"none" lo saca de alcance salvo que sea enfocable, lo que restaura su rol.
Resultado esperado. Se requiere revisión manual para confirmar que la alternativa textual proporcionada es precisa y adecuada.
Qué informa un hallazgo.
hasNonEmptyTitle:truecuando el primer <title> dentro del <svg> tiene texto.hasNonEmptyDesc:truecuando el primer <desc> dentro del <svg> tiene texto.ariaLabel: el valor dearia-label, onullcuando no hay ninguno.ariaLabelledBy: el valor dearia-labelledby, los ids a los que apunta, onullcuando no hay ninguno.ariaLabelledByText: el texto de los elementos a los que apuntaaria-labelledby, hasta 120 caracteres. Solo se busca cuando no hayaria-label;nullen caso contrario o cuando no se resuelve en nada.reasonCode:IMAGE_ONLY_CONTROL_CONTENTcuando el <svg> es el único contenido de un enlace o un botón (sin texto ni ninguna otra imagen dentro), por lo que su alternativa textual es el nombre del control, concontrolContentnombrando el rol del control (linkobutton);TEXT_ALTERNATIVE_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
<svg role="img" viewBox="0 0 24 24"><title>Growth chart</title><path d="M0 0h24v24H0z"/></svg>
Hay un <title> presente. Conviene confirmar que "Growth chart" describe lo que el gráfico muestra, no solo que es un gráfico.
<svg role="img" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>
No hay texto <title>/<desc>, aria-label, ni aria-labelledby resuelto que revisar; eso es un fallo de svg-text-alternative-present, no de esta regla.
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.
IMAGE_ONLY_CONTROL_CONTENT
- Localizar el enlace o el botón que indica el informe; su único contenido es este svg.
- Activar el control y anotar lo que hace o adónde va.
- Leer el nombre del control en el panel Accesibilidad de las herramientas para desarrolladores (procede de la alternativa textual del svg), o llegar a él con Tab con un lector de pantalla.
- Comparar: ¿dice el nombre lo que hace el control («Buscar», «Cerrar menú»), y no solo qué aspecto tiene el icono («lupa»)?
Se cumple. El nombre del control dice lo que hace o adónde va.
No se cumple. El nombre describe el dibujo, es vago o no corresponde a la acción, lo que incumple WCAG 1.1.1 (y deja poco clara la finalidad del control).
TEXT_ALTERNATIVE_REVIEW
- Observar el gráfico que indica el informe y anotar lo que muestra (un icono, un logotipo, un diagrama y sus datos).
- Leer su alternativa textual en el informe (el texto de title, desc, aria-label o aria-labelledby), o en el panel Accesibilidad de las herramientas para desarrolladores.
- Si la alternativa textual solo nombra el gráfico, como es habitual en gráficos y diagramas, los detalles pueden estar en otro sitio: en un pie, un texto o una tabla junto a él, o en un enlace al lado. Solo cuenta si un usuario de lector de pantalla puede encontrarlo desde el gráfico y da todo lo que muestra el gráfico.
- Comparar: ¿dice el texto lo que muestra o significa el gráfico? Si el gráfico es decorativo, debería estar oculto en su lugar (aria-hidden="true").
Se cumple. La alternativa textual transmite lo que muestra el gráfico, o lo nombra y una descripción a la que un usuario de lector de pantalla llega desde él da el resto, o el gráfico decorativo está oculto para las tecnologías de apoyo.
No se cumple. La alternativa textual es errónea, vaga (como «imagen» o «icono») u omite lo que transmite el gráfico, y ninguna descripción accesible desde él lo da, lo que incumple WCAG 1.1.1.