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 es utilizar los llamados textos alternativos. Estos textos están diseñados de tal manera que reproducen el contenido de un sitio web de forma que las personas con ciertas discapacidades puedan entenderlo. 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 comprender gráficos, fotos y elementos operativos. Los lectores de pantalla o los visualizadores Braille utilizan las alternativas textuales y hacen que estos elementos sean accesibles para 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 se crean alternativas textuales?
La respuesta a la pregunta de cómo crear un texto alternativo es bastante sencilla: basta con insertar un texto alternativo en el área correspondiente de un elemento al que se vaya a dotar de dicho texto. La mayoría de los desarrolladores utilizan esto en un llamado CMS. La abreviatura CMS significa Sistema de Gestión de Contenidos. Se trata de un software que se utiliza para crear y gestionar contenidos web.
Para ello también se puede utilizar el lenguaje de programación HTML. Aquí es donde entra en juego el atributo alt, también conocido como etiqueta alt. 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 asistencia.
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, tiene sentido introducir un texto idéntico para ambas etiquetas. Esto también tiene la función de mostrar el contenido como información adicional sobre un elemento al pasar el ratón por la zona.
También existe el atributo aria. Más concretamente, el atributo aria-label o 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. Pero 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 el significado y la finalidad de un gráfico. En general, se distingue entre gráficos informativos, funcionales y decorativos. También existen los llamados tipos de letra. Aquí la descripción es muy sencilla, basta con copiar el texto que aparece en el gráfico.
Fotos 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. En ella se describe brevemente cómo es el logotipo y quién lo diseñó.
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, con el atributo src especificando 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 textual "El logotipo de Eye-Able. Representa un ojo" se emite a través del lector de pantalla o de 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 muestra 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 sólo contiene una pequeña cantidad de información, ésta puede incluirse en el texto alternativo. Por ejemplo: "Muestra los resultados electorales de los partidos en un gráfico de barras. Partido A: 40%, Partido B: 30%, Partido C: 20%, etc.". Sin embargo, si se presenta algo más complejo o largo, es aconsejable insertar 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 señalarse que a continuación figura una descripción más detallada. Un ejemplo sería un diagrama que muestre las cifras de población de los estados federados. El contenido sería el siguiente: "Muestra 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, examinamos 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 lo que se quiere 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://services.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, se crea el enlace a la página https://services.eye-able.com/. En el elemento img, volvemos a ver el logotipo de Eye-Able, pero esta vez los atributos alt y title no describen el gráfico, sino la función. El contenido "Página de inicio 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, ya que simboliza la función de guardar. Otro ejemplo son los iconos de búsqueda. Que sea una lupa o no es irrelevante. La acción que hay detrás es mucho más interesante. Simboliza 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 muestre una flecha apuntando a la derecha nunca debe etiquetarse como "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 indica que la página siguiente se abrirá al pulsar el botón. Por eso tiene más sentido ofrecer estos textos alternativos con "a la página siguiente" o "desplácese a la página siguiente".
Cuadros decorativos
Otro tipo de gráficos son las imágenes decorativas. Se utilizan para decorar un sitio 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 siga presente. Aquí sólo se deja en blanco el contenido del texto. Como resultado, el lector de pantalla omite este gráfico irrelevante en la salida.
¿Cómo se escriben buenos textos alternativos?
Una vez presentados los distintos gráficos, sólo queda una pregunta: "¿Cómo formular textos alternativos óptimos?". Una vez conocidas todas estas sutilezas y diferencias entre las imágenes, sólo hay que seguir unas pocas reglas. Los siguientes consejos pueden ayudarle:
- Inicio de una alternativa de texto:
Aquí hay que tener cuidado para evitar la duplicación. Por 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 tanto, debe omitirse.
Longitud de los textos:
No se especifica la extensión del texto alternativo. Sin embargo, una o dos frases deberían bastar 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 un visualizador 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 también puede ser más largo. Sin embargo, no debe superar los 120 caracteres.
Ortografía y puntuación:
Asegúrate de que la ortografía es correcta. Si una palabra contiene un error ortográfico, rápidamente puede resultar poco clara, ya que un lector de pantalla emite exactamente lo que está almacenado en el texto alternativo. La gramática correcta también 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 eso, antes de insertar el contenido del texto, conviene revisar la ortografía y la gramática.
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! Esta información carece de interés para una buena formulación de alternativas textuales, ya que una descripción de imagen sólo contiene la información más importante. Por lo tanto, esta información debe omitirse.
Comentarios:
Puede determinar rápidamente si la descripción de la imagen es acertada. Pero, ¿cómo? Esta pregunta es fácil de responder. No requiere grandes esfuerzos. Un breve comentario de una persona ciega o con discapacidad visual proporciona información sobre si el contenido del texto se ha formulado con sensatez. Pero no todo el mundo conoce a una persona con discapacidad visual. Esto también puede resolverse de otra manera. A quien aún no haya visto la imagen se le pueden hacer preguntas. Por supuesto, esto puede hacerse por escrito, pero también por teléfono. En cuanto se recibe una respuesta "positiva", la descripción ha tenido éxito.
¿Qué ocurre realmente si 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 reconocer 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 de forma significativa. Así, las tecnologías de apoyo pueden reproducirlos con ayuda de las alternativas textuales. Esto también hace que Internet sea más accesible para todos.
