Decenas de veces te habrán dicho que si quieres posicionar imágenes en Google hay que poner bien los textos alternativos (el famoso «alt») en las imágenes. Pero ¿es esto cierto? ¿Cuándo y cómo hay que usar los textos alternativos?
Ahora que llega el HTML5, el W3C, organismo que establece los estándares de los sitios web, han planteando un documento llamado técnicas para ofrecer textos alternativos útiles en el que se explica con bastante detalle el cómo hay que redactar esos textos y en qué casos.
Hay que tener presente que los textos alternativos se plantearon inicialmente como una forma textual que representa a las imágenes (pero no al contenido del mismo). Básicamente estos textos aparecen cuando el «lector» no carga la imagen (lo que incluyen navegadores sólo-texto, robots de búsqueda, reconocimiento de voz…).
Para comenzar, nos ofrecen algunas buenas prácticas básicas:
- Ha de ofrecer la misma información que el contenido de la imagen.
- Si una imagen ofrece una función específica (como un enlace gráfico) hay que describir esto.
- Debe ser un texto breve / conciso.
- Hay que escribir según el contexto. Una misma imagen puede tener distintos textos según se use.
- Evitar texto redundante que pueda haber en otros puntos de la página.
Pero, aunque hay estas buenas prácticas, también hay una serie de «obligaciones» (entre comillas… digamos que recomendaciones requeridas):
- Cuando un enlace es sólo una imagen: La imagen como texto alternativo sería el texto que pondrías en el enlace si no hubiera esa imagen.
- Gráficas (diagramas, mapas, etc…): Como texto alternativo describiremos el proceso, los datos o la localización según corresponda. Puede ser un texto «largo». También se puede enlazar a una parte de la web donde haya un bloque que incluya la descripción (en este caso sí que se vería en otra parte de la web).
- Texto en imágenes: pues casi ni que decir que el texto alternativo es el mismo texto de la imagen.
- Imágenes decorativas: Simplemente se deja en blanco el texto alternativo, ya que eso no aporta nada.
Otra opción interesante en general es que si queremos proveer mucha información sobre una imagen relacionarla de alguna manera con un enlace en el que se informe concretamente de lo que es o hay en ella.
En aquellas imágenes a las que no hay que prestar ningún tipo de atención (por ejemplo un pixel que cuenta visitas o similar) hay que indicar como alto y ancho de la imagen 0, y el alt debe ponerse pero debe estar en blanco.
En el caso de los iconos podemos encontrarnos varias situaciones. Por ejemplo, si un icono va acompañado del texto / enlace al que hace referencia el propio icono, en este caso deberíamos dejarlo en blanco. En cambio, si el icono va acompañado de un mensaje más largo, el icono sí que podría llevar un indicativo de qué significa (por ejemplo, algo como «Alerta!»).
Cuando usamos la nueva etiqueta de «figure», que incluye el «figcaption», en este último se incluye qué es la imagen, y en el texto alternativo podríamos indicar la descripción propia de la imagen.
De la misma forma podríamos usar las imágenes obtenidas con una cámara web (webcam). En este caso estaría bien indicar de alguna forma en el texto alternativo la fecha y hora de la imagen tomada además de una descripción de lo que aparece en la misma (aunque esto, si es automatizado, puede ser difícil). En el caso de que tras la imagen haya esa explicación, el texto alternativo sólo sería necesario indicar la localización y cuándo se tomó.
En el caso de múltiples imágenes que confirma una única, en general lo ideal es que toda la información se ponga siempre en la primera de las imágenes.
Otro caso de imagen es el que nos encontramos en los CAPTCHA. En estos casos hay varias opciones… en general los captchas siempre han de ir acompañados de un método alternativo que no sea visual (puede ser sonoro). En este caso indicaremos en el texto alternativo que se utilice el otro método.
Los logos o insignias han de incluir por norma general a lo que hacen referencia (no haría falta incluir que es el logo, simplemente el nombre o empresa). Si el nombre de lo que hacen referencia viene a continuación no haría falta incorporarlo en el texto alternativo. En algunos casos (cuando el logo se utilice por temas informativos y no como referencia al propio en sí), entonces se incorporará una descripción de lo que es el logo en sí, de las formas, colores y similares que incluye.
Para acabar, cuando una imagen se utiliza «inline» (o sea, en un texto sustituyendo a una palabra o concepto), el texto alternativo será el concepto o texto que sustituye, de forma que si leemos el texto de forma seguida, ignorando la imagen, el texto tenga sentido completo.
Cambiando ya de nivel, los textos alternativos largos (los cortos serían aquellos que sustituyen a una palabra o similar) deberían ser como máximo de 75 a 100 caracteres. Esto es válido tanto para el «alt» como para los «figcaption».
¿Y qué ocurre con el «title»? Pues básicamente que no se debería continuar usando. El title no ha de incluir un texto alternativo, sino que es un elemento visual, y como elemento visual no es compatible con todos los dispositivos. Es por esto que es más recomendable usar el «figcaption» como sustituto del «title».
Deja una respuesta