Estoy seguro de que sabes sobre alt texto. Es el atributo de la etiqueta de la imagen que tiene la importante tarea de describir qué es esa imagen para alguien que no puede verla por ningún motivo. Por favor utilícelos.
No quiero atenuar el mensaje por favor úselos, pero últimamente han surgido algunas cosas interesantes relacionadas con el texto alternativo en mi día a día que están relacionadas.
Cuando tu no
Hidde de Vries escribió Recientemente, no siempre necesitas texto alternativo:
Pero cuando un icono tiene una palabra junto a él, por ejemplo, ‘Cerrar sesión’, el icono en sí es decorativo y no necesita un texto alternativo:
<button type="button"><img src="https://css-tricks.com/some-things-about-alt-text/close.svg" alt="" /> Close</button>En este caso, podemos dejar el atributo alt vacío, ya que de lo contrario un lector de pantalla anunciaría ‘botón – cerrar cerrar’.
Creo que en un mundo perfecto porque ese ícono es completamente decorativo, aplicarlo a través de CSS sería ideal, pero el punto es: si tienes que usar una imagen, alt el texto duele más de lo que ayuda aquí.
¿Podemos conseguirlo gratis?
Las computadoras son bastante inteligentes en estos días. Quizás podrían mirar nuestras imágenes y ofrecer descripciones sin que tengamos que escribirlas manualmente.
🔥 ¡Creo que usé el aprendizaje automático para ser amable con la gente! En esta prueba de concepto, estoy creando texto alternativo dinámico para lectores de pantalla con la API Computer Vision de Azure. 💫https: //t.co/Y21AHbRT4Y pic.twitter.com/KDfPZ4Sue0
– Sarah Drasner (@sarah_edo) 13 de noviembre de 2017
La demostración de Sarah usa una API de Computer Vision para hacer eso.
¿Qué pasa con figcaption?
Odio decirlo, pero no soy particularmente bueno escribiendo descripciones de texto alternativo para imágenes en publicaciones de blog aquí mismo en CSS-Tricks. Es un problema que debemos solucionar con cambios de proceso. Usamos a menudo <figcaption> aunque para agregar texto relacionado con una imagen. La forma en que se redacta el texto a menudo me parece un texto alternativo. Describe lo que sucede en la imagen.
Estaba preguntando sobre esto, y Zell Liew me dijo que él hace lo mismo:
De hecho, tengo la misma pregunta. La mayoría de mis capítulos se utilizan para describir la imagen para que los lectores comprendan de qué se trata la imagen.
En mi mente, pensé que sería peor colocar la copia exacta de figcaption en el texto alternativo, ya que alguien que estaba leyendo texto alternativo esencialmente leería la misma descripción dos veces.
También hablé con Eric Bailey, quien tuvo una idea interesante.
<figure>
<img src="https://css-tricks.com/some-things-about-alt-text/screenshot.png" alt="Screenshot of Chrome displaying a split view. On the left is a page full of image thumbnails comparing pre and post-optimization filesize. On the right is Chrome developer tools showing paint rasterize duration for the images. With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds.">
<figcaption aria-hidden="true">
With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds.
</figcaption>
</figure>Esta:
- Conserva el estilo de la figura
- Evita anular alt, que puede ser problemático para algunos lectores de pantalla.
- Mantiene la descripción cercana al contenido y comunica el punto a los usuarios de SR
- Comunica información importante a los lectores visuales sin duplicar la lectura para los usuarios de SR
- Usa una propiedad aria diseñada para usarse fuera de los formularios
Quiero enfatizar que él consideró esto solo una idea y no ha sido examinado en profundidad por la comunidad de accesibilidad en general. Si alguno de ustedes está leyendo, ¿qué les parece?
La demostración de Eric usó un texto alternativo más detallado que el de figcaption, pero parece que el patrón estaría bien incluso si fueran idénticos.
Pequeño recordatorio: Twitter tiene texto alternativo
Pero necesitas habilitar la función.