En la era de la digitalización, no se puede descuidar el tema de la accesibilidad. Una forma de facilitar a las personas con discapacidad el acceso a los contenidos de Internet son los denominados «textos alternativos». Estos textos están diseñados para que las personas con determinadas discapacidades puedan conocer los contenidos de una página web de una forma que les resulte comprensible. Pero, ¿qué es exactamente un texto alternativo? ¿Quién los necesita? ¿Y cómo se puede crear uno?
Para diseñar páginas web y contenidos web sin barreras, los textos alternativos son, entre otros elementos, muy importantes para facilitar el acceso a las personas con discapacidad. Proporcionan información y funciones a las personas ciegas y con discapacidad visual, así como a aquellas con discapacidades físicas o cognitivas. También ayudan a comprender los gráficos, las fotografías y los elementos de control. Los lectores de pantalla o las líneas de braille utilizan los textos alternativos y hacen que estos elementos sean accesibles para las personas con discapacidad.
Por otro lado, también son útiles para la optimización en motores de búsqueda. Las descripciones alternativas transmiten a los motores de búsqueda la información sobre una imagen. De este modo, se mejora la visibilidad en los resultados de búsqueda.
¿Cómo se crean las alternativas de texto?
La respuesta a la pregunta de cómo crear un texto alternativo es muy sencilla: basta con introducir un texto alternativo en el campo correspondiente de un elemento al que se le vaya a asignar dicho texto. La mayoría de los desarrolladores lo hacen en lo que se conoce como un 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.
El lenguaje de programación HTML también se puede utilizar para ello. Aquí es donde entra en juego el atributo «alt», también conocido como etiqueta «alt». Se inserta dentro de la etiqueta «img». En el interior del atributo «alt» se escribe el texto que luego se mostrará a través de las tecnologías de asistencia.
Sin embargo, eso por sí solo no basta. Tampoco hay que olvidarse del atributo «title», ya que hay lectores de pantalla que no leen la descripción del atributo «alt», sino la del atributo «title». Por eso, conviene indicar un texto idéntico en ambas etiquetas. Además, esto también sirve para mostrar el contenido como información adicional sobre un elemento al pasar el ratón por encima de la zona correspondiente.
Además, también existe el atributo «aria». Más concretamente, el atributo «aria-label» o el atributo «aria-labelledby». Estos 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 de texto. Es mucho más eficaz describir correctamente los distintos tipos de imágenes, ya que también difieren en su función. Pero, para ello, primero hay que identificarlas. Las descripciones no sirven de nada si no reflejan la función de una imagen. Así pues, surge la pregunta: ¿qué tipos de imágenes hay? ¿Y cuál es la mejor forma de describirlas?
En primer lugar, conviene familiarizarse con las diferencias entre los distintos tipos de gráficos. Para ello, es importante comprender el sentido y la finalidad de un gráfico. En general, se distingue entre gráficos informativos, funcionales y decorativos. Además, existen los denominados «diseños tipográficos». En este caso, la descripción es muy sencilla: basta con transcribir el texto que aparece en el gráfico.
Imágenes informativas
En el caso de las imágenes informativas, el contenido visible de un gráfico se transmite mediante textos alternativos. Para ello, se presta atención a la información relevante para el mensaje que transmite la imagen. Un ejemplo de ello es la descripción de un logotipo, en la que se describe brevemente el aspecto del logotipo y quién es su autor.
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í se incrusta un archivo de imagen en HTML mediante el elemento img, en el que el atributo src indica la fuente de la imagen. La descripción de la imagen se introduce entre comillas en los atributos alt y title. De este modo, el contenido de texto «El logotipo de Eye-Able. Representa un ojo» se reproduce a través del lector de pantalla o la línea braille.
De esta forma, se elimina la barrera y todas las personas que utilizan tecnologías de apoyo pueden comprender lo que se muestra en este gráfico.
Diagramas
Sin embargo, si se trata de un gráfico, esto debe decidirse siempre caso por caso. A menudo depende del tipo de gráfico y de la información que contenga. Si el gráfico contiene poca información, esta 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 representa algo más complejo o extenso, se recomienda incluir la información detallada en un texto posterior. En el texto alternativo solo debería indicarse entonces el tipo y la finalidad del gráfico. Además, podría señalarse que la descripción más detallada se encuentra más abajo. Un ejemplo sería un gráfico que muestre el número de habitantes de los estados federados. El contenido sería entonces: «Muestra el número de habitantes de los 16 estados federados en un gráfico de barras. Nota: la descripción más detallada se encuentra más adelante en el texto».
Imágenes funcionales
A continuación, analizaremos las imágenes funcionales. Se trata de gráficos con enlaces. Se clasifican en enlaces, elementos o botones. En las alternativas de texto se define la función y no lo que se ve en la imagen. En su lugar, se indicaa dóndeconduce el enlace.
Aquí tienes un ejemplo en HTML de una imagen con enlace:
<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, el enlace apunta 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 su función. De este modo, el contenido «Página de inicio de Eye-Able» se reproduce a través de las tecnologías de asistencia.
Lo mismo ocurre con los iconos. Por ejemplo, cuando se utiliza un disquete, el aspecto del icono no es relevante para la lectura con un lector de pantalla, ya que simboliza la función de guardar. Otro ejemplo son los iconos de búsqueda. No importa si se trata de una lupa o no. Lo que realmente importa es la acción que hay detrás. Estos iconos representan una opción de búsqueda o el inicio de una búsqueda.
Lo mismo ocurre con los botones. Un botón que muestra una flecha hacia la derecha nunca debería tener como texto alternativo «flecha hacia la derecha». Para una persona vidente, está claro que al hacer clic en él se abre la página siguiente, pero para las personas ciegas no lo es. Y es que, a través del lector de pantalla, solo oyen «flecha hacia la derecha». Esto no es lo suficientemente claro, o mejor dicho, no permite deducir que, al pulsar el botón, se abrirá la página siguiente. Por lo tanto, es más adecuado utilizar textos alternativos como «a la página siguiente» o «pasar a la página siguiente».
Cuadros decorativos
Otro tipo de elementos 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. El contenido del texto alternativo se deja en blanco. Es importante que el atributo del texto alternativo siga estando presente. Solo el contenido del texto se deja en blanco. De este modo, el lector de pantalla omite esta imagen irrelevante al leer el contenido.
¿Cómo se redactan buenos textos alternativos?
Ahora que ya se han presentado los distintos tipos de imágenes, solo queda una pregunta: «¿Cómo se redactan textos alternativos óptimos?». Si se conocen todos estos matices y diferencias entre las imágenes, solo hay que tener en cuenta unas pocas reglas. Las siguientes indicaciones pueden resultar de ayuda:
- Inicio de la alternativa de texto:
En este caso, hay que procurar que no se produzcan repeticiones. Por lo tanto, el comienzo no debería empezar con: «La imagen…», «El gráfico…», «La foto…» o «El enlace…». Los lectores de pantalla detectan y anuncian de todos modos si se trata de un gráfico o de un enlace. Por eso, conviene evitarlo.
Longitud de los textos:
No hay una longitud establecida para el texto alternativo. Sin embargo, para describir una imagen, deberían bastar una o dos frases. Lo ideal son 80 caracteres. ¿Por qué 80? Las personas ciegas suelen leer estos textos con ayuda de una línea de braille. Las líneas de braille pueden mostrar entre 40 y 80 caracteres a la vez. Por motivos de claridad, es recomendable respetar este límite. Por supuesto, un texto también puede ser más largo. No obstante, no debería superar los 120 caracteres.
Ortografía y puntuación:
Hay que prestar atención a que la ortografía sea correcta. Si una palabra contiene un error ortográfico, pueden surgir rápidamente malentendidos, ya que un lector de pantalla reproduce exactamente lo que figura en el texto alternativo. Del mismo modo, la gramática correcta desempeña un papel importante en la comprensión de las imágenes. Pero también es relevante el uso correcto de los signos de puntuación. La presencia de signos de puntuación incorrectos o la falta de los mismos dificulta que el oyente comprenda la imagen. Por ello, antes de insertar el contenido de texto, se debe realizar una revisión ortográfica y gramatical.
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! Esta información no es relevante a la hora de redactar bien las alternativas de texto, ya que en la descripción de una imagen solo se incluye lo más importante. Por eso, conviene omitir esta información.
Comentarios:
Es fácil comprobar si la descripción de la imagen es adecuada. ¿Pero cómo? La respuesta a esta pregunta es sencilla. No requiere mucho esfuerzo. Un breve comentario de una persona ciega o con discapacidad visual nos indica si el contenido del texto se ha redactado de forma adecuada. Pero no todo el mundo conoce a alguien con una discapacidad visual. Hay otras formas de resolverlo. Se puede preguntar a cualquier persona que aún no haya visto la imagen. Por supuesto, esto se puede hacer por escrito, pero también por teléfono. En cuanto se reciba una respuesta «positiva», la descripción será acertada.
¿Qué ocurre realmente cuando faltan los textos alternativos?
La ausencia de textos alternativos para las imágenes puede resultar especialmente molesta para los usuarios ciegos. De hecho, esto haría que no pudieran percibir el contenido de la imagen. Al mismo tiempo, en un caso así, el lector de pantalla solo leería el nombre del archivo, como por ejemplo: «img123.jpg». Una descripción así no serviría de nada a nadie. Por lo tanto, los desarrolladores deberían procurar siempre utilizar contenido de texto. Sin embargo, también es importante conocer las diferencias para poder describir las imágenes y los gráficos de forma adecuada. Las tecnologías de asistencia pueden reproducir esta información con la ayuda de los textos alternativos. De este modo, Internet se vuelve un poco más accesible para todos.
