Disseño Web Accesible

Es habitual que cuando hablemos de páginas web accesibles lo primero que nos venga a la cabeza sea una persona con una discapacidad visible frente a un ordenador; Pues esto no es así.

Seguramente, todo usuario de dispositivos con conexión a internet necesitará al menos una vez en su vida el acceso a páginas web accesibles.

Pero, ¿cómo debe estar diseñada una página web para que sea accesible para todos? En este post encontrará las pautas más importantes y necesarias que debe seguir un sitio web para conseguirlo.

 

¿A quién beneficia la accesibilidad web?

 

- Usuarios con discapacidad

- Usuarios inexpertos

- Usuarios de equipos reducidos

- Usuarios con equipos anticuados

- Usuarios que no dominan el idioma

- Usuarios con lesiones temporales

- Personas Mayores

 

Pautas más importantes para un Diseño web Accesible

 

 

 

Estructura y legibilidad del contenido de la página

Para garantizar la buena legibilidad y funcionalidad de la página todos los elementos deben ser accesibles mediante el teclado, el orden visual de los elementos del sitio web debe ser igual que el orden de lectura y el tamaño del texto debería ser más grande de 10pt, aunque esto puede variar dependiendo del tipo de fuente utilizada. Para las listas o secciones de enlaces se utilizarán siempre las etiquetas ol/ul y le. Es importante informar al usuario sobre su ubicación dentro del sitio web mediante un breadcump y debe haber siempre un enlace al contenido principal situado en la parte superior de la página

En cuanto a la estructura de los elementos, los encabezados deben utilizarse de manera correcta, respetando el número del encabezado (h1,h2,h3,h4,h5,h6) y aplicarlo en el orden que corresponde , Título, Subtítulo, Sub-sub título, etc. La línea de cada párrafo no debe ser ni demasiado larga ni demasiado corta, ya que esto dificulta mucho la lectura, y para garantizarlo se debe hacer uso de listas y tener una estructura consistente así como no utilizar letras mayúsculas en exceso . Las marquesinas, deslizadores, etc. Pueden afectar mucho a la lectura de según qué usuarios. Es importante asegurarse de que éste tenga suficiente tiempo para poder leer correctamente el contenido.

 

Contraste de los colores

Debe haber un buen contraste entre el color del fondo y el color del texto. Sobre todo hay que tener cuidado con el uso de los grises más claros, el naranja y el amarillo. Recomendamos esta herramienta para comprobar el contraste entre el texto y el fondo http://webaim.org/resources/contrastchecker/

 

Utilitzar texto, no imagenes

Utilizar texto en lugar de imágenes ayuda a que la página se cargue más rápido, además se puede leer sin problemas desde dispositivos utilizados por personas con discapacidades y se puede traducir más fácilmente.

El texto debe poder aumentarse sin perder contenido o funcionalidad al menos hasta el 200%.

.

 

Texto Alternativo, Subtítulos y contenido parpadeante

Todos los elementos visuales de la web deben contener un Texto alternativo que debe describir textualmente lo que se ve en la imagen.

En el caso de elementos sonoros o videos deberá proporcionarse la opción de subtítulos sincronizados directamente, Una transcripción no es suficiente. Además se debe dar la posibilidad al usuario de controlarlos, con botones de Pausa y Play así el usuario podrá parar el contenido y volver a empezarlo desde donde lo ha pausado.

Los elementos parpadeantes deben tener una duración máxima de 3 segundos y además deben poder pararse o desactivarse al actualizar la página.

Ejemplo

Text alternatiu Correcte - "Una pareja corriente por un camino"

 

Enlaces 

Los enlaces deben estar diferenciados del resto del texto, y preferiblemente no sólo con el color, sino otros recursos como el subrayado.

Los usuarios de teclados y otros dispositivos con funciones similares deben poder identificar un enlace visualmente. Puede utilizar líneas de puntos o cualquier otro código de color.

Evitar los tópicos en los enlaces tales como “haz clic aquí”, “Continuar”, “Ver más”, ya que pueden generar confusión. Los textos enlazados deben ser una descripción de la página a la que se dirige este enlace.

Ejemplo:

X - En el blog de TOTHOMweb encontrará un post sobre el Diseño web accesible – Ver más

V – Al blog de TOTHOMweb hi trobareu un post sobre el Disseny web accessible

 

Beneficios del Disseño Accesible

Mejora en la indexación de los buscadores debido a la correcta utilización del código y de las normas de accesibilidad.

- Incrementación por tanto de la cuota de mercado y la audiencia

- Aumento de la usabilidad para todos los usuarios que conlleva un aumento del público objetivo

- Evidencia del cumplimiento de la ley

- Reducción de costes a largo plazo

- Mejora del acceso desde distintos dispositivos.

- Responsabilidad corporativa

- Simplificación del desarrollo y el mantenimiento

- Cumplimiento de los estándares web y por tanto garantía de una visibilidad correcta desde cualquier dispositivo

- Reducción del tiempo de carga de la página web y el servidor

- Refuerzo de la imagen empresarial y valor para diferenciarse de la competencia