Desarrollar interfaces web accesibles.

Diseño de interfaces web

Actividad
Desarrollar interfaces web accesibles

Objetivos
• Desarrollar webs accesibles según las WCAG
• Utilizar herramientas para el análisis de la accesibilidad web.
• Analizar la usabilidad.

Pág. 2 de 4
1. Crea una página web que cumpla con las pautas de accesibilidad. No te olvides de utilizar
etiquetas semánticas para estructurar la información correctamente y utiliza atributos para
mejorar la accesibilidad.
La página deberá contener, como mínimo:
1.1. Una menú con opciones.
1.2. Tres imágenes de productos en horizontal con su descripción “escondida” que se mostrará al
desplegar el “Más”.
1.3. Un Formulario de registro.
1.4. Comentarios sobre los productos.
1.5. Valida la página anterior a nivel AA con una aplicación de las que se han visto en clase.
1.6. Modifica la página para que, cuando la ventana del navegador tenga una anchura menor a
900px, se muestren las tres imágenes una debajo de la otra.

Ejemplo en la carpeta Ejemplo_act1_ej1.

2. Evalúa si la página web de www.aliexpress.com cumple con las diez pautas heurísticas
propuestas por Jackob Nielsen

1. Visibilidad del estado del sistema: Al cargar la web se muestra una rueda de espera pero no informa
claramente de lo que se va a mostrar.
2. Correspondencia entre la interfaz y el mundo real: aunque en la página inicial los nombres de las
secciones y productos están correctamente traducidos, cuando accedemos a un producto la información
es difícilmente comprensible.
3. El control del usuario y su libertad: podemos fácilmente eliminar elementos del carrito de la compra,
pero una vez eliminados no podemos “deshacer” la acción.
4. Consistencia y estándares: cuando dejamos de ver los productos en la interfaz general y entramos en
una tienda, la interfaz cambia bastante. El cambio se produce sin indicarlo al usuario y puede producir
confusión.
5. Prevención de errores: es correcto que cuando intentamos comprar un producto que no está disponible
automáticamente se deshabilite la opción pero no deberíamos poder añadir un elemento a la cesta si
no está disponible o no se puede entregar en el país seleccionado.
6. Reconocer antes que recordar: durante el proceso de “checkout” no se muestran los datos del pedido.
7. Flexibilidad y eficiencia de uso: En este caso no se facilitan atajos a ninguna sección.
8. Diseño minimalista: Aparecen imágenes relacionadas con el tema que presentan y los nombres de las
secciones y opciones son cortos y explicativos.

Pág. 3 de 4
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores: En algunas ocasiones en
los formularios los errores se muestran en inglés.
10. Ayuda y documentación: aunque en la página inicial se ofrecen ayudas sobre métodos de envío, pagos
y una guía para nuevos usuarios, cuando accedemos a ellas vemos opciones cortadas o a medio traducir:

Pág. 4 de 4