Regla de accesibilidad: Los botones imagen deben tener texto alternativo

Acerca de esta regla de accesibilidad

Un elemento <input type="image"> renderiza una imagen que funciona como un botón de envío. A diferencia de los botones estándar <input type="submit"> que muestran su atributo value como texto visible, los botones imagen dependen completamente de su apariencia visual para comunicar su propósito. Esto significa que las tecnologías de asistencia no tienen forma de determinar la función del botón a menos que proporciones explícitamente texto alternativo.

Esta es una barrera de accesibilidad crítica para varios grupos de usuarios. Los usuarios ciegos y sordociegos que dependen de lectores de pantalla escucharán algo genérico como “botón” o, peor aún, el nombre del archivo de imagen (ej., “btn_submit_v2.png”), que no proporciona información útil. Los usuarios con baja visión que usan magnificadores de pantalla en combinación con lectores de pantalla se ven afectados de manera similar. Sin un nombre accesible claro, estos usuarios no pueden interactuar con confianza con los formularios.

Esta regla se relaciona con dos criterios de éxito de WCAG de Nivel A — el nivel de conformidad mínimo:

WCAG 1.1.1 (Contenido no textual): Todo contenido no textual debe tener una alternativa textual que sirva al propósito equivalente. Un botón imagen es contenido no textual, por lo que necesita texto alternativo.
WCAG 4.1.2 (Nombre, Función, Valor): Todos los componentes de interfaz de usuario deben tener un nombre determinable programáticamente. Los botones deben exponer su nombre a las tecnologías de asistencia.

Este requisito también está mandatado por la Sección 508, EN 301 549, y las directrices Trusted Tester.

Cómo solucionarlo

Proporciona un nombre accesible no vacío para cada elemento <input type="image"> usando uno de estos métodos:

Atributo alt (preferido): Añade un atributo alt que describa la acción del botón. Este es el enfoque más directo y ampliamente soportado.
Atributo aria-label: Establece un aria-label con una descripción concisa de la acción del botón.
Atributo aria-labelledby: Referencia el id de otro elemento visible que describa la acción del botón.

Escribir texto alternativo efectivo

El texto alternativo para un botón imagen debe describir la acción que el botón realiza, no la imagen en sí. Pregúntate: “¿Qué pasa cuando el usuario hace clic en este botón?” La respuesta es tu texto alternativo.

✅ “Enviar”, “Buscar”, “Añadir al carrito”, “Iniciar sesión”
❌ “Icono de flecha verde”, “button.png”, “haz clic aquí”

Evita palabras de relleno como “imagen de” o “botón” — las tecnologías de asistencia ya anuncian el rol del elemento como botón.

Importante: Simplemente colocar texto junto al botón imagen en el HTML no es suficiente. Los lectores de pantalla necesitan una etiqueta asociada programáticamente, no texto visualmente adyacente. El texto cercano no puede ser determinado de manera confiable como la etiqueta del botón por las tecnologías de asistencia.

Ejemplos

Incorrecto: falta texto alternativo

El botón imagen no tiene atributo alt, aria-label, o aria-labelledby. Un lector de pantalla podría anunciar esto como “submit.png botón” o solo “botón”.

<form action="/search">
  <label for="query">Buscar</label>
  <input type="text" id="query" name="q">
  <input type="image" src="search-icon.png">
</form>

Incorrecto: atributo `alt` vacío

Un atributo alt vacío le dice a las tecnologías de asistencia que ignoren el elemento, efectivamente ocultando completamente el botón.

<input type="image" src="search-icon.png" alt="">

Correcto: usando el atributo `alt`

<form action="/search">
  <label for="query">Buscar</label>
  <input type="text" id="query" name="q">
  <input type="image" src="search-icon.png" alt="Buscar">
</form>

Correcto: usando `aria-label`

<input type="image" src="submit-arrow.png" aria-label="Enviar pedido">

Correcto: usando `aria-labelledby`

El atributo aria-labelledby apunta al id de un elemento visible. Asegúrate de que el elemento referenciado existe y no está oculto con display: none o aria-hidden="true".

<h2 id="checkout-heading">Completa tu compra</h2>
<form action="/checkout">
<!-- campos del formulario -->

  <input type="image" src="checkout-btn.png" aria-labelledby="checkout-heading">
</form>

Qué verifica la regla

Esta regla verifica que cada elemento <input type="image"> tenga un nombre accesible descubrible. Falla si el elemento no tiene atributo alt, aria-label, o aria-labelledby, o si esos atributos están vacíos o se resuelven a una cadena vacía.

Learn more: