Hola, soy Ester Serna Berná, trabajo como desarrolladora web y consultora en accesibilidad en el Taller Digital de la Universidad de Alicante, y en la primera parte de este vídeo sobre discapacidad en la web, que forma parte del curso “Introducción al desarrollo web”, te voy a presentar los diferentes tipos de discapacidad, las barreras de acceso que tú como desarrollador web puedes evitar y los productos de apoyo y estrategias que utilizan las personas con discapacidad visual para interactuar con nuestros sitios web.

Antes de dar paso a la presentación, puedes contactar conmigo a través de mi correo electrónico esterser@gmail.com, a través de mi cuenta en Twitter @estersernaberna o a través de mi perfil en Linkedin. Además, puedes visitar el sitio web donde trabajo actualmente, www.eltallerdigital.com
, y del que soy responsable del mantenimiento de la marca AENOR N en accesibilidad TIC, que asegura el cumplimiento de la Norma UNE 139803 Requisitos de accesibilidad para contenidos Web.

Vamos a empezar esta presentación definiendo ¿qué es discapacidad en accesibilidad web? El término discapacidad en accesibilidad web no sólo hace referencia a aquellas discapacidades relacionadas con la salud, sino además a las relacionadas con el envejecimiento y a las limitaciones derivadas del entorno por situaciones desfavorables. Nos encontramos, por tanto, con discapacidades visuales, auditivas, motrices, neurológicas o cognitivas, discapacidades derivadas del envejecimiento y derivadas del entorno. Vamos a ir detallando para cada una de ellas las barreras con las que se encuentran estos usuarios y los productos de apoyo que utilizan para acceder a la web. En la primera parte de este vídeo se desarrolla únicamente la discapacidad visual.

Dentro de las discapacidades visuales nos encontramos con la ceguera, la baja visión y el daltonismo. Vamos a ver en detalle las barreras de acceso con las que se encuentran las personas con ceguera. Las barreras que impiden el acceso a las personas ciegas son: la inclusión de imágenes sin un texto alternativo que describa su contenido. Comentarios: las personas ciegas usan lectores de pantalla para acceder a los contenidos de la web y éstos no pueden leer la información de una imagen si nosotros, como desarrolladores web, no nos preocupamos de incorporarla. Lo mismo ocurre con la inclusión de imágenes complejas, como gráficos de barras o estadísticas, sin una descripción detallada.

Por ejemplo, queremos incluir en nuestro sitio web esta imagen, que muestra el número de empleados públicos por comunidades. Al tratarse de una imagen compleja, ya que el contenido mostrado a través de la misma no puede proporcionarse como alternativa textual porque superaríamos los 150 caracteres, hemos de incluir por un lado un texto alternativo que la describa (“Número de empleados públicos por comunidades”) y, además, proporcionar en otra ubicación el contenido relevante que se muestra a través de la misma.

Otra de las barreras que impiden el acceso a las personas ciegas es la inclusión de elementos multimedia (vídeos, animaciones, …) sin descripción textual o sonora y la inclusión de tablas cuyo contenido resulta incomprensible cuando se lee de forma secuencial. ¿Qué significa esto? Imaginaros que tenemos que programar en HTML esta tabla. Si no definimos correctamente los encabezados y relacionamos las celdas con sus encabezados, un lector de pantalla leerá: “Mes, España, Méjico, Estados Unidos, etc.” a continuación 10, 0, 15, etc., por lo que es imposible que la persona que está accediendo, a través del lector de pantalla, a este contenido pueda comprenderlo.

En cambio, si dotamos a la tabla de todos sus elementos (título, resumen) y definimos los niveles de encabezado y relacionamos las celdas con sus encabezados correspondientes, el lector de pantalla ahora leerá: “España, Hablan español, Enero = 10; España, no hablan español, Enero = 0; etc.”, siendo de esta forma su contenido accesible para todos los usuarios.

Otra de las barreras con la que se encuentra este colectivo de usuarios es la falta de independencia de dispositivo; la web ha de ser igualmente funcional cuando no se utilice el ratón. También puede provocar otra barrera, el uso de otros formatos de documentos, como puedan ser los documentos PDF no accesibles.

Las personas ciegas usan diferentes productos de apoyo para acceder a la web. Los productos de apoyo son dispositivos hardware y/o software para facilitar el acceso a los contenidos de la web. A continuación se detallan algunos de los productos de apoyo y estrategias empleadas por las personas afectadas por este tipo de discapacidad: los lectores de pantalla, son aplicaciones que leen el texto de la pantalla y lo transmiten mediante un sintetizador de voz (vía auditiva) o bien lo envían a una línea braille para que el usuario lo pueda leer con los dedos.

Los navegadores de voz son navegadores que leen el contenido de las páginas web con un sintetizador de voz incorporado. Son una alternativa a la combinación de un navegador convencional y un lector de pantalla. Por último, y más que de un producto de apoyo se trata de una estrategia de interacción, es el uso del teclado como dispositivo de entrada. Mediante el teclado utilizan el tabulador para recorrer los enlaces y controles de formulario o las teclas de acceso rápido para ir a una zona determinada del contenido directamente, en vez de secuencialmente. Es por ello que el texto de los enlaces ha de ser lo más significativo posible. Por tanto, no debemos nunca usar enlaces del tipo “Pinche aquí” o “Siga este enlace”.

La siguiente discapacidad visual, la baja visión, supone una incapacidad en la función visual. Sin embargo, las personas con baja visión tienen una capacidad visual suficiente para la planificación y ejecución de tareas. Existen muchos tipos de baja visión, como la falta de agudeza visual (visión poco nítida), distrofia macular (sólo se ve una parte reducida del campo visual) o la visión borrosa. Me siento muy identificada con este colectivo cuando navego con un portátil al encontrarme con muchas de las barreras de acceso que se detallan a continuación. Es por ello que, si bien la accesibilidad web nació pensando en las personas con algún tipo de discapacidad, todos nos beneficiamos de ella.

Dentro de las barreras que impiden el acceso a las personas con baja visión nos encontramos con tamaños de letra definidos a través de las hojas de estilo con medidas absolutas que no permiten redefinirlo. El valor de la propiedad font-size se puede expresar en unidades de longitud y unidades porcentuales. Dentro de las unidades de longitud, las unidades absolutas son las que no debemos utilizar. Mi recomendación es que uséis em. Para que veáis la correspondencia entre las diferentes medidas, 12 puntos equivaldrían a 16 píxeles, a 1 em y a 100% en unidad porcentual. Yo suelo utilizar una calculadora online para pasar de píxeles a em, que se llama EM Calculator.

Otra de las barreras que impiden el acceso es el diseño de páginas que, al modificar el tamaño de la fuente, estropea la maquetación y hace difícil la navegación. Por ejemplo, la página web de la Universidad Miguel Hernández presenta este aspecto cuando ampliamos el tamaño de la letra: podemos observar que no es posible leer las opciones del menú principal, se montan unas zonas con otras y se entorpece la lectura. Se crea una barrera cuando existe poco contraste en las imágenes o texto y texto añadido mediante imágenes que dificulta su lectura al aumentar el tamaño.

Las personas con baja visión usan como productos de apoyo las pantallas grandes y los ampliadores de pantalla. Además, utilizan combinaciones específicas de colores de texto y fondo propias; por tanto, es muy importante que los desarrolladores web separemos los estilos de la estructura y contenidos del documento y definamos tipos de letra para nuestros contenidos más legibles.

El daltonismo, otra de las discapacidades visuales, es una alteración congénita que dificulta la percepción de ciertos colores. Las formas más comunes de daltonismo son la dificultad para distinguir entre rojo y verde o entre amarillo y azul.

Las barreras que impiden el acceso a personas con daltonismo son: uso del color para resaltar texto sin usar otro elemento de formato adicional (como cursiva, negrita o subrayado). Por ejemplo, si dentro de un párrafo queremos destacar una palabra en rojo para darle mayor importancia, tendremos además que proporcionarle un marcado adicional. En el caso de la palabra ejemplo se ha marcado como negrita usando la etiqueta strong.

En el caso de los formularios, si nos basamos únicamente en el color y tenemos alguna dificultad para poder ver el color rojo por disponer de una pantalla monocromo, por ejemplo, veremos el formulario de la siguiente forma: no sabríamos qué campos son los obligatorios y, por la simple mala experiencia en el uso, nuestros usuarios podrían abandonar el registro y perder así clientes potenciales. Otra de las barreras es el contraste insuficiente en las imágenes con texto o entre el texto y el color de fondo de la página, y los navegadores que no soportan el uso de hojas de estilo definidas por el usuario.

Las personas con daltonismo utilizan sus propias hojas de estilo para modificar los colores de las fuentes y del fondo de las páginas, en vez de usar los definidos por el diseñador. Por tanto, es muy importante no incluir estilos en línea y utilizar una hoja de estilos para definirlos, separando así presentación, estructura y contenido.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web”, que está disponible en la dirección idesweb.es. Muchas gracias por vuestra atención.