3. Contenido accesible

• Colores
• Imágenes
• Enlaces
• Estructura

Colores

La elección de los colores

Los colores de nuestro contenido es algo esencial que debemos tener en cuenta a la hora de generar contenido accesible. La importancia de los colores que elegimos reside en que, a mayor contraste entre el color de un elemento y su fondo, mejor se verá.

Esto es especialmente importante para personas con algún tipo de problema de visión, pero también ayuda en otros casos como cuando el sol incide en una pantalla.

Respecto al contraste de colores, las WCAG nos dicen lo siguiente:

• Los textos y las imágenes de texto deben tener un contraste mínimo con el fondo de 4.5:1. Sin embargo, el Texto de gran tamaño debe tener al menos un contraste de 3:1.
• Los componentes de la interfaz de usuario y los gráficos deben tener un contraste mínimo de 3:1.
• No tienen requisito de contraste mínimo los siguientes elementos:
  • Los componentes inactivos o deshabilitados, por ejemplo, cuando en un formulario el botón Enviar está desactivado hasta que se rellenas todos los datos obligatorios.
  • Los elementos decorativos
  • Los elementos de una imagen que contiene otros contenidos visuales significativos.
  • Los logotipos

Para saber más: Se considera texto de gran tamaño aquel que tiene un tamaño mínimo de 18 pts o 14 pts en negrita.

En la práctica

Vamos a fijarnos en qué colores elegimos para:

• El texto.
• Las imágenes que transmitan con texto algún tipo de información relevante, llamadas imágenes de texto.
• Componentes de la interfaz de usuario como botones, iconos, etc.
• Gráficas

Y vamos a comprobar si cumplen o no los requisitos mínimos haciendo uso de herramientas que nos facilitan este trabajo de manera más o menos automática. En la sección herramientas encontrarás como instalar y usar dos de ellas:

• Colour Contrast Analyser
• Silktide Accessibility Checker

La información basada en colores

Suele ser común utilizar colores para presentar cierta información. Por ejemplo, en una gráfica mostramos dos líneas una en rojo y en otra en azul. Al lado de la gráfica añadimos una leyenda indicando a qué hace referencia cada una de ellas. ¿Qué pasaría si veo la gráfica en blanco y negro o si las veo las dos del mismo color? ¿Cómo sé qué está representando cada una de las líneas?

Nunca representaremos información de manera que para entenderla sea imprescindible distinguir alguno o todos los colores, es decir, no debemos otorgarle significado a los colores que utilizamos. Esto incluye gráficas, botones, imágenes, enlaces, etc.

Imágenes

Imágenes decorativas o informativas

Lo primero que debemos saber a la hora de trabajar con imágenes es distinguir entre aquellas que proporcionan información y las que son decorativas. Una imagen es decorativa solo si la información que recibe una persona es exactamente la misma tanto si mostramos la imagen como si la eliminamos.

Veamos algunos ejemplos:

• Los logosson informativas ya que nos indican, por ejemplo, que organizaciones participan en un evento o quien financia una institución.
  
• Las imágenes que se añaden por razones estéticas, son decorativas.
  
• Las fotografías habitualmente nos cuentan algo de lo que ha sucedido en algún evento, por tanto, pueden ser informativas. Aunque si se han añadido por razones estéticas serán decorativas al igual que otros tipos de imágenes.
  
• Las imágenes de texto siempre son imágenes informativas, a no ser que el mismo texto que aparece en la imagen, aparezca también en el texto cercano.
  

Por tanto, a la hora de mejorar la accesibilidad de nuestro contenido vamos a enfocarnos exclusivamente en las imágenes que transmiten información, es decir, no son decorativas.

El tratamiento que demos a estas imágenes va a permitir, o no, acceder a cualquier persona a la información completa de nuestro contenido, aunque no pueda verlas o no tenga la velocidad de internet suficiente como para cargarlas.

Las WCAG nos recomiendan lo siguiente:

• Las imágenes deben tener un texto alternativo para que pueda ser mostrado en lugar de la imagen, para que pueda traducirse a braille, para que pueda ser leído por un lector de pantalla, o para que pueda utilizarse de cualquier otro modo que se necesite.
• Se debe utilizar texto y no imágenes de texto siempre que una determinada presentación del texto no sea imprescindible para la información que se transmite.
• Las imágenes decorativas deben de tener el texto alternativo vacío.

En la práctica

Evitaremos las imágenes de texto, priorizando siempre el texto plano y dándole formato con las opciones que tenemos disponible. Una el texto que hay dentro de una imagen no se puede buscar, ampliar, cambiar la fuente, el color y todas las modificaciones que se pueden necesitar para mejorar su lectura.

Cada vez que añadamos una imagen, pensaremos si es decorativa o no. Si es decorativa dejaremos el texto alternativo en blanco, pero si no lo es, SIEMPRE escribiremos un texto alternativo.

Al subir imágenes, también hay que tener en cuenta el tamaño de la misma para que sea el mínimo imprescindible para que se vea correctamente y sin pixelación. Si subimos una imagen más grande de lo necesario, estamos perjudicando, entre otras, a las personas con limitaciones de internet.

Texto alternativo

Un texto alternativo es un texto que recoge toda la información que se está transmitiendo con la imagen. Este texto se añade a la imagen o bien mediante HTML y su tributo “alt” o bien mediante un campo asociado a la imagen que nos ofrecen los editores de contenido, en nuestro caso, WordPress. Al contrario que un pie de foto, no es un texto que se muestre en la web, si no que es una información paralela a la imagen, que solo es interpretada cuando la imagen no se puede ver o cargar. Es decir, solo se puede acceder a él de las siguientes maneras:

• Utilizando una herramienta de apoyo como un lector de pantalla
• Utilizando una herramienta de análisis como las que estamos utilizando en este curso
• Accediendo al código HTML
• Con una limitación técnica que no cargue las imágenes al abrir una web

Para saber más: El texto alternativo no es lo mismo que el atributo “title” de HTML y no puede ser sustituido por éste.

Vamos a ver algunas pautas para escribir un buen texto alternativo.

• Debe ser claro y conciso
• No debe comenzar por la palabra imagen o fotografía. Los lectores de pantalla ya reconocen que se trata de una imagen y se lo de dicen a la persona usuaria, repetirlo solo hace que la experiencia sea peor. Excepción: Si el tipo de imagen es importante para describirla con precisión, por ejemplo, si queremos especificar que es un dibujo y no una fotografía.
• Debe incluir el texto que se presente en la imagen. Por ejemplo, la fecha y el lugar de un evento en el caso de una imagen publicitaria.
• Si añadimos pie de foto, este no debe sustituir ni repetir al texto alternativo.
• La descripción de la imagen depende de su contexto y de la información que se pretende transmitir. Una misma imagen puede tener diferentes textos alternativos si se utiliza en sitios distintos. Por ejemplo, en la imagen siguiente podemos hacer el foco en la ponente o en el público, según lo que estemos contando, teniendo dos textos alternativos posibles:
  
  • La profesora de la UEx Rocío Yuste, presentando los principales resultados del proyecto
  • La policía nacional escuchando los resultados del proyecto junto al resto del público.
• Deja atrás tu sesgo visual: No es necesario describir todo lo que aparece en la imagen, no se trata de recrear una experiencia visual, sino de crear una experiencia auditiva, por lo que menciona únicamente las cosas relevantes de esa imagen en este contexto. Si estamos vendiendo una camiseta, su color es relevante, pero si estamos describiendo una foto sobre un grupo de amigos, probablemente no lo sea.
• Deja la subjetividad de lado: Intenta evitar opiniones subjetivas y calificativos como bien, mal, bonito, feo… Y limítate a lo informativo. Si yo te digo que en una imagen hay un coche que está mal estacionado, tú puedes imaginar que ese coche está subido a una acera, en una plaza de prohibido aparcar, o incluso en medio de la calle. Sin embargo, si te digo que hay un coche estacionado junto a una señal de prohibido aparcar, tu imaginación se acercará mucho más a la realidad de la imagen.

En la práctica

A la hora de escribir un texto alternativo, puedes utilizar diferentes técnicas, por ejemplo, imaginar que le estás explicando por teléfono a alguien el contenido de la página que estás editando. O tapar las imágenes y releer el texto, analizando si falta algo de información para que el significado sea completo.

Además, algunas herramientas nos indican qué imágenes no tienen texto alternativo y podemos utilizarlas para revisar que no se nos haya olvidado ninguno. Pero recuerda que no siempre que lo indiquen, será un error real, las imágenes decorativas deben de mantener el texto alternativo en blanco. A continuación, te sugerimos dos de ellas. En la sección Herramientas encontrarás como instalarlas y utilizarlas.

• Silktide Accessibility Checker
• Web developer Toolbar

En el portal institucional de la Universidad de Extremadura, podemos añadir el texto alternativo de una imagen desde la biblioteca de medios. Buscamos la imagen, la seleccionamos para abrir sus detalles, y rellenamos el campo Texto alternativo.

Enlaces

Muchas herramientas de apoyo permiten mostrar una lista con todos los enlaces que aparecen en una página. Esto es una manera de agilizar el acceso al contenido de una web para las personas que no utilizan el ratón y que se hace muy tedioso tener que recorrer el contenido entero de una página antes de llegar al enlace que buscan.

Además, cuanto más claro quede a donde nos dirige un enlace, más fácil tendremos todas las personas para decidir si nos interesa seguirlo o no. Principalmente las personas con discapacidad visual y cognitiva.

Por otro lado, es importante que las personas perciban cuando hay un enlace. Por eso y teniendo en cuenta lo que hemos dicho en la sección Colores, es importante subrayar los textos con enlace y no simplemente ponerlos en otro color.

Por estas razones las WCAG nos dicen los siguiente:

• La finalidad de cada enlace debe determinarse a partir del texto del enlace únicamente o a partir del texto del enlace junto con su contexto más cercano.
• Subrayado o alguna otra distinción visual es requerida.

En la práctica

Cuando necesitamos crear un enlace, escribimos un texto descriptivo:

Seleccionamos el texto al que queremos añadir el enlace:

Utilizamos la opción crear enlace:

Añadimos la url del enlace y aplicamos los cambios:

De esta manera, nunca incluiremos directamente una url en nuestros textos. Siempre tendremos una descripción enlazada a su destino. Las urls suelen ser complicadas y en muchas ocasiones no dejan claro el destino del enlace. Por otro lado, a las personas usuarias de lectores de pantalla les dificultan la comprensión.

¿Cómo tiene que ser el texto?

• Autodescriptivo: En el siguiente ejemplo, hay un enlace que nos lleva a la página web del Asociación Española Contra el Cáncer. Solo con ese texto, ya está perfectamente definido el destino del enlace y si lo sacáramos del párrafo en el que se encuentra seguiríamos sin tener dudas sobre a donde nos redireccionará.

  “La Universidad de Extremadura (UEx) se ha unido a la red de Espacios Sin Humo de la Asociación Española Contra el Cáncer. Lo hace con la señalización de 18 de sus centros universitarios, nueve en cada provincia, presentes en Badajoz, Cáceres, Plasencia y Mérida.”

• Que se describa dentro del párrafo donde se encuentra. Preferiblemente con el texto que le precede y no con el que va detrás: En el siguiente ejemplo, el enlace se encuentra en la palabra comentarios, que por sí misma no describe del todo la intención del enlace, le falta algo de contexto que
  se encuentra en el resto de la frase. «Acceda a las simulaciones y envíe sus comentarios«.

• Que se describa dentro del elemento de lista donde se encuentra: Puede darse el caso de que, por ejemplo, mostremos una lista de documentos en distintos formatos. En ese caso podría quedar de la siguiente manera:

  «Temario de la asignatura

  1. Tema 1: Word o PDF
  2. Tema 2: Word o PDF
  3. Tema 3: Word o PDF«

De la misma manera, se pueden añadir enlaces a imágenes, en vez de a texto. En este caso, la descripción del propósito la incluiremos en el texto alternativo de la imagen.

Por ejemplo, en la imagen del logo de la UEx, pondremos como texto alternativo el destino del enlace, que en este caso sería “Universidad de Extremadura”.

Abrir en una nueva pestaña

No se recomienda la apertura de enlaces en nuevas ventanas del navegador debido a los problemas que ello puede originar:

• Algunas personas pueden desorientarse, al no darse cuenta de lo que ha ocurrido.
• La nueva ventana tendrá anulada la funcionalidad del botón «atrás».
• El rendimiento del sistema puede verse reducido.
• Puede confundir a algunas personas, en caso de que no entender que la nueva ventana es realmente una ventana del mismo navegador que estaba usando.
• Algunas personas se pueden sentir confusas, puesto que los navegadores modernos bloquean en ocasiones la apertura de nuevas ventanas, lo que le puede hacer pensar que el enlace no funciona.

En caso de que la apertura resulte completamente necesaria, se recomienda informar de la misma. Concretamente, para las Administraciones Públicas, se considera como necesaria la apertura de ventana en los siguientes casos:

• Enlaces a sitios web externo
• Enlaces a archivos adjuntos

En la práctica

En la página web institucional esto se gestiona automáticamente. Por tanto, no debes seleccionar nunca la opción de abrir en una nueva pestaña. En el caso de que el enlace vaya a un sitio externo, automáticamente lo reconocerá y abrirá una nueva pestaña. Además, añadirá un icono con su correspondiente texto alternativo, para que las personas sepan que el enlace que están seleccionando se abrirá en una nueva pestaña.

Estructura

La estructura de una página se compone de cada uno de los elementos que se añaden a ella, como por ejemplo, párrafos, tablas, imágenes, listas… Todos estos elementos deben estar adecuadamente identificados. Así, las herramientas de apoyo pueden modificar el modo de presentación de los contenidos sin perder la estructura y por tanto la información relativa a ella.

Por ejemplo, un lector de pantalla cuando encuentra una lista, si está identificada como tal, le indica a la persona usuaria que hay una lista y cuantos ítems tiene. De esta manera, la persona sabe que todo lo que viene a continuación está relacionado entre sí, y además puede decidir saltarla completa. Si no la identificamos adecuadamente perderá estas funcionalidades y escuchar uno por uno los ítems de una lista solo para llegar hasta el final y sin saber muy bien donde acaba puede ser una tarea cuanto menos tediosa.

En el lado opuesto, podemos encontrar un texto al que se le ha dado estilo de Título 1 porque querían resaltar esa frase dándole mayor tamaño y negrita. Si este texto no es realmente un título, cuando una herramienta de apoyo analice la estructura de la página e indique que existe ese título, puede llegar a ser muy confuso.

Las WCAG nos dicen que la información, la estructura y las relaciones transmitidas a través de la presentación siempre deben poder determinarse mediante programación o estar disponibles en el texto.

Cada elemento debe llevar asociado el estilo que le corresponde. Cada estilo solo debe asociarse a los elementos para los que fue creado.

A continuación veremos los elementos más importantes y como debemos trabajar con ellos.

Títulos

Las páginas con un volumen de información elevado suelen dividirse en una serie de capítulos, apartados, secciones y párrafos. Está distinción crea la estructura de la página, permitiendo la navegación y el acceso de forma sencilla a la información cuando se utiliza una herramienta de apoyo, como puede ser un lector pantalla. Si no existe esa estructura y es correcta, sería necesario esperar a la lectura completa de la página antes de encontrar la sección adecuada, además de la confusión que puede generar.

Los encabezados de página se consideran elementos básicos en la navegación de un sitio web.

Si semánticamente un texto es el título de una sección, debe asignarse el estilo de Título disponible en el Editor de contenidos. Además, hay que asignarle el nivel adecuado, de manera que si se genera un índice, éste quede bien estructurado:

• Solo puede haber un Título 1. Como verás en el editor no existe este nivel porque es el que se utiliza automáticamente como título de la página y no puede repertirse.
• No debe haber títulos sin contenido. Por ejemplo, dos Título 3 seguidos sin ningún párrafo entre ellos.
• No debe haber saltos entres niveles. No se debe añadir un Título 3 si previamente no hay un Título 2.
• No utilices Títulos por razones estéticas.

Imagina que es la página web es un documento de texto tipo Word. El índice del documento tiene que tener coherencia con el contenido y sus secciones.

Para comprobar que has estructurado los títulos de manera correcta, puedes utilizar la extensión para navegador Headings Map. En la sección Herramientas, encontrarás como instalarla y utilizarla. A la izquierda del navegador te mostrará un índice de la página que tengas abierta y te marcará en rojo los errores que encuentre.

Tablas

Todas las tablas deben crearse utilizando la opción Tablas del editor. Solo las tablas y nada más que las tablas deben crearse utilizando la opción Tablas del editor.

Evita el uso de tablas para maquetación

Se debe identificar siempre la fila y/o la columna de encabezado como tal.

1. Selecciona la fila o la columna que contenga el encabezado de la tabla.
   

2. Abre las propiedades de la fila o la columna respectivamente.
   

3. Selecciona en tipo de fila o columna la opción Cabecera.

   

También es recomendable que especifiques un título para la tabla y que lo hagas con la opción que ofrece el Editor de contenidos:

1. En propiedades de la tabla, marca la opción Leyenda.

   

2. En el nuevo espacio que se ha creado bajo la tabla, añade el título.
   

Por último, intenta que las tablas sean lo más secillas posible. En las tablas de datos complejas, especifica un breve resumen de las características de la tabla. Hazlo añadiendo un párrafo antes de la tabla.

Listas

Es muy importante identificar qué son listas y qué no. Siempre que haya un conjunto de ítems relacionados entre sí debemos marcarlo como una lista, evitando darle formato mediante guiones o similar. Por otro lado, no se deben emplear listas con fines únicamente de presentación, por ejemplo, para dar sangría al texto. De esta manera, las usuarias de lectores de pantalla podrán navegar por el contenido de una manera estructurada y más cómoda.

Los lectores de pantalla pueden reconocer una lista e informar a los usuarios de su presencia y del número de elementos que la componen. Si no identificas correctamente las listas, no reconocerán dónde empieza, no sabrán los elementos que la componen, ni sabrán dónde termina. Y si identificas una lista que no lo es, se saltarán información importante o en general, será confuso el contenido de la página.

Por tanto, siempre que haya una lista, utiliza las opciones del editor para ello.

Ten en cuenta también que la lista puede ser numerada o no numerada en función de si el orden de los elementos es importante.

Para crear listas anidadas con subniveles, posiciona el cursor en el item que quieres convertir en subnivel y pulsa la tecla Tabulador o Tab. Para pasar de subnivel a un nivel superior, manten pulsada la techa Mayúsculas o Mayús y pulsa Tabulador.

Párrafo y estilo del texto

De la misma manera que todos los demás elementos que se han ido mencionando, los párrafos de texto plano deben tener asignado el formato Párrafo. Además, todos los párrafos deben de tener contenido, es decir, no es aconsejable añadir párrafos en blanco mediante la tecla Enter para generar separaciones en el texto.

Al texto de cada párrafo, se le pueden asignar diferentes estilos como cursiva o negrita. Esto debe hacerse a través de los botones habilitados para ello en el editor y no directamente en HTML, ya que los estilos siempre deben añadirse con clases CSS y no directamente, siempre que sea posible. Esto es necesario para mantener la separación entre el contenido (la información recogida en la página web) y la presentación (como se presenta visualmente la información). La ausencia de esta separación dificultaría, por un lado, el mantenimiento de la página; y por el otro, la modificación de los estilos por parte de las herramientas de apoyo.

Como habrás observado no existe el botón de subrayar texto ni de tachar texto. El primero no se aconseja porque está reservado a destacar enlaces y podría crear confusión si se utiliza en otros casos, y el segundo no se aconseja porque dificulta la lectura.

En cuanto a la alineación del texto, se ha suprimido la posibilidad de Justificar texto. Cuando a una persona le cuesta leer, es más sencillo para ella que las líneas de texto sean de distinto tamaño, por lo que se considera una opción poco accesible.

Respecto al tamaño del texto, el color y la fuente, tampoco es posible su edición porque, por ejemplo, puede introducir elementos menos accesibles como fuentes de texto no aconsejadas o colores sin el contraste suficiente. Además, los editores de texto introducen estos cambios directamente sin clases CSS eliminando la separación entre contenido y presentación. Y por último, permite mantener la homogeneidad de estilos en toda la web.

Algunos de los aspectos previamente comentados pueden ser ocasionados por el pegado de textos desde fuentes externas, tales como procesadores de textos comerciales o navegadores Web. Para evitar esto, se aconseja primero pegar el contenido en un editor de texto básico como el “Bloc de notas” y, a continuación, volver a copiarlo y pegarlo en la página web, de manera que se elimine cualquier formato previo y dejar únicamente en contenido textual.