Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H36Poner alt a las imágenes que funcionan como botón de envío

Nombre oficial en el W3C: Usar atributos alt en las imágenes empleadas como botones de envío

En pocas palabras

A veces el botón que envía un formulario es una imagen, por ejemplo una lupa en un buscador. Ese botón necesita un atributo alt que diga qué hace al pulsarlo: «Buscar», «Enviar solicitud». No debe describir el dibujo, sino la acción.

Por qué es importante

El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) no ve la lupa ni la flecha. Solo anuncia el texto del alt.

Sin ese texto, la persona oye «botón» y nada más, o el nombre del archivo de la imagen. No sabe si el botón busca, envía o borra. El problema crece cuando hay varios botones de imagen en la misma página.

Cómo se hace

  1. Localice los botones hechos con <input type="image">.
  2. Añada a cada uno un atributo alt con la acción que realiza: «Buscar», «Añadir a la cesta», «Pagar».
  3. Evite describir la imagen: «Lupa» o «Flecha verde» no explican qué pasa al pulsar.
  4. Si hay varios botones parecidos, distinga cada uno: «Buscar en noticias» y «Buscar en trámites».
  5. Valore cambiarlo por un <button> con texto visible, que suele ser más claro para todos.

Cómo comprobarlo

  1. Inspeccione cada <input type="image"> con las herramientas del navegador (F12).
  2. Compruebe que tiene alt y que no está vacío.
  3. Lea el alt y confirme que describe la acción del botón, no su aspecto.
  4. Con un lector de pantalla, llegue al botón con Tab y escuche lo que anuncia.

Ejemplo

Buscador de una web municipal cuyo botón de envío es una imagen de una lupa.

<form action="/buscar">
  <label for="q">Buscar en la web</label>
  <input type="search" id="q" name="q">
  <input type="image" src="lupa.svg" alt="Buscar">
</form>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H36 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Se aplica al contenido que usa botones de envío basados en imágenes.

Descripción

En los elementos input de tipo image, el atributo alt del elemento input se usa para proporcionar una etiqueta funcional. Esta etiqueta indica la función del botón, pero no intenta describir la imagen. La etiqueta es especialmente importante cuando hay varios botones de envío en la página y cada uno conduce a un resultado distinto.

Ejemplos

Un elemento input con un atributo alt

<form action="/find" method="post" role="search">
  <label for="look-up">Find books<label>
  <input id="look-up" type="text">
  <input alt="Search" src="button.gif" type="image">
</form>

Pruebas

Procedimiento

  1. Para todos los elementos input cuyo atributo type tenga el valor image, comprobar la presencia de un atributo alt.
  2. Comprobar que el valor del atributo alt describe la función del botón.

Resultados esperados

  • Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H36 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.