🎉 Nueva herramienta: Lenguaje sencillo. Haz clic en el botón y pruébalo en directo

¡Qué accesible es la lectura de imágenes!

Gafas sobre un libro

Compartir post:

Gafas sobre un libro

¡Qué accesible es la lectura de imágenes!

Comparte esta entrada:

Gafas sobre un libro

 

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 de tal manera que presentan los contenidos de un sitio web de forma que las personas con ciertas discapacidades puedan entenderlos. Pero, ¿qué es exactamente un texto alternativo? ¿Quién los necesita? ¿Y cómo puede crearse 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 discapacidad visual, así como para personas con deficiencias 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 y hacen así accesibles estos elementos a 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. Esto mejora la facilidad de búsqueda.

¿Cómo crear alternativas de texto?

La respuesta a la pregunta de cómo crear un texto alternativo es bastante sencilla: para ello, basta con insertar un texto alternativo en la zona correspondiente de un elemento que disponga de dicho texto. La mayoría de los desarrolladores lo utilizan 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.

El lenguaje de programación HTML también puede utilizarse para este fin. 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 basta. 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, también tiene la función de mostrar el contenido como información adicional sobre un elemento cuando el ratón se desplaza sobre la zona.

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. 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, hay que 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 retoma el texto que puede verse 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. 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:

El logotipo Eye-Able . Representa un ojo.

<img

src="logo.jpg"

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

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

</img>

Aquí, un archivo de imagen se incrusta en HTML utilizando el elemento img, con el atributo src indicando 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 Eye-Able. Representa un ojo" se emite a través del lector de pantalla o del visualizador 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%, etc.". Sin embargo, si se presenta algo más complejo o extenso, es aconsejable 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 viene a continuación. Un ejemplo sería un gráfico con las cifras de población de los estados federados. 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 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 ve. 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 web de Eye-Able"

</img>

</a>

La a-Tag 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 no describen el gráfico, sino la función. Así, el contenido "Página de inicio de Eye-Able" se muestra ahora a través de las tecnologías de apoyo.

 

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 se trate de una lupa es irrelevante. Lo que es mucho más interesante es la acción que hay detrás. Representan una opción de búsqueda o el inicio de una búsqueda.

 

Lo mismo se aplica a los botones. Un botón que representa una flecha apuntando a la derecha nunca debe destacarse con "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 lo tanto, tiene más sentido ofrecer estos textos alternativos con "ir a la página siguiente" o "pasar a la página siguiente".

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 en blanco. 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 efecto que el lector de pantalla omita este gráfico irrelevante en la salida.

¿Cómo se escriben buenos textos alternativos?

Una vez introducidos 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 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 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. Lo ideal son 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.

  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. 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.

  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. Se puede preguntar a alguien que aún no haya visto la imagen. Puede hacerse por escrito, por supuesto, pero también por teléfono. En cuanto hay 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 de forma significativa. De este modo, las tecnologías de apoyo pueden representarlas con la ayuda de las alternativas textuales. Esto también hace que Internet sea un poco más accesible para todos.

Simple para todos

¿Interés despertado? Estaremos encantados de ayudarle.

Con más de 25 funciones para la accesibilidad digital, Eye-Able también le ayuda a reducir sus barreras a largo plazo. De este modo, pone su información al alcance de todos y no excluye a ningún visitante; en resumen: accede a un nuevo grupo destinatario sin grandes volúmenes de marketing.

El icono muestra la figura de la accesibilidad

Consulta

Consulta no vinculante sobre la accesibilidad digital en general

El icono muestra la figura de la accesibilidad

Análisis

Discusión del posible potencial de optimización de su sitio web

El icono muestra la figura de la accesibilidad

Demostración en vivo

Presentación del software de asistencia directamente en su sitio web

Más contribuciones

Si puede ser un poco más: