Una imagen funcional generalmente se usaría como un botón o enlace y, por lo tanto, en el marcado sería una etiqueta img envuelta por una etiqueta de botón o la etiqueta de anclaje.
Dado que esta imagen es funcional, y suponiendo que no haya texto que la acompañe, necesitaríamos proporcionar una alternativa de texto a la tecnología de asistencia. Podemos hacer esto de muchas maneras, pero estoy tratando de entender si hay alguna diferencia (o más bien, si alguno de estos métodos es mejor que el otro) de las siguientes maneras:
He visto muchos tutoriales y ejemplos que hablan sobre agregar una etiqueta alt en la imagen, pero no pude encontrar ninguno que compare estos dos métodos. Según mis pruebas, ambos funcionan de manera similar con los lectores de pantalla.
Referencias: https://www.w3.org/WAI/tutorials/images/funcional/
De las dos opciones, el atributo alt en la imagen es, aunque ligeramente, preferible a la compatibilidad con WAI-ARIA.
Pero aria-label en un <button> tiene un soporte casi perfecto hoy en día (suponiendo que no necesite cambiar el texto del botón de forma dinámica) , así que a menos que alguien esté usando una combinación de navegador / lector de pantalla antigua (estoy hablando de la era IE7) debería funcionar perfectamente.
Ahora, dicho esto, hay una diferencia a considerar desde la perspectiva de la mantenibilidad: los desarrolladores que no están familiarizados con la accesibilidad trabajarán mejor con un <img> y un atributo alt o con una aria-label .
La experiencia dice que la aria-label probablemente será mejor aquí, ya que si un desarrollador cambia la imagen, puede olvidar el atributo alt , pero es poco probable que elimine la aria-label . Sin embargo, esta es una mejor suposición.
Hay una tercera opción, que puede ser lo mejor de ambos mundos (aunque el diseño puede ser un poco más difícil para requisitos complejos) y tiene un soporte perfecto :
<input type="image" src="image.jpg" alt="this is the alt">En resumen, elija el que mejor se adapte a sus necesidades (a menos que necesite cambiar el texto del botón, en cuyo caso es casi seguro que utilice la siguiente opción).
¡Hay una opción final, un <button> con una imagen y texto!
Entonces podemos colocar la imagen sobre el texto del botón y dejar el atributo alt vacío en la imagen.
Luego, si la imagen no se carga (o alguien bloquea las imágenes en una conexión más lenta, etc.) ¡todavía deberíamos tener un botón perfectamente utilizable para todos!
button{ position: relative; padding: 0; margin: 0; width: 300px; height: 200px; } button>img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; } <button> <img src="https://picsum.photos/300/200" alt=""> Button Text </button> <button> <img src="broken source" alt=""> Button Text </button>