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

En la era digital, la accesibilidad es un tema fundamental. Una forma de facilitar el acceso a los contenidos en internet a las personas con discapacidad es mediante los llamados textos alternativos. Estos textos están diseñados para que las personas con ciertas discapacidades puedan comprender el contenido de un sitio web. Pero, ¿qué es exactamente un texto alternativo? ¿Quiénes los necesitan? ¿Y cómo se crea uno?

Para que los sitios web y su contenido sean accesibles, los textos alternativos son fundamentales, entre otras cosas, para facilitar el acceso a las personas con discapacidad. Estos textos transmiten información y funciones a personas ciegas o con discapacidad visual, así como a personas con discapacidades físicas o cognitivas. También ayudan a comprender gráficos, fotografías y controles. Los lectores de pantalla o las pantallas Braille utilizan los textos alternativos, lo que hace que estos elementos sean accesibles para las personas con discapacidad.

Por otro lado, 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, lo que mejora su visibilidad.

¿Cómo crear textos alternativos?

La respuesta a la pregunta de cómo crear un texto alternativo es bastante sencilla: basta con insertarlo en el área correspondiente del elemento que lo contenga. La mayoría de los desarrolladores lo implementan en un CMS. Las siglas CMS significan Sistema de Gestión de Contenidos. Se trata de un software que se utiliza para la creación y gestión de contenido web.

El lenguaje de programación HTML también se puede utilizar para esto. Aquí es donde entra en juego el atributo alt, también llamado etiqueta alt. Este se inserta dentro de la etiqueta img. El texto se escribe en el área interna del atributo alt, que luego se muestra mediante las tecnologías de asistencia.

Sin embargo, esto por sí solo no basta. Tampoco hay que olvidar el atributo `title`, ya que existen lectores de pantalla que no leen la descripción del atributo `alt`, sino la del atributo `title`. Por lo tanto, también conviene especificar un texto idéntico para ambas etiquetas. Además, esto también permite mostrar el contenido como información adicional sobre un elemento al pasar el cursor del ratón sobre el área.

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

Los diferentes tipos de imágenes

En un mundo cada vez más digital, no basta con crear alternativas textuales. Es mucho más efectivo describir correctamente los distintos tipos de imágenes, ya que también difieren en su función. Sin embargo, primero hay que reconocer estas diferencias. Las descripciones son inútiles si no reflejan la función de una imagen. Surge entonces la pregunta: ¿Qué tipos de imágenes existen? ¿Y cuál es la mejor manera de describirlas?

Primero, conviene 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 las tipografías. Su descripción es muy sencilla: basta con tomar el texto que aparece en el diagrama.

Imágenes informativas

En el caso de las imágenes informativas, el contenido visible del gráfico se transmite mediante textos alternativos. Se presta atención a la información relevante para el mensaje de la imagen. Un ejemplo de esto es la descripción de un logotipo. En ella, se ofrece una breve descripción de cómo luce el logotipo y a quién pertenece.

En el siguiente ejemplo, se integra un texto alternativo 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í, se inserta un archivo de imagen en HTML mediante 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 esta forma, el texto «El logotipo de Eye-Able. Representa un ojo» se muestra a través del lector de pantalla o la pantalla Braille.

De esta forma, se elimina la barrera y todas las personas que utilizan tecnologías de asistencia pueden comprender lo que se muestra en este gráfico.

Diagramas

Sin embargo, si se trata de un diagrama, esto siempre debe decidirse caso por caso. Esto suele depender del tipo y la información que contiene. Si el gráfico contiene poca información, esta 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%, etc.». No obstante, si se presenta algo más complejo o extenso, se recomienda incluir la información detallada en un texto posterior. El texto alternativo solo debe indicar el tipo y el propósito del diagrama. Además, se podría indicar que la descripción más detallada se encuentra a continuación. Un ejemplo sería un gráfico que muestra las cifras de población de los estados alemanes. El contenido sería: «Representa las cifras de población de los 16 estados federados en un gráfico de barras. Nota: La descripción más detallada se encuentra a continuación en el texto».

Imágenes funcionales

A continuación, consideremos las imágenes funcionales. Se trata de gráficos vinculados. Se dividen en enlaces, elementos o botones. En las alternativas de texto, se define la función y no lo que se debe reconocer. En su lugar, se especifica dónde El enlace lleva a.

Aquí tienes un ejemplo en HTML de un gráfico con enlace:

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

<img src=“logo.jpg“

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

Título="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. Por lo tanto, el contenido "Página de inicio de Eye-Able" ahora se muestra a través de tecnologías de asistencia.

Lo mismo se aplica a los símbolos. Por ejemplo, si se usa un disquete, la apariencia del icono no es relevante para la visualización con un lector de pantalla, ya que simboliza la función de guardar. Otro ejemplo son los iconos de búsqueda. Que sea una lupa o no es irrelevante. Mucho más interesante es la acción que representa. Esto indica 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 hacia la derecha nunca debería tener la frase "flecha hacia la derecha" en el texto alternativo. Para una persona vidente, es evidente que al hacer clic en él se abre la página siguiente, pero no para las personas ciegas. Esto se debe a que solo oyen "flecha hacia la derecha" a través del mensaje de voz. Esto no es suficientemente claro ni indica que al pulsar el botón se abre la página siguiente. Por lo tanto, es más conveniente proporcionar estos textos alternativos como "ir a la página siguiente" o "seguir desplazándose".

Cuadros decorativos

Otro tipo de gráficos son las imágenes decorativas. Estas se utilizan para decorar una página web. El procedimiento para crear textos alternativos es muy sencillo. En este caso, el contenido del texto alternativo se deja en blanco. Es importante que el atributo de texto alternativo se mantenga. Solo el texto se deja vacío. Esto provoca 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 elementos gráficos, solo queda una pregunta: "¿Cómo se formulan los textos alternativos óptimos?". Una vez que se conocen todas estas sutilezas y diferencias de las imágenes, solo hay que seguir unas pocas reglas. Los siguientes consejos pueden ser útiles:

1. Inicio de una alternativa de texto:

   Es fundamental asegurarse de que no haya duplicaciones. Por lo tanto, el texto no debe comenzar con: «La imagen...», «El gráfico...», «La foto...» ni «El enlace...». Los lectores de pantalla reconocen y muestran tanto gráficos como enlaces. Por consiguiente, conviene omitir esta frase.

2. Longitud de los textos:

   No se especifica la longitud del texto alternativo. Sin embargo, una o dos frases deberían ser suficientes para describir un gráfico. La longitud ideal es de 80 caracteres. ¿Por qué 80? Las personas ciegas suelen leer estos textos con la ayuda de una pantalla Braille. Las pantallas Braille pueden mostrar entre 40 y 80 caracteres a la vez. Por motivos de claridad, se recomienda respetar este límite. Por supuesto, un texto puede ser más largo, pero no debe superar los 120 caracteres.

3. Ortografía y puntuación:

   Es fundamental asegurarse de que la ortografía sea correcta. Un error ortográfico puede generar ambigüedad, ya que el lector de pantalla muestra exactamente el texto alternativo. Asimismo, la gramática correcta es crucial para la comprensión de las imágenes. La puntuación también es importante. Una puntuación incorrecta o faltante dificulta la comprensión del gráfico. Por ello, se recomienda revisar la ortografía y la gramática antes de insertar el texto.

4. Derechos de autor:

   Muchas imágenes incluyen un aviso de derechos de autor. Pero, ¿es esta información importante para comprender una imagen? La respuesta es: ¡No! Para una buena redacción de textos alternativos, esta información resulta irrelevante, ya que en la descripción de una imagen solo se incluye lo más importante. Por lo tanto, conviene omitirla.

5. Comentario:

   Es fácil determinar si la descripción de la imagen es exitosa. ¿Pero cómo? Esta pregunta tiene una respuesta sencilla. No requiere mucho esfuerzo. Un breve comentario de una persona ciega o con discapacidad visual proporciona información sobre si el texto se formuló correctamente. Sin embargo, no todos conocen a una persona con discapacidad visual. Esto se puede solucionar de otra manera. Se puede consultar a cualquier persona que aún no haya visto la imagen. Esto se puede hacer por escrito, por supuesto, pero también por teléfono. En cuanto se reciba una respuesta positiva, la descripción se considerará exitosa.

¿Qué ocurre realmente cuando faltan textos alternativos?

La falta de textos alternativos para las imágenes puede resultar especialmente molesta para los usuarios ciegos, ya que les impide ver el contenido gráfico. Además, el lector de pantalla solo mostraría el nombre del archivo, como por ejemplo: "img123.jpg". Esta descripción no sería útil para nadie. Por lo tanto, los desarrolladores siempre deben asegurarse de usar texto. Sin embargo, también es importante conocer las diferencias para poder describir imágenes y gráficos de forma comprensible. De esta manera, las tecnologías de asistencia pueden visualizarlos utilizando las alternativas de texto, lo que también contribuye a que internet sea más accesible para todos.