¡Cómo es posible una lectura accesible de las imágenes!

En tiempos de digitalización, no hay que descuidar la cuestión de la accesibilidad. Una forma de facilitar el acceso de las personas con discapacidad a los contenidos de Internet son los llamados textos alternativos. Estos textos están diseñados para proporcionar a las personas con ciertas discapacidades el contenido de un sitio web de una forma que puedan entender. Pero: ¿Qué es exactamente un texto alternativo? ¿Quién los necesita? ¿Y cómo se puede crear uno?

Para que los sitios y contenidos web sean accesibles, los textos alternativos, entre otras cosas, son muy importantes para facilitar el acceso a las personas con discapacidad. Transmiten información y funciones para invidentes y personas con deficiencias visuales, así como para personas con discapacidades físicas o cognitivas. También ayudan a entender gráficos, fotos y controles. Los lectores de pantalla o los visualizadores Braille utilizan las alternativas textuales, haciendo accesibles estos elementos a las personas con discapacidad.

Por otra parte, también son útiles para la optimización de motores de búsqueda. Las alternativas de texto transfieren la información sobre una imagen a los motores de búsqueda. Esto mejora la capacidad de búsqueda.

¿Cómo crear alternativas de texto?

La respuesta a la pregunta de cómo crear un texto alternativo es bastante simple: para ello, basta con insertar un texto alternativo en el área apropiada de un elemento que será provisto de dicho texto. La mayoría de los desarrolladores aplican esto en un llamado CMS. La abreviatura CMS significa Sistema de Gestión de Contenidos. Se trata de un software que se utiliza para la creación y gestión de contenidos web.

Para ello también se puede utilizar el lenguaje de programación HTML. Ahí es donde entra en juego el atributo alt o también llamado alt-Tag. Allí se inserta dentro de la etiqueta img. El texto se escribe en la zona interior del atributo alt, que luego se emite a través de las tecnologías de ayuda.

Sin embargo, esto por sí solo no es suficiente. Tampoco hay que olvidar el atributo title, ya que hay lectores de pantalla que no leen la descripción del atributo alt, sino la del atributo title. Por lo tanto, también tiene sentido especificar un texto idéntico para ambas etiquetas. Además, esto también tiene la función de mostrar el contenido como información adicional sobre un elemento cuando se pasa el ratón por encima.

Además, existe el atributo aria. Más concretamente, el atributo aria-label o también el atributo aria-labelledby. Se utilizan para etiquetar botones o campos de formulario.

Los distintos tipos de imágenes

En un mundo cada vez más digitalizado, no basta con crear alternativas textuales. Es mucho más eficaz describir correctamente los distintos tipos de imágenes, ya que también difieren en su función. Sin embargo, primero hay que reconocerlas. Las descripciones son inútiles si no pueden reflejar la función de una imagen. Así que surge la pregunta: ¿Qué tipos de imágenes existen? ¿Y cuál es la mejor manera de describirlas?

En primer lugar, debe familiarizarse con las diferencias entre los distintos tipos de gráficos. Es importante comprender la finalidad de un gráfico. En general, se distingue entre gráficos informativos, funcionales y decorativos. Además, existen los llamados tipos de letra. Aquí la descripción es muy sencilla, simplemente se toma aquí el texto, que debe verse en el diagrama.

Imágenes informativas

En el caso de las imágenes informativas, el contenido visible de un gráfico se transmite mediante textos alternativos. Se presta atención a la información que es relevante para el mensaje de la imagen. Un ejemplo de ello es la descripción de un logotipo. Aquí se describe brevemente cómo es el logotipo y de quién es.

En el siguiente ejemplo, se integra una alternativa de texto en un logotipo en HTML:

<img

src="logo.jpg"

alt="El logotipo de Eye-Able. Representa un ojo".

title="El logotipo de Eye-Able. Representa un ojo.">

</img>

Aquí, un archivo de imagen se incrusta en HTML utilizando el elemento img, donde el atributo src especifica la fuente de la imagen. La descripción del gráfico se inserta entre comillas en los atributos alt y title. De este modo, el contenido de texto "El logotipo de Eye-Able. Representa un ojo" se emite a través del lector de pantalla o la pantalla Braille.

De este modo, se elimina la barrera y todas las personas que utilizan tecnologías de apoyo pueden entender lo que se ve en este gráfico.

Diagramas

Sin embargo, si se trata de un diagrama, esto debe decidirse siempre caso por caso. A menudo depende del tipo y de la información contenida. Si el gráfico contiene poca información, ésta puede incluirse en el texto alternativo. Por ejemplo, "Presenta los resultados electorales de los partidos en un gráfico de barras. Partido A: 40%, Partido B: 30%, Partido C: 20%, y así sucesivamente". Sin embargo, si se presenta algo más complejo o extenso, se recomienda incluir la información detallada en un texto posterior. En ese caso, el texto alternativo sólo debería indicar el tipo y la finalidad del diagrama. Además, podría indicarse que la descripción más detallada sigue a continuación. Un ejemplo sería un diagrama que muestre las cifras de población de los estados alemanes. El contenido sería el siguiente "Representa las cifras de población de los 16 estados federados en un diagrama de barras. Nota: La descripción más detallada sigue en el texto".

Imágenes funcionales

A continuación, consideremos las imágenes funcionales. Se trata de gráficos enlazados. Se dividen en enlaces, elementos o botones. En las alternativas de texto, se define la función y no qué reconocer. En cambio, se especifica a dónde lleva el enlace.

He aquí un ejemplo en HTML para un gráfico enlazado:

<a href=“https://eye-able.com/“>

<img src=“logo.jpg“

alt="Página de inicio de Eye-Able"

title="Página de inicio de Eye-Able"

</img>

</a>

La etiqueta a y el atributo href se utilizan en HTML para crear un enlace. En este caso, el enlace se crea a la página https://eye-able.com/. En el elemento img, volvemos a ver el logotipo de Eye-Able, pero esta vez los atributos alt y title describen la función en lugar del gráfico. De este modo, el contenido "Página principal de Eye-Able" se muestra ahora a través de las tecnologías de asistencia.

Lo mismo ocurre con los símbolos. Por ejemplo, si se utiliza un disquete, el aspecto del icono no es relevante para la salida con un lector de pantalla porque simboliza la función de guardar. Otro ejemplo son los iconos de búsqueda. Que se trate de una lupa o no es irrelevante. Mucho más interesante es la acción que hay detrás. Representa una opción de búsqueda o el inicio de una búsqueda.

La situación es similar con los botones. Un botón que representa una flecha apuntando a la derecha nunca debe tener "flecha apuntando a la derecha" en el texto alternativo. Para una persona vidente, está claro que al pulsarlo se abre la página siguiente, pero no para las personas ciegas. Esto se debe a que sólo oyen "flecha a la derecha" a través de la salida de voz. Esto no es suficientemente claro o no muestra que la página siguiente se abre al pulsar el botón. Por tanto, tiene más sentido ofrecer estos textos alternativos con "ir a la página siguiente" o "seguir desplazándose".

Cuadros decorativos

Otro tipo de gráficos son las imágenes decorativas. Se utilizan para decorar una página web. El procedimiento para crear textos alternativos es muy sencillo en este caso. Aquí el contenido del texto alternativo se deja vacío. Es importante que el atributo de los textos alternativos siga presente. Aquí sólo se deja en blanco el contenido del texto. Esto tiene como consecuencia que el lector de pantalla omita este gráfico irrelevante en la salida.

¿Cómo escribir buenos textos alternativos?

Ahora que se han presentado los distintos gráficos, sólo queda una pregunta: "¿Cómo formular textos alternativos óptimos?". Una vez conocidas todas estas sutilezas y diferencias de las imágenes, sólo hay que seguir unas pocas reglas. Los siguientes consejos pueden ayudarle:

1. Inicio de una alternativa de texto:

   Aquí hay que asegurarse de que no se produzcan duplicaciones. Por lo tanto, el comienzo no debe empezar por: "La imagen ...", "El gráfico ...", "La foto ..." o "El enlace" .... De todos modos, los lectores de pantalla reconocen y muestran si se trata de un gráfico o de un enlace. Por lo tanto, debería prescindirse de ello.

2. Longitud de los textos:

   No se especifica la extensión del texto alternativo. Sin embargo, una o dos frases deberían bastar para la descripción de un gráfico. La longitud ideal es de 80 caracteres. ¿Por qué 80? Las personas ciegas suelen leer estos textos con la ayuda de un dispositivo Braille. Las pantallas Braille pueden emitir entre 40 y 80 caracteres a la vez. Por razones de claridad, conviene atenerse a este límite. Por supuesto, un texto puede ser más largo. Sin embargo, no debe superar los 120 caracteres.

3. Ortografía y puntuación:

   Hay que procurar que la ortografía sea correcta. Si una palabra contiene un error ortográfico, puede dar lugar rápidamente a ambigüedad, ya que un lector de pantalla emite exactamente lo que está almacenado en el texto alternativo. Del mismo modo, una gramática correcta desempeña un papel importante en la comprensión de las imágenes. Pero la puntuación correcta también es relevante. Los signos de puntuación incorrectos o ausentes dificultan la comprensión del gráfico por parte del oyente. Por ello, antes de insertar el contenido del texto, es necesario revisar la ortografía y la gramática.

4. Derechos de autor:

   Muchos gráficos llevan un aviso de copyright. Pero, ¿es importante esta información para entender una imagen? La respuesta es: ¡No! Para una buena formulación de alternativas textuales esta información carece de interés, porque en la descripción de una imagen sólo se escribe lo más importante. Por lo tanto, esta información debe omitirse.

5. Comentarios:

   Es fácil determinar si la descripción de la imagen es acertada. Pero, ¿cómo? Esta pregunta es fácil de responder. No requiere mucho esfuerzo. Un breve comentario de una persona ciega o con discapacidad visual proporciona información sobre si el contenido del texto se ha formulado con sentido. Pero no todo el mundo conoce a una persona con discapacidad visual. Esto puede resolverse de otra manera. Aquí se puede interrogar a todos los que aún no han visto la imagen. Puede hacerse por escrito, por supuesto, pero también por teléfono. En cuanto llega aquí una respuesta "positiva", la descripción tiene éxito.

¿Qué ocurre realmente cuando faltan textos alternativos?

La falta de textos alternativos para las imágenes puede resultar especialmente molesta para los usuarios invidentes. Esto significaría que no podrían ver el contenido del gráfico. Al mismo tiempo, en tal caso el lector de pantalla sólo mostraría el nombre del archivo, por ejemplo "img123.jpg". Esta descripción no ayudaría a nadie. Por lo tanto, los desarrolladores deben asegurarse siempre de utilizar contenido de texto. Sin embargo, también es importante conocer las diferencias para poder describir imágenes y gráficos con sentido. De este modo, las tecnologías de apoyo pueden representarlas utilizando las alternativas textuales. Esto también hace que Internet sea un poco más accesible para todos.