ÍNDICE DE CONTENIDO
El mundo digital destaca por el uso de imágenes y elementos visuales que captan la atención de los usuarios, bien con objetivos de marketing o bien para transmitir información de una forma más creativa. Lo que se desconoce por parte de las personas que no desarrollan la web es que el atributo alt text posibilita a las personas con discapacidad visual obtener toda la información de forma textual.
El alt text permite que las imágenes de un sitio web sean más accesibles para todas las personas y es un dato necesario que debe incluirse para cumplir con las pautas de accesibilidad web.
En el siguiente artículo conoceremos qué es el alt text, las buenas prácticas para añadir el atributo alt y por qué mejora la accesibilidad e incluso el posicionamiento de nuestro sitio web.
¿Qué es un atributo alt text? definición y usos
El alt text o texto alternativo es un campo descriptivo que se añade a las imágenes de cualquier documento digital para que las personas con discapacidad visual obtengan una descripción de ese elemento. Desde documentos de texto, presentaciones de diapositivas, documentos PDF, páginas web, correos electrónicos, etc. Cualquier imagen que incluyamos en estos formatos deben ser imágenes con atributos “alt”.
¿Cómo se aplica el alt de imagen?
En función del software o documento digital que se utilice, el atributo alt se añadirá de una forma diferente:
- Los programas de procesadores de texto permiten editar las opciones de las imágenes y añadir la descripción de forma intuitiva a nivel usuario. Actualmente existen muchos editores que mejoran la accesibilidad mediante inteligencia artificial, incluyendo el alt text de forma automática y con una descripción muy apropiada.
- En páginas web que funcionen bajo un gestor de contenidos también se pueden modificar las opciones de los elementos visuales y cambiar el img alt desde la interfaz de usuario de una manera sencilla.
- Desde el código HTML de cualquier página web es posible incluir el atributo alt en el elemento img. Si inspecciona el código de una web, encontrará este atributo en cada imagen ya sea vacío o completado con una descripción.
¿Quién puede utilizar el alt text?
El texto alternativo es una opción de mejora de la accesibilidad para las personas con discapacidad visual, como ceguera o baja visión, para que puedan acceder a la información de la imagen. Es habitual que utilicen tecnologías accesibles como el lector de pantalla que lee toda la información de la web o documento digital, incluyendo el img alt. Los usuarios de lector de pantalla acceden a diario a los textos alternativos de las imágenes y de cualquier otro elemento no textual.
El alt de imagen también sirve para que los buscadores como Google tengan más contenido en la web donde rastrear. Por este motivo, el alt text mejora el posicionamiento web, ya que es información que se utilizará en los resultados de búsqueda de los navegadores.
Además, con el atributo alt facilitamos el acceso a usuarios cuya velocidad de internet no es elevada. En caso de que no sea posible cargar todos los elementos web debido a la conexión, el navegador mostrará el texto de las imágenes con alt en el lugar en que estén ubicadas.
Buenas prácticas para añadir el alt de imagen
Existen numerosos tipos de imágenes y cada una se utiliza en la web con un propósito diferente. Podemos transmitir información adicional con una gráfica o infografía o simplemente añadir decoración con una imagen de fondo.
Las imágenes que sí suman datos al contenido deben tener el atributo alt relleno con una descripción. Sin embargo, aquellas que son decorativas no tendrán texto en el alt text. A continuación se explica cómo definirlas de forma correcta en web.
¿Cómo definir imágenes con alt descriptivo?
1. El atributo alt text de una imagen debe ser conciso: se aconseja no superar los 150 caracteres en la descripción para que los usuarios de lector de pantalla no escuchen demasiada información de la misma imagen, que en muchos casos puede ser irrelevante.
2. El alt de imagen debe ser claro: una explicación evidente de lo que muestra la imagen y lo que ven las personas a través de sus ojos.
¿Cómo definir imágenes decorativas?
En una página web todos los elementos img deben tener el atributo alt y en el caso de las imágenes decorativas el contenido estará vacío. De esta forma, el lector de pantalla reconocerá que esa imagen se ha marcado como decorativa y no leerá nada en voz alta, continuará la lectura con el elemento siguiente.
¿Cómo definir el alt text de una imagen dentro de un enlace?
En la mayoría de páginas web se utilizan botones, iconos e incluso fotografías que sirven como enlace para navegar a otro sitio web o realizar una acción.
Un ejemplo es un menú de navegación formado solo por iconos, como la pestaña Inicio con un icono de una casa. Este icono debe tener en el atributo alt la acción que realiza al hacer clic: “Inicio”.
Ejemplos correctos e incorrectos de imágenes con alt
1. Describir una fotografía
Alt text incorrecto: foto-web.jpg
Alt text correcto: Dos personas sonrientes con confetti a su alrededor. Una está sentada en silla de ruedas y eleva los brazos y la otra está detrás manejando la silla
Es esencial no utilizar el nombre del archivo de la imagen como texto alternativo.
2. Describir una imagen funcional
Alt text incorrecto: Tres líneas horizontales
Alt text correcto: Abrir menú principal de navegación
Se trata de un icono con la función de desplegar el menú de navegación, por tanto no se puede dejar el alt de imagen vacío ni indicar su aspecto visual. En estos casos hay que describir la acción.
Alt text incorrecto: Icono persona
Alt text correcto: Abrir menú de accesibilidad
Esta imagen es un botón que activa el menú de accesibilidad al hacer clic sobre él. Se debe indicar al usuario la función que va a ejecutar.
3. Describir una imagen decorativa
Alt text incorrecto: lo incorrecto en este caso sería no incluir el atributo alt en el elemento img o añadir el atributo alt con texto dentro.
Alt text correcto: Las imágenes decorativas no necesitan descripción. En HTML la forma correcta de indicar que una imagen es decorativa se haría dejando el img alt vacío:
<img src=”fondo-pantalla.jpg” alt=””/>
4. Describir una imagen de texto
Alt text incorrecto: En esta imagen aparece escrito el texto “Aprendamos texto narrativo”.
Alt text correcto: Aprendamos texto narrativo
Es redundante decir que se trata de una imagen donde hay texto, el lector de pantalla navega de forma lineal por el contenido y le indica al usuario que el elemento enfocado es una imagen.
5. Describir un grupo de imágenes
Alt text incorrecto: Osos pardos.
Alt text correcto: Osa con sus oseznos caminando por el bosque buscando alimento y escalando en los árboles
En una secuencia de imágenes se debe dar una visión global de lo que ocurre en ellas, no sólo describir una de ellas, ya que el usuario pierde mucha información.
6. Describir un mapa
Alt text incorrecto: Mapa de Italia
Alt text correcto: Ruta circular recomendada por Italia alternando tren y coche desde la región de Campania, pasando regiones como por Lazio, Toscana, Piemonte, Lombardia o Marche
UserWay: alt text para mejorar la accesibilidad de su web
Es esencial que cada imagen disponga de alt text y cualquier persona conozca la información que transmiten. Por ello, UserWay es la solución que le facilitará mejorar la accesibilidad y apostar por la inclusión.
Dentro del conjunto de herramientas que ofrece UserWay para mejorar la accesibilidad web, puede encontrar el generador de alt de imagen mediante IA. Este generador forma parte del Widget UserWay y permite gestionar los errores de accesibilidad detectados. Podrá localizar las imágenes sin alt text y generar una descripción automática con inteligencia artificial, con su posterior revisión de forma manual.
Todo momento es bueno para comenzar a cumplir con las pautas de accesibilidad y los requisitos de las WCAG, solicite ahora una prueba gratuita de UserWay y descubra su potencial permitiendo acceso a su web a muchas más personas.
Preguntas frecuentes
¿Es necesario traducir el alt text?
El img alt en HTML es contenido textual y debe estar escrito en el mismo idioma que el idioma definido en la página a través del atributo lang de la etiqueta html. Si la página o sitio web dispone de varios idiomas, este texto al igual que el resto del contenido de la web debe traducirse, de este modo si el usuario selecciona un idioma diferente, el lector de pantalla leerá el alt text correctamente y el usuario no perderá información.
¿Qué ocurre si el atributo alt es muy extenso?
En caso de incluir demasiada información en el alt text de una imagen se podría producir una mala experiencia de usuario. Por ejemplo, la persona que acceda a la imagen a través de un lector de pantalla o teclado Braille podría saturarse y escuchar durante demasiado tiempo contenido relevante, pues el alt de imagen se considera contenido importante y el lector de pantalla siempre lee el texto descriptivo.
¿Quién debe añadir el alt de imagen?
De forma general todo el mundo que disponga de un sitio web, ya sea personal o para su negocio, debe añadir todas las imágenes con alt. De forma específica, serán los desarrolladores web o quien gestione la información del sitio quien deba añadir esa descripción textual en el img alt. Un sitio web donde todos los elementos no textuales dispongan de alt text, será mucho más accesible y conseguirá un mayor tráfico de usuarios.