Si quieres que tu página web sea más accesible y atraiga a un grupo más extenso, el alt text es un elemento indispensable para conseguirlo. En este post, te explicamos qué es el alt text, para qué sirve y por qué lo recomendamos para optimizar tus imágenes.
Qué es el alt text
Para saber qué es el alt text solo hay que prestar atención a su nombre, ya que, como el procpio término indica, se trata un texto alternativo que describe la imagen cuando esta no puede ser vista. A diferencia de créditos, títulos o información adicional, el alt text no es un complemento de la imagen, sino un reemplazo. Este texto alternativo se inserta en nuestro documento HTML en el atributo ALT de nuestra etiqueta IMG. Es decir, la descripción de la imagen debe insertarse entre las comillas después del alt en una etiqueta <img src=”” alt=””>.
Como veras más adelante, no todo recurso visual necesita texto alternativo. Muchas veces nos encontramos con páginas web que tienen imágenes que solo cumplen propósitos decorativos: ilustraciones, formas, fondos… Estos están estrechamente relacionados con la experiencia visual y no con el contenido en sí. En estos casos, podemos dejar las comillas vacías en nuestro código HTML.
¿Para qué funciona el alt text?
Una vez explicado qué es el alt text, hay que hablar de para qué sirve. De manera general, el alt text se usa para ofrecerles tanto al navegante como al navegador una alternativa cuando las imágenes, gráficos o fotos no son de fácil acceso.
Accesibilidad
Los lectores de pantalla pueden acceder al texto alternativo para ayudar a personas con discapacidad visual que, de otra manera, no podrían saber el contenido de una imagen. Esta simple descripción mejora la experiencia de usuario de muchos navegantes, expandiendo el alcance de tu página web. Para saber en qué casos deberías usar alt text y en cuáles no, te invitamos a revisar los consejos de accesibilidad publicados por la universidad de Pensilvania, en donde explican en profundidad qué recursos deberían tener texto alternativo y cómo es la mejor manera de añadirlo en tu código HTML.
Además de ayudar a navegantes con discapacidad visual, el alt text permite al navegador dar contexto sobre imágenes que no logra cargar o que no se encuentran en la web. De esta manera, el navegante puede tener un contexto general de la imagen incluso cuando no puede acceder a ella. Este texto aparecerá junto a un icono de imagen en donde estaría el recurso visual y se encuentra en todo tipo de páginas, incluso en las imágenes de redes sociales.
Importancia en SEO
Aunque la accesibilidad es muy relevante, la importancia del alt text va más allá de los usuarios. De hecho, los motores de búsqueda usan el texto alternativo de los recursos visuales para clasificarlos en los resultados. Las descripciones específicas de imágenes y gráficos ayudan al motor de búsqueda a saber de qué va nuestro contenido. De esta manera, el alt text se vuelve un recurso importante para posicionarnos de manera acertada en las búsquedas de nuestro público objetivo.
Una forma de usar este recurso es poner como texto alternativo de tus imágenes las palabras clave de tu sitio web. Por ejemplo, si estás escribiendo sobre tipos de contenido en HTML y tienes un diagrama explicándolos, asegúrate de usar tus palabras clave en la descripción que redactes para el texto alternativo del diagrama.
¿Qué sigue?
Has aprendido qué es el alt text, pero hay una gran variedad de atributos que nos permiten optimizar nuestras páginas web. Te invitamos a seguir conociéndolos en nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. ¡No te lo pierdas!
