Tercera parte del Curso de Introducción a la Accesibilidad Web, esta parte trata el tema de la evaluación, tanto automática (a través de herramientas como TAW, HERA, eXaminator), como manual. Finaliza el curso con un pequeño plus, acerca de algunas ideas para mejorar la usabilidad en un sitio web y cómo hacer una evaluación heurística.

1. Curso-Taller
Introducción a la Accesibilidad y
Usabilidad Web
Mario Carvajal
Diciembre 2008

2. Módulo 3 /
Evaluación de la Accesibilidad Web
“Usa las herramientas automáticas
y evalúa manualmente”

3. Evaluación
Evaluación automática
Gracias a la labor de diferentes
organismos comprometidos con la
accesibilidad web, como la
Fundación SIDAR, la Fundación
CTIC, Accesible Consultores, entre
otros, podemos los webmásters
evaluar automáticamente la
01
accesibilidad de nuestras páginas
web.

4. Evaluación
TAW
Test de Accesibilidad Web
www.tawdis.net

5. Evaluación
Cómo funciona TAW

6. Evaluación
El informe de accesibilidad de TAW

7. Evaluación
Los logotipos de TAW

8. Evaluación
HERA
Hojas de Estilo para la Revisión de la Accesibilidad
www.sidar.org/hera

9. Evaluación
Cómo funciona HERA

10. Evaluación
Informe de resultados de HERA

11. Evaluación
Navegación por resultados

12. Evaluación
Navegación por resultados

13. Evaluación
Navegación por directrices

14. Evaluación
El logotipo de HERA

15. Evaluación
eXaminator
y el índice web@x
www.accesible.com.ar/examinator

16. Evaluación
Cómo funciona eXaminator

17. Evaluación
Resultados de eXaminator

18. Evaluación
El informe analítico de accesibilidad

19. Evaluación
¡A trabajar!
Evaluando automáticamente TallerNº 22
un sitio conocido
• Selecciona dos páginas web internas de www.elpais.com.co
• Evalúa automáticamente con estas tres herramientas:
– TAW
– HERA
– eXaminator
• ¿Qué diferencias encontraste en cada evaluación?
• EXTRA: ¡Evalúa con la versión BETA de TAW, que se basa en las
directrices WCAG 2.0!

20. Evaluación
Evaluación manual
La accesibilidad web no se
evaúa únicamente de forma
automática. Es necesario
siempre realizar
manualmente evaluaciones
sobre aquellos puntos
imposibles de automatizar.
02

21. Evaluación
¡A trabajar!
Evaluando manualmente TallerNº 23
un sitio conocido
• Toma las mismas páginas seleccionadas para el Taller Nº22.
• Revisa en la evaluación automática con TAW, HERA y
eXaminator qué aspectos no pudieron ser revisados
automáticamente.
• Punto por punto, examina de forma manual y dictamina si se
considera un error o no.

22. Módulo 4 /
Usabilidad en la Web
“Algunos conceptos que todo
webmáster debe conocer”

23. Usabilidad
Tipografía
El tratamiento tipográfico para la
Web es diferente al tradicional
para impresos.
01

24. Usabilidad
Tamaño tipográfico
Utilice en la hoja de estilos únicamente medidas
relativas, como em, para asignar tamaño a los
textos.

25. Usabilidad
Alineación de párrafos
Utilice para los párrafos de prosa alineación al
margen izquierdo y evite el uso de alineación
justificada.

26. Usabilidad

27. Usabilidad
Tamaño tipográfico y retícula
Asigne medidas en em para el ancho y el alto de
las cajas de composición de la retícula.

28. Usabilidad

29. Usabilidad

30. Usabilidad
Fuentes tipográficas comunes
Asigne únicamente fuentes tipográficas
comunes en la hoja de estilo para todos los
textos.

31. Usabilidad

32. Usabilidad
Renglones de tamaño medio
Diseñe el texto de prosa para renglones de
tamaño medio 60-80 cpl (caracteres por línea).

33. Usabilidad

34. Usabilidad

35. Usabilidad

36. Usabilidad
Imágenes
Además de textos, los sitios web
transmiten en gran parte su
información gracias a las
imágenes.
02

37. Usabilidad
Pie de foto
Diseñe un estilo para los textos explicativos que
sirvan como pie de foto.

38. Usabilidad

39. Usabilidad
Imágenes como textos
Evite el uso de textos falsos, es decir, imágenes
como textos.

40. Usabilidad

41. Usabilidad

42. Usabilidad
Favicon
Diseñe el icono de favoritos, conocido
comúnmente como favicon.

43. Usabilidad

44. Usabilidad
Audio
El diseñador de interfaz deberá
tener en cuenta que el audio para
la web tiene un tratamiento que
debe cumplir con criterios de
usabilidad, que muy
frecuentemente no son en
tenidos cuenta.
03

45. Usabilidad
Botones con sonido
Evite programar botones con sonido.

46. Usabilidad

47. Usabilidad
Sonido de fondo
Evite usar sonidos de fondo.

48. Usabilidad

49. Usabilidad
Estándares
Asumir los estándares
web, emitidos por el Consorcio
W3C, generará para todos los
proyectos actuales, continuidad
en el futuro.
04

50. Usabilidad
Estándares del W3C
Use los estándares de la W3C: XHTML para el
contenido y CSS para la presentación.

51. Usabilidad

52. Usabilidad
Doctype
Declare el DOCTYPE o tipo de documento en
cada una de las páginas web del sitio.

53. Usabilidad

54. Usabilidad
Convenciones web
Haga uso de las convenciones web.

55. Usabilidad

56. Usabilidad

57. Usabilidad

58. Usabilidad

59. Usabilidad
Independencia de dispositivo
Diseñe con independencia de dispositivo.

60. Usabilidad

61. Usabilidad
Hojas de estilo para impresión
Desarrolle páginas que puedan imprimirse
correctamente, usando hojas de estilo para
impresión.

62. Usabilidad

63. Usabilidad
Hipervínculos y navegación
La web está constituida
esencialmente por hipervínculos.
Del buen tratamiento que se les
dé, dependerá el éxito de la
navegación de los usuarios y una
muy buena parte de la usabilidad
del sitio.
05

64. Usabilidad
Falsos hipervínculos
Evite diseñar señales engañosas de hacer clic.

65. Usabilidad

66. Usabilidad
Estado de hipervínculos
Realice un diseño diferencial para todos los
estados de hipervínculos.

67. Usabilidad

68. Usabilidad
Ubicación del usuario
Proporcione información sobre la ubicación del
usuario a través de variaciones tipográficas o
recursos gráficos.

69. Usabilidad

70. Usabilidad
Hipervínculo a la página de inicio
Habilite el acceso a la página de inicio, mediante
hipervínculo en el logotipo y con un vínculo de
texto rotulado como “inicio”.

71. Usabilidad

72. Usabilidad
Salto de bloques repetitivos
Habilite la posibilidad de saltar vínculos de
navegación repetitivos.

73. Usabilidad

74. Usabilidad
Interacción
Los usuarios no únicamente
leen, también interactúan con la
interfaz, por ello es importante
tener en cuenta las siguientes
recomendaciones, para hacer una
web más fácil de usar. 06

75. Usabilidad
Longitud del cuadro de
búsqueda
Diseñe el cuadro de búsqueda para un máximo
de 30 caracteres.

76. Usabilidad

77. Usabilidad
Diseño GUI personalizado
Evite incluir en la página, elementos de Interfaz
Gráfica de Usuario (GUI) rediseñados y
personalizados.

78. Usabilidad

79. Usabilidad
Posicionamiento
El posicionamiento orgánico en
motores de búsqueda, SEO, debe
empezar desde la misma
arquitectura de información de un
sitio, seguir con el diseño de interfaz
y codificación, y por supuesto en la
escritura de contenidos.
07

80. Usabilidad
URL complejos
Habilite un sistema de URL inteligentes para
cada página web: cortas y significativas.

81. Usabilidad

82. Usabilidad
Titulo de la ventana
Asigne el título de la página web al título de la
ventana y asegúrese que este título sea el
encabezado de primer nivel

83. Usabilidad

84. Usabilidad
Mapa del sitio dinámico
Programe un mapa de sitio dinámico en XML y
regístrelo en las herramientas de webmáster de
Google.

85. Usabilidad

86. Usabilidad
Bibliografía imprescindible
Además de Internet, podemos
encontrar mucha información en
varios libros sobre el tema de
usabilidad. Aquí te mostraremos
algunos de ellos.
08

87. Usabilidad

88. Usabilidad

89. Módulo 5 /
Evaluación heurística de la Usabilidad
“Realiza pruebas de usabilidad
como un experto”

90. Heurísticas
Qué es una evaluación heurística
La evaluación heurística o
evaluación del experto es una
manera muy rápida, eficaz y
económica de descubrir los errores
de usabilidad de un sitio web.
01

91. Fin del curso
¡Muchas gracias!
Sí, gracias por hacer un mundo más
accesible, usable, más cálido y agradable
para tus semejantes, hermanos en la
vida.

92. Más info…
Mario Carvajal
mario@astrolabio.com.co
Skype: astromario
MSN: astromario@hotmail.com
Tel: +57 (1) 341948
Cel: +57 (315) 4109020
Bogotá, Colombia

93. www.astrolabio.com.co