Accesibilidad y Usabilidad Web

Mayo 2011

2

¿Quiénes usan la web?

• Personas:• Con computadoras de bajos recursos tecnológicos,

que no poseen un mouse, parlantes o un teclado. • Con dispositivos no convencionales como PDAs,

Teléfonos móviles, webTV, etc. • Ciegas o con dificultades visuales como baja visión• Con problemas motrices o que han sufrido un

accidente temporal. • Con software muy moderno o muy antiguo

(navegadores)

¿Qué es la Accesibilidad Web?

• La posibilidad de que un producto o servicio web pueda ser accedido y usado por el mayor número posible de personas, indiferentemente de las limitaciones propias del individuo o de las derivadas del contexto de uso.– Reducción del costo y tiempo de mantenimiento– Reducción de carga del sitio– Mejora en la Usabilidad = Mayor satisfacción en los usuarios– Cumplimiento con los estándares web W3C– Preparado para tecnologías avanzadas– Visibilidad en todos los dispositivos

• Beneficio: Egoísta– ¿A caso creen que nunca tendrán algún problema visual, auditivo o

físicos en algún momento?– ¿Creen que siempre tendrán todos los recursos esenciales de acceso?– ¿No les gustaría navegar la web desde su móvil sin problemas?

¿Qué es la Usabilidad Web?

• Cuando nos referimos específicamente a un sitio Web o sistema usable, nos interesa que sea:– Amigable con el usuario– Fácil de usar– Fácil de aprender

• Principios:– Legibilidad; el color de los textos debe contrastar con el del fondo, y el

tamaño de fuente debe ser adecuado.– Interfaz visible. Se deben evitar elementos invisibles de navegación

que han de ser inferidos por los usuarios, como los menús desplegables o indicaciones ocultas.

– Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio Web y no sabe donde comenzar a leer, existe sobrecarga de información.

Usabilidad y accesibilidad: errores más comunes• Cosas subrayadas que no son enlaces: Todo el mundo sabe que el texto

que está subrayado o es de un color diferente, es probable que sea un enlace.

• La utilización de texto justificado: El texto justificado puede lucir limpio a la vista, pero puede generar algunos problemas de legibilidad real, especialmente para los usuarios disléxicos que pueden encontrarlo molesto para identificar palabras debido a la separación desigual de los párrafos justificados.

• Poner imágenes de bullets justificados a la derecha:

Usabilidad y accesibilidad: errores más comunes• Fondos con degradado a tamaño fijo: La velocidad de carga de una página

depende del número de elementos visuales empleados.

Usabilidad y accesibilidad: errores más comunes• Brindar contenidos accesibles no solo para los usuarios sino para los

navegadores.• Diseños

– Amigable con el usuario– Fácil de usar

Mejorar la velocidad de carga de las paginas de ww.uv.mx/

Reutilización y estandarización visual

• Reutilizar, estilos, diseños y colores ayudan a estandarizar la imagen de las páginas .

• Planear los próximos diseños orientados a Wordpress.

Brindar contenidos accesibles no solo para los usuarios sino para los navegadores.

Diseño fijo o fluido

• Diseño fijo (Fixed Width): El diseño fijo, es aquel que como su nombre indica nos aporta el tamaño de nuestra estructura en unas medidas inalterables por nuestro navegador. – Gente con monitores más pequeños que el ancho definido tienen

problemas con la página. – Gente con monitores más grandes ven los diseños fijos muy pequeños.

• Diseños fluidos o Líquidos (Fluid or Liquid Layout): creados para no tener un tamaño definido, y permitir que los monitores pueden condicionar el tamaño de salida. Usando porcentajes (%) podremos definir el tamaños de los elementos de nuestra aplicación web para definir un diseño fluido que se adapte a cualquier monitor. – El diseño fluido es considerado el más purista.– Más contenido puede ser mostrado sin necesidad de scroll.

Diseño fijohttp://www.uv.mx/

http://www.uv.mx/

Diseños fluidoshttp://shiflett.org/

Diseños fluidos http://www.cam.ac.uk/

Diseños fluidoshttp://www.etnikastudio.com/