Accesibilidad para personas con baja visión

Un vídeo que forma parte del curso idesweb.es:




TRANSCRIPCIÓN DEL AUDIO DEL VÍDEO

Hola, bienvenido al vídeo “HTML y CSS – Accesibilidad para personas con baja visión” del curso introducción al desarrollo web. Mi nombre es Cristina Ponce García y soy estudiante de Ingeniería Multimedia en la Universidad de Alicante.
En este vídeo te voy a dar algunos consejos para que tus páginas web sean accesibles a personas con baja visión.
Pero antes de empezar quiero explicarte los diferentes casos que vamos a considerar. Cuando hablamos de baja visión, normalmente pensamos en tres casos:
Miopía: personas con dificultad para ver de lejos.
Hipermetropía: personas con dificultad para ver de cerca.
Astigmatismo: personas con dificultad para enfocar.
Pero, existen otros muchos problemas de visión que son menos conocidos ya que no son tan comunes.
De todos los problemas existentes, en este vídeo nos centraremos en los casos de:
Visión periférica: como su nombre indica, son personas que solo ven por la periferia del campo visual.
Visión con reducción del campo visual: al contrario que la visión periférica, son personas que tienen su campo visual reducido por lo que no ven por la periferia.
Ahora que ya sabemos en qué consisten estos problemas, comenzaremos con los consejos.
Empezaremos por la visión general de una página e iremos poco a poco centrándonos en las cosas más específicas.
Empecemos con el caso del campo visual reducido.
Haremos una simulación de cómo vería una persona con este problema este ejemplo de página web.
Como se puede apreciar, una persona con este tipo de problema se perderá fácilmente a la hora de navegar por la página si no hay nada que le indique en ningún momento dónde se encuentra.
Añadir líneas entre las distintas partes de la página como la sección para registrarse o introducir cada imagen o noticia dentro de un recuadro puede ser una solución, pero la persona podrá seguir perdida si las secciones son muy amplias.
Si, además de las líneas, añadimos colores distintivos entre las diferentes secciones como pueden ser la cabecera, el pie de página o una sección de noticias la persona sabrá en todo momento en qué parte de la página se encuentra.
En el caso de una persona con visión periférica, el anterior ejemplo de página web se vería de la siguiente forma.
Como se puede apreciar, estas personas no tienen problema a la hora de situarse y navegar por la página web por lo que no será necesario realizar ningún tipo de cambio con respecto a la visualización general de la página.
Continuaremos hablando sobre qué tipo de fuentes y colores son mejores para estas personas.
Si buscamos en internet los tipos de letra más utilizados a la hora de desarrollar una página web obtendremos el siguiente listado.
Escogeremos las tres primeras opciones y las analizaremos.
Primero aclaremos la diferencia entre las fuentes serif y sans-serif. Como se puede apreciar, las fuentes serif son aquellas en las que sus letras tienen remates, al contrario que las sans-serif. En una página impresa la resolución de impresión es muy alta por lo que esos remates en los pies de las letras quedan muy bien definidos, pero en una pantalla de ordenador la tipografía con "serif" produce efectos en las letras que hacen dificultosa su lectura. Por ello se debe evitar su uso en los estilos de la página web que no sean para impresión.
Veamos entre las dos tipografías que quedan cuál es más apropiada.
Centrándonos en las personas con visión periférica, ya que las personas con campo visual reducido no tendrían problemas a la hora de leer una línea, como podemos observar, en los dos ejemplos la persona tiene centrada la vista en la palabra “de”, se puede apreciar que en el segundo caso, al ser las letras más gruesas y, por lo tanto, estar más separadas unas de otras, la pérdida de la percepción de letras es menor, por lo que podemos determinar que es más accesible.
En el caso de textos largos, el segundo ejemplo puede resultar pesado cuando se lleva mucho tiempo leyendo, por lo que utilizaremos el primer tipo de letra para párrafos y el segundo para títulos.
Para ayudar a las personas con baja visión a la correcta lectura de estos párrafos debemos tener en cuenta que, como hemos visto anteriormente, la percepción de las letras es difícil si estas se encuentran muy juntas, por lo que es recomendable añadir un pequeño espacio entre ellas con la propiedad para textos de letter-spacing de CSS.
Además, las personas con visión periférica, tienen problemas a la hora de cambiar de línea ya que, como no ven por el centro, es común que se salten líneas si estas están muy juntas. Por ello, es recomendable utilizar line-height en CSS para añadir un interlineado mayor a los párrafos.
En cuanto a los colores de texto y fondo, es importante que exista un alto contraste entre ambos para que el texto sea legible. También es importante tener en cuenta que hay personas sensibles a la luz, por lo que es recomendable no abusar de los fondos claros en partes de la web donde haya mucho texto, en vez de estos, se puede aplicar un fondo gris clarito que no dificulte la lectura del texto, pero que no canse la vista de estas personas.
Terminaremos hablando de los formularios.
Ya que los campos de los formularios pueden causar algunas dificultades a la hora de clicar sobre ellos, no debemos olvidar utilizar la etiqueta de HTML label para hacer más sencilla la accesibilidad a la hora de rellenar los campos. Además, es aconsejable que los botones que creemos, no sean demasiado pequeños para que las personas con dificultades puedan acceder a ellos de forma fácil.
Estos son los consejos que recomiendo que apliques en tus páginas web, no olvides nunca tener en cuenta a personas con discapacidad a la hora de crearlas.
Espero que te haya sido de ayuda este vídeo.