TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Utilizar <input type="image"> es una técnica antigua pero aún válida para enviar formularios. Sin embargo, al igual que cualquier imagen, requiere obligatoriamente un atributo alt (WCAG 1.1.1). Sin él, la persona usuaria de lector de pantalla escuchará la URL de la imagen en vez de "Enviar".
La revelación accidental del código fuente
Ponte en el lugar de la persona usuaria: Has llenado un formulario bancario, y al llegar al final escuchas "Botón, images/btn_submit_final_v2.png". ¿Te atreverías a pulsarlo sin saber exactamente qué acción ejecuta? La ausencia del atributo alt degrada la confianza de la persona usuaria a cero.
El patrón erróneo: Código Accesible Deficiente
El desarrollador asume que el propósito visual de la imagen (una flecha o la palabra "Pagar") es autoevidente para todos.
<!-- MAL: Control activo vital carente de descripción -->
<form action="/procesar">
<!-- campos... -->
<input type="image" src="/assets/btn-pagar.png">
</form>La Solución Accesible: Código Recomendado
Proveer el verbo de acción en el texto alternativo. No describir cómo luce el botón, sino qué hace.
<!-- BIEN: El alt define la acción interactiva -->
<form action="/procesar">
<!-- campos... -->
<input type="image" src="/assets/btn-pagar.png" alt="Procesar pago seguro">
</form>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA activo, presionar F para saltar entre campos de formulario. Verificar que el lector de pantalla anuncie correctamente el nombre, tipo y estado del campo. Si el campo no posee una etiqueta vinculada programáticamente, el lector solo anunciará el tipo de control sin contexto. En VoiceOver (iOS), tocar el campo y confirmar que la descripción sea completa.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 1.1.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: la regla image-alt y sus variantes detectan eficazmente imágenes, SVGs y objetos sin texto alternativo. WAVE también marca estos errores con alta fiabilidad. Limitación: Las herramientas no evalúan la calidad del texto alternativo.
