Mapoteca accesible

15,606 views

Published on

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.

Published in: Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
15,606
On SlideShare
0
From Embeds
0
Number of Embeds
2,925
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Mapoteca accesible

  1. 1. PROYECTO MAPOTECA PARA EDUC.AR Manuel Razzari Junio 12, 2012 Agosto 8, 2013
  2. 2. SUMARIO Contexto del proyecto Cosas que salieron bien Otras que salieron mal Técnicas y herramientas Cómo lo encaramos
  3. 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. 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. 5. Página principal
  6. 6. Mapa
  7. 7. Zoom con tiles
  8. 8. Superponer capas
  9. 9. Dibujar, imprimir o descargar lo dibujado
  10. 10. Actividades didácticas
  11. 11. Actividad con metadatos
  12. 12. LIMITES DE UN ESTUDIO WEB No hay especialistas Tiempos cortos Costos por hora Otras prioridades Sin control punta a punta
  13. 13. ACCESO UNIVERSAL Icono IE por http://fav.me/dlx6z0 HTML5… ¿SVG? ¿¡Canvas!?
  14. 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. 15. ALGUNAS COSAS SALIERON BIEN
  16. 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. 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. 18. SALTEAR REDUNDANCIAS http://john.foliot.ca/aria-hidden/
  19. 19. ARIA LANDMARK ROLES banner main complementary navigation search contentinfo http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/
  20. 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. 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. 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. 23. ALGUNAS COSAS NO SALIERON TAN BIEN
  24. 24. TEXTO ALTERNATIVO Confusión @alt y epígrafe. Alt con nombre de imagen “bioma jujuy 06”. Errores de tipeo. ¡Se los capacitó!
  25. 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. 26. PROBLEMAS DE COLOR http://vischeck.com/
  27. 27. EL TRACKPAD Dibujar con trackpad no resulta tan fácil. http://flic.kr/p/bDXYK7
  28. 28. “Observen el mapa y anoten las coordenadas...” “Observen las siguientes imágenes de paisajes áridos. Identifiquen el factor erosivo...” ACTIVIDADES VISUALES
  29. 29. ¿QUIÉN QUEDA AFUERA? Dibujar require puntero. Ver los mapas requiere... ver. @longdesc imposible Falta info al respecto.
  30. 30. MAPAS INTERACTIVOS Paneo Zoom Dibujo Capas “Accesibilidad de mapas = navegación por teclado”
  31. 31. MAPAS INTERACTIVOS http://www.alistapart.com/articles/takecontrolofyourmaps/ Servidor de mapas Caché de mosaicos Cliente visualizador Datos geo-espaciales
  32. 32. MOSAICOS DE MAPAS ¡Texto como imágenes!
  33. 33. MAPAS TÁCTILES Atlas for the blind, 1837. http://www.davidrumsey.com/blog/2012/5/21/atlas-for-the-blind-1837
  34. 34. MAPAS EN iOS6 ¡Un nuevo comienzo! Mapas vectoriales. VoiceOver en calles y marcadores. Ver video http://youtu.be/FwCwxgMn-_w?t=2m13s
  35. 35. NO EMPEZAR DE CERO
  36. 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. 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. 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. 39. Firefox DOM Inspector Accessible Tree
  40. 40. 80/20 Menos de una semana Buen diseño puede ser accesible ¡Si se quiere, se puede!
  41. 41. MUCHAS GRACIAS! @mrazzari http://goo.gl/5w5m7

×