area-alt-quality

La alternativa textual de <area> debe ser adecuada (revisión manual)

manualWCAG 1.1.1 (A)confianza: mediumgravedad: minorperceivable

Marca los elementos <area> con una alternativa textual no vacía (alt, aria-label, aria-labelledby o title) para que una persona revise si es adecuada. Indica cuándo el nombre parece un nombre de archivo, una dirección web, un marcador de posición, un comienzo del tipo "image of" o es muy largo.

Ámbito de aplicación. Se aplica a los elementos <area> que obtienen una alternativa textual no vacía de cualquier fuente: aria-labelledby (que resuelve a texto), aria-label, alt o title. El <area> debe tener un href no vacío (si no, según la especificación HTML no es un hipervínculo) y pertenecer a un <map> al que realmente hace referencia un <img usemap> ("#" seguido del id o del name del mapa, distinguiendo mayúsculas de minúsculas, según la correspondencia de HTML); un <area> en un mapa no usado queda fuera del alcance. El <img> que lo referencia debe renderizarse realmente (hidden/display:none/visibility lo excluyen; aria-hidden no, porque <area> no es descendiente DOM de <img>), y el propio <area> debe ser elegible: hidden, display:none e inert en el <area> o en su <map> no lo excluyen, ya que ninguno genera una caja y la detección de clics de los mapas de imagen de un navegador real ignora los tres en ese punto (verificado en Chromium y Firefox); solo esos mecanismos en un ancestro real de todo el par <img>+<map> lo hacen. role="presentation"/"none" saca un elemento del alcance salvo que sea enfocable.

Resultado esperado. Se requiere revisión manual para confirmar que el texto alternativo proporcionado es preciso y apropiado. Cada ocurrencia enumera todas las fuentes presentes (data.details.sources), para que la persona que revisa compruebe cada una: un title o un aria-label que no es el nombre sigue llegando a algunos usuarios. También se comprueba en el nombre lo que la regla img-alt-quality comprueba en un alt (helpers.getTextAlternativeSignal): un nombre de archivo, una dirección web, solo símbolos, un marcador de posición o una palabra genérica, un comienzo que dice que es una imagen, o más de 150 caracteres. Un nombre así recibe su propio resumen y su propia sugerencia; el hallazgo sigue siendo cantTell.

Qué informa un hallazgo.

  • reasonCode: TEXT_ALTERNATIVE_REVIEW, sea cual sea la señal.
  • name: la alternativa textual que acaba teniendo el área, tomada de la primera fuente de sources.
  • sources: cada fuente de texto que tiene el área, en el orden en que se usan para el nombre: aria-labelledby, aria-label, alt, title.
  • altSignal, y length y limit para too-long: lo que hizo que el nombre pareciera algo distinto de una descripción, como en img-alt-quality. No aparece cuando el nombre es corriente.
  • alt (un área con atributo alt): el texto de alt.

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

can't tell
<img src="office-map.png" usemap="#floorplan">
<map name="floorplan">
<area href="/rooms/12" shape="rect" coords="0,0,40,24" alt="Room 12">
</map>

El área tiene una alternativa textual no vacía en un mapa de imagen usado; conviene confirmar que "Room 12" es correcto para esa región. Un aria-label, aria-labelledby o title se pregunta de la misma forma, y cada ocurrencia enumera las fuentes que encontró.

n/a
<map name="unused">
<area href="/rooms/12" shape="rect" coords="0,0,40,24" alt="Room 12">
</map>

Ningún <img usemap> referencia este mapa, por lo que el elemento <area> nunca se somete a hit testing ni se renderiza; queda fuera del alcance.

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.

TEXT_ALTERNATIVE_REVIEW

  1. Localizar el área del mapa de imagen que indica el informe y observar la parte de la imagen que cubre.
  2. Hacer clic en ella, o seguir su enlace, y anotar adónde lleva.
  3. Leer la alternativa textual del área (y todas las demás fuentes que enumera el informe) y comprobar que dice adónde lleva el enlace o qué es la región.

Se cumple. La alternativa textual le dice al usuario adónde va el enlace, con palabras que corresponden a la región.

No se cumple. La alternativa textual es errónea, genérica, un nombre de archivo o no dice adónde lleva el enlace, lo que incumple WCAG 1.1.1 (H24).

Reglas relacionadas

Ver código fuente