La importancia de etiquetar correctamente una imagen en la web
Una de las técnicas básicas de accesibilidad web es la incorporación de textos alternativos a las imágenes. Y es posible que sea una de las cosas más importantes que puedes hacer para que tu página web sea más accesible. De hecho, es el primer punto en los principios y directrices WCAG 2.0 ( Las Pautas de Accesibilidad para el Contenido Web ) WCAG 2.0 Guía 1.1.1 – «Todo el contenido no textual que se presenta al usuario tiene una alternativa de texto que sirve el propósito equivalente.» Para cumplir con esta directiva tendremos que añadir una etiqueta ALT (alt=””) a la imagen: <img src="" alt="">
El texto alternativo . La etiqueta ALT para la accesibilidad Web
El texto alternativo es un texto asociado con una imagen que sirve para transmitir la misma información que la imagen. Este texto asegura que el lector no pierda información ya sea porque las imágenes no están disponibles, haya desactivado las imágenes en su navegador o porqué está utilizando un lector de pantalla debido a que padece alguna discapacidad visual. La ausencia de este texto, o una mala redacción, puede ser una fuente de frustración para los usuarios con discapacidad visual. Ahora cierra los ojos e imagínate que tu lector de pantalla de repente dice imagen01 o aún peor el nombre de archivo “DSFC8908.jpg” . ¿ Como te sentirías ?
Otros Usos formales de la etiqueta ALT
Motores de Búsqueda Los motores de búsqueda ( Google , Bing , etc.. ) se comportan como usuarios ciegos y no ven las imágenes sino que leen el texto alternativo para poder interpretar el contenido y así indexarlo . Aquí es donde entra en juego la etiqueta ALT , ayuda a Google y a otros motores de búsqueda a comprender de qué se trata la imagen y porqué elegiste incluirla en el contenido publicación. Como Placeholder ó marcador de posición El texto alternativo también se mostrará en la página si la imagen no se carga. Esto puede suceder si el servidor de alojamiento web es lento o si el usuario tiene una conexión a Internet lenta.
Estructura básica de la descripción visual correcta de una imagen
- Empieza de forma general y establece el escenario (estilo, entorno, perspectiva).
- Entra en detalle de forma selectiva.
- Incluir una interpretación, cuando sea necesario y siempre que aporte información relevante.
- ¡ Hazlo simple ! : Utiliza un lenguaje que todo el mundo pueda entender.
1. Empieza de forma general y establece el escenario.
Para completar este punto intenta responder a las siguientes preguntas :
- ¿Tiempo y lugar?
- ¿Dentro o fuera?
- ¿Ambiente y alrededores?
- ¿Otros atributos generales?
Veamos un ejemplo para la siguiente imagen:
Opción 1 : Etiqueta ALT =”Auditorio nacional de Madrid”
Opción 2 : Etiqueta ALT =”Concierto de la Filarmónica de Madrid en el Auditorio Nacional”
Opción 3 : Etiqueta ALT =”En el Auditorio Nacional de música de Madrid lleno de gente, con vistas desde el ala izquierda en el balcón más alto. Mientras La Filarmónica de Madrid se prepara en el escenario para empezar la Novena Sinfonía de Beethoven, el escenario está lleno de músicos esperando las órdenes del director de orquesta.”
Como puedes comprobar en la opción 3 he seguido la Estructura básica de la descripción visual de una imagen:
- Tiempo y lugar: Ahora En el Auditorio Nacional de música de Madrid.
- Dentro o fuera: Dentro “con vistas desde el ala izquierda en el balcón más alto”.
- Ambiente y alrededores: Mientras La Filarmónica de Madrid se prepara en el escenario para empezar la Novena Sinfonía de Beethoven.
- Otros atributos generales: El escenario está lleno de músicos esperando las órdenes del director de orquesta.
Ahora lee las 3 opciones sin ver la imagen. ¿ Con cuál te quedas ? No tienes la sensación de estar metido dentro de la imagen con la opción 3 , yo si 😉
2. Entra en detalle de forma selectiva.
¿Qué quieres destacar? ¿Qué me distrae en la imagen ?
Ejemplo 1 .: Al anochecer en la playa mirando al faro encendido de Cabo Ortegal en Galicia bajo un cielo estrellado y las islas de Ons al fondo. El agua del mar es sedosa y en una charca cercana se refleja el brillo de una estrella.
Ejemplo 2 .: Vista desde el sitio más alto de la muralla de Béjar, bajo un sol tenue del atardecer, podemos ver un camino de tierra que conduce a la puerta medieval de la antigua entrada a la ciudad, mientras al fondo los árboles verdes rodean edificaciones del barrio circundante. Justo en la torre de enfrente al lado de la almena, una persona se asoma contemplado la puesta de sol.
3. Incluye tu interpretación
¿Analogías? ( similitud , parecidos ). ¿ Desde qué punto de vista quieres hacer la descripción de la imágen ?
Ciertos tipos de fenómenos visuales, como sombras o nubes, pueden ser difíciles de describir objetivamente. En el caso de personas con ceguera congénita o ciego temprano sin memoria visual, puede ser imposible o muy difícil transmitir la experiencia visual de una persona con visión.
Sin embargo, una analogía bien elegida puede ser muy eficaz y ayudarnos en el proceso de la descripción de la imagen.
Para construir una analogía útil, elige objetos o experiencias que puedan ser comunes para todo el mundo.
4. ¡ Hazlo simple ! : Utiliza un lenguaje que todo el mundo pueda entender.
Un lenguaje claro y preciso es muy importante para cualquier buena descripción. Al describir la imagen a un público con discapacidad visual, tienes que tener cuidado y evitar un lenguaje ambiguo y figurativo. El oyente ciego puede tomar las palabras de forma literal. Por ejemplo, decir que «la luz cae sobre un objeto» no tiene sentido para una persona con ceguera congénita. En general, no hagas suposiciones sobre el conocimiento.
Cuándo no utilizar el texto ALT
A veces el diseño de la página web incluirá imágenes que son simplemente decorativas , ya que esta no agregan información relevante al contenido de una página.
Bien porque esta información ya está dada por el texto que la acompaña o porque se ha incluido para hacer el diseño visualmente más atractivo. En estos casos, se debe proporcionar un texto alt vacío (alt = «») para que puedan ser ignorados por tecnologías asistivas, como los lectores de pantalla.
Nunca se debe eliminar porque cuando no se proporciona algunos lectores de pantalla leerán el nombre de archivo en su lugar y podrían distraer a los usuarios.
Ejemplos de cuando no utilizar el texto ALT:
- Estilos visuales como bordes, espaciadores y esquinas
- Ilustraciones al texto adyacente pero que no aportan ninguna información
- Identificado y descrito por el texto circundante.
En resumen
Para definir correctamente una etiqueta ALT en las imágenes usaremos la estructura básica de la descripción visual para personas ciegas.
- Asunto, forma, color, orientación, medio y estilo.
- Usa palabras específicas y proporciona detalles claros.
- Explica conceptos intangibles con analogías.
- ¡Hazlo fácil!
Como hemos visto el texto ALT necesita describir bien la imagen. No lo utilices para incluir palabras clave o para escribir una descripción . Acuérdate de escribir para los lectores de pantalla, describiendo una imagen para que alguien que no pueda ver, comprenda lo que quieres transmitir.
Así que antes de hacer clic en Insertar en la publicación, tómate un momento extra para crear el texto ALT adecuado.
¡ Es tu turno ! ¿ Que te ha parecido ? Estaré encantado de que me lo cuentes …