Presentado originalmente el martes 12 de junio de 2012, en la 5ta. Jornada "Por una Web Sin Barreras para las Personas con Discapacidad", http://www.isoc.org.ar/proyectos/jornada5.html Actualizado el 8 de agosto de 2013 para presentación en el curso "Especialización en Diseño de interacción con estándares de accesibilidad y usabilidad" del INSPT - Universidad Tecnológica Nacional.

1. PROYECTO
MAPOTECA
PARA EDUC.AR
Manuel Razzari
Junio 12, 2012
Agosto 8, 2013

2. SUMARIO
Contexto del proyecto
Cosas que salieron bien
Otras que salieron mal
Técnicas y herramientas
Cómo lo encaramos

3. CON VISTA AL MAR
Un estudio de diseño y desarrollo de interfaces
web que trabaja con estándares web,
usabilidad y accesibilidad.

4. MAPOTECA.EDUC.AR
Aplicación web para que estudiantes interactúen
con mapas escolares. A ser instalada en las
3 millones de netbooks de Conectar Igualdad.

5. Página principal

6. Mapa

7. Zoom con tiles

8. Superponer capas

9. Dibujar, imprimir o descargar
lo dibujado

10. Actividades didácticas

11. Actividad con metadatos

12. LIMITES DE UN ESTUDIO WEB
No hay especialistas
Tiempos cortos
Costos por hora
Otras prioridades
Sin control punta a punta

13. ACCESO UNIVERSAL
Icono IE por http://fav.me/dlx6z0
HTML5…
¿SVG?
¿¡Canvas!?

14. Ancho de banda
Congestión,
concurrencia
Fuera de Cap.Fed.
Offline!
ACCESO UNIVERSAL
Foto por @joseallona a bordo del 152 http://instagr.am/p/LwHiiTF_02/

15. ALGUNAS COSAS
SALIERON BIEN

16. ¡DESDE EL VAMOS!
El “antes y después”
La accesibilidad incorporada desde el comienzo,
transversal al trabajo de cada miembro del equipo.
No una “revisión sorpresa” al final.

17. NAVEGACIÓN POR TECLADO
Todos es navegable y activable por teclado.
Interactivos: menúes desplegables, sliders
Ayudar al foco mediante JS.
Foco más visible

18. SALTEAR REDUNDANCIAS
http://john.foliot.ca/aria-hidden/

19. ARIA LANDMARK ROLES
banner
main complementary
navigation search
contentinfo
http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/

20. INDICAR DESPLEGABLES
La forma “correcta”
La infinita especificación de WAI ARIA para menúes desplegables: http://www.w3.org/WAI/PF/aria-practices/#menu

21. INDICAR DESPLEGABLES
La forma fácil
Lo más sencillo: usar un componente que use ARIA, como http://yuilibrary.com/yui/docs/node-menunav/

22. INDICAR DESPLEGABLES
No tan correcto... ¡pero realista!
<a aria-expanded="false"
aria-controls="menu-1">Menú</a>
<ul id="menu-1">
<li>...</li>
<li>...</li>
</ul>
Ya tenemos el menú hecho y nos olvidamos de ARIA, ¿cómo lo emparchamos? www.marcozehe.de/?p=218

23. ALGUNAS COSAS
NO SALIERON
TAN BIEN

24. TEXTO ALTERNATIVO
Confusión @alt y
epígrafe.
Alt con nombre de
imagen “bioma jujuy
06”.
Errores de tipeo.
¡Se los capacitó!

25. Sin alteración Deuteranomalia (6% hombres)
Protanopia (1% hombres) Deuteranopia (1% hombres)Protanopia (1% hombres)Protanopia (1% hombres)
PROBLEMAS DE COLOR
http://en.wikipedia.org/wiki/Color_blindness

26. PROBLEMAS DE COLOR
http://vischeck.com/

27. EL TRACKPAD
Dibujar con trackpad
no resulta tan fácil.
http://flic.kr/p/bDXYK7

28. “Observen el mapa y anoten las coordenadas...”
“Observen las siguientes imágenes de paisajes
áridos. Identifiquen el factor erosivo...”
ACTIVIDADES VISUALES

29. ¿QUIÉN QUEDA AFUERA?
Dibujar require
puntero.
Ver los mapas
requiere... ver.
@longdesc
imposible
Falta info al
respecto.

30. MAPAS INTERACTIVOS
Paneo
Zoom
Dibujo
Capas
“Accesibilidad de mapas = navegación por teclado”

31. MAPAS INTERACTIVOS
http://www.alistapart.com/articles/takecontrolofyourmaps/
Servidor de mapas
Caché de mosaicos
Cliente visualizador
Datos geo-espaciales

32. MOSAICOS DE MAPAS
¡Texto como imágenes!

33. MAPAS TÁCTILES
Atlas for the blind, 1837.
http://www.davidrumsey.com/blog/2012/5/21/atlas-for-the-blind-1837

34. MAPAS EN iOS6
¡Un nuevo comienzo!
Mapas vectoriales.
VoiceOver en calles y marcadores.
Ver video
http://youtu.be/FwCwxgMn-_w?t=2m13s

35. NO EMPEZAR
DE CERO

36. GESTOR DE CONTENIDO
RTE que genere HTML válido
Diálogos para texto @alt y marcado semántico
Plantillas que separen lógica de HTML
Frameworks y sus comunidades

37. COMPONENTES ACCESIBLES
Testearlo en nuestros browsers objetivo
Puedo usarlo con el teclado
Escalable (text zoom)
Si hay links, que apunten a una URL
¿Dice ser accesible?
Librerías

38. HERRAMIENTAS
Firefox Accessibility Extension
Examinator
Firefox + NVDA
DOM Inspector Accessible Tree
http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html

39. Firefox DOM Inspector
Accessible Tree

40. 80/20
Menos de una semana
Buen diseño puede ser accesible
¡Si se quiere, se puede!

41. MUCHAS GRACIAS!
@mrazzari
http://goo.gl/5w5m7