Mapoteca accesible
•
0 recomendaciones•21,682 vistas
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.
Denunciar
Compartir
Presentaciones relacionadas
Más contenido relacionado
Destacado
Destacado (20)
Similar a Mapoteca accesible
Similar a Mapoteca accesible (15)
Último
Último (16)
Mapoteca accesible
- 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.
- 6. Mapa
- 9. Dibujar, imprimir o descargar lo dibujado
- 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/
- 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
- 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
- 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
- 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!