Successfully reported this slideshow.

Accesibilidad web en mapas y visualización de información

4

Share

Upcoming SlideShare
Mapoteca accesible
Mapoteca accesible
Loading in …3
×
1 of 63
1 of 63

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Accesibilidad web en mapas y visualización de información

  1. 1. ACCESIBILIDAD EN MAPAS Y VISUALIZACIÓN DE INFORMACIÓN Manuel Razzari Curso de Experto Universitario en Accesibilidad y Usabilidad UTN, FRBA — Octubre 16, 2012
  2. 2. SUMARIO Presentación El DOM accesible Accesibilidad de: ▪ SVG ▪ Canvas ▪ Mapas ▪ Visualización de información
  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. http://mapoteca.educ.ar/
  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. VIZVID.COM Analítica de videos en tiempo real http://vizvid.com/
  11. 11. EL DOM ACCESIBLE
  12. 12. EL DOM
  13. 13. EL DOM ACCESIBLE http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
  14. 14. EL DOM ACCESIBLE |
  15. 15. Firefox DOM Inspector Accessible Tree
  16. 16. AVIEWER http://goo.gl/Oj6Du
  17. 17. ACCESIBILIDAD DE SVG <svg width="534" height="344" role="img" title="A test for SVG accessibility" xmlns="http://www.w3.org/2000/svg" tabindex="1"> <g> <path fill="#2C748C" d="M80,41.5A12.5,12.5,0,1,1,79.9,41.5 z"/> role="listitem" aria-label="41% in Brooklin" /> </g> </svg> http://goo.gl/RvoSa
  18. 18. ACCESIBILIDAD DE SVG <svg Elemento SVG dentro de un HTML. Marcar como imagen usando width="534" el rol de ARIA y atributo title. height="344" role="img" title="A test for SVG accessibility" xmlns="http://www.w3.org/2000/svg" tabindex="1"> <g> <path fill="#2C748C" d="M80,41.5A12.5,12.5,0,1,1,79.9,41.5 z"/> role="listitem" aria-label="41% in Brooklin" /> </g> </svg> http://goo.gl/RvoSa
  19. 19. ACCESIBILIDAD DE SVG <svg Elemento SVG dentro de un HTML. Marcar como imagen usando width="534" el rol de ARIA y atributo title. height="344" role="img" title="A test for SVG accessibility" xmlns="http://www.w3.org/2000/svg" tabindex="1"> <g> DOM interno del SVG, con ARIA. No soportado por lectores de pantalla. <path fill="#2C748C" d="M80,41.5A12.5,12.5,0,1,1,79.9,41.5 z"/> role="listitem" aria-label="41% in Brooklin" /> </g> </svg> http://goo.gl/RvoSa
  20. 20. ACCESIBILIDAD DE CANVAS <canvas id="example" width="260" height="200"> <h2>Shapes</h2> <p>A rectangle with a black border.</p> </canvas> http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/
  21. 21. ACCESIBILIDAD DE CANVAS <canvas id="example" width="260" height="200"> Sub-DOM o “shadow DOM” de HTML y ARIA como fallback. Replica lo que sucede en el canvas. <h2>Shapes</h2> <p>A rectangle with a black border.</p> </canvas> http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/
  22. 22. EL ESTADO ACTUAL “El estado actual de la accesibilidad de SVG no es mejor que el de canvas.” Steve Faulkner, http://lists.w3.org/Archives/Public/w3c-wai-ig/2012JulSep/0178.html
  23. 23. MAPAS ACCESIBLES
  24. 24. CONTACTO El mapita está de moda. Dirección: también en texto! Interactivo: permitir zoom. Ejemplo encontrado en la Web. http://www.jardindelossentidos.com/contacto.html
  25. 25. CONTACTO Cómo llegar, también en texto. Un framework metodológico para describir mapas http://goo.gl/UUNh3
  26. 26. MAPAS DE IMÁGENES
  27. 27. MAPAS DE IMÁGENES <area alt="Córdoba" href="..." coords="..." /> <div class="tooltip" role="alert" aria-live="polite"> Córdoba </div> http://craigsworks.com/projects/qtip2/
  28. 28. SALTEAR REDUNDANCIAS http://john.foliot.ca/aria-hidden/
  29. 29. SALTEAR REDUNDANCIAS (function($) { $(".home-map img, #Map area") .attr({ 'role': 'presentation', 'aria-hidden':'true' Del lector de pantalla }); $("#Map area") .attr('tabindex','-1') })(jQuery); Del teclado Role:presentation no funciona en elementos enfocables, y otras reflexiones: http://asurkov.blogspot.com/2012/02/aria-hidden-and-rolepresentation.html
  30. 30. MAPAS INTERACTIVOS Paneo Zoom Dibujo Capas “Accesibilidad de mapas = navegación por teclado”
  31. 31. MAPAS INTERACTIVOS Datos geo-espaciales http://www.alistapart.com/articles/takecontrolofyourmaps/
  32. 32. MAPAS INTERACTIVOS Datos geo-espaciales Servidor de mapas http://www.alistapart.com/articles/takecontrolofyourmaps/
  33. 33. MAPAS INTERACTIVOS Datos geo-espaciales Servidor de mapas Caché de mosaicos http://www.alistapart.com/articles/takecontrolofyourmaps/
  34. 34. MAPAS INTERACTIVOS Datos geo-espaciales Servidor de mapas Caché de mosaicos Cliente visualizador http://www.alistapart.com/articles/takecontrolofyourmaps/
  35. 35. OPEN LAYERS Para hackers Herramientas de dibujo y medición Infinitos ejemplos Soporta todo: formatos, proveedores de mapas IE6+, incluso dibujos! La chancha y los veinte OpenLayers.js: 1MB http://openlayers.org/
  36. 36. LEAFLET Fácil de usar y modificar con CSS IE7+ Mobile-friendly Leaflet.js: 100kb En ascenso! http://leaflet.cloudmade.com/
  37. 37. MOSAICOS DE MAPAS ¡Texto como imágenes!
  38. 38. PROBLEMAS DE COLOR http://vischeck.com/
  39. 39. PROBLEMAS DE COLOR http://vischeck.com/
  40. 40. EL TRACKPAD Dibujar con trackpad no resulta tan fácil. http://flic.kr/p/bDXYK7
  41. 41. ¿QUIÉN QUEDA AFUERA? Dibujar require puntero. Ver los mapas requiere... ver. ¿@longdesc posible? ¿Realista?
  42. 42. MAPAS TÁCTILES Atlas for the blind, 1837. http://www.davidrumsey.com/blog/2012/5/21/atlas-for-the-blind-1837
  43. 43. MAPAS TÁCTILES Basados en OSM, 2009. http://wiki.openstreetmap.org/wiki/HaptoRender
  44. 44. MAPAS EN iOS6 ¡Un nuevo comienzo! Mapas vectoriales. VoiceOver en calles y marcadores. Ver video http://www.youtube.com/watch?v=97gL1EZyfDk
  45. 45. ACCESIBILIDAD EN VISUALIZACIÓN DE INFORMACIÓN
  46. 46. GRÁFICOS. INTERACTIVOS. Soluciones viejas Flash Imágenes generadas en el servidor Soluciones nuevas Canvas SVG HTML+CSS Problemas de siempre Texto como imágenes No operable con teclado
  47. 47. TABLAS COMO ORIGEN http://elauria.com/charts Tutorial: http://goo.gl/AkwdV
  48. 48. TABLAS COMO ORIGEN http://elauria.com/charts Tutorial: http://goo.gl/AkwdV
  49. 49. TABLAS COMO ORIGEN <caption> <sup> <td> <sub> <th> <thead><th> http://elauria.com/charts Tutorial: http://goo.gl/AkwdV
  50. 50. TABLAS COMO ORIGEN role="image" aria-describedby="id_tabla" <caption> <sup> <td> <sub> <th> <thead><th> http://elauria.com/charts Tutorial: http://goo.gl/AkwdV
  51. 51. TABLAS COMO ORIGEN http://filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
  52. 52. INDICADORES Se muestran los valores en texto Reforzado con ARIA slider <svg role="range" aria-valuemax="19" aria-valuemin="1" aria-valuenow="4" arial-valuetext="4 right now" aria-labelledby="title_id">...</svg> http://dojotoolkit.org/reference-guide/1.8/dojox/widget/AnalogGauge.html
  53. 53. BUSCARLE LA VUELTA http://omnipotent.net/jquery.sparkline/
  54. 54. MAPAS + GRÁFICOS SIMPLES <svg:path role="listitem" aria-label="41% in Brooklin"> Mejor: <ol>
  55. 55. CUÁNDO USAR WAI-ARIA "WAI-ARIA sirve para mejorar, no sustituir, el marcado nativo. Deberíamos usar éste último cuando está disponible" http://www.marcozehe.de/2011/12/05/from-wai-aria-to-html5-and-back-or-maybe-not/
  56. 56. MAPAS COMPLEJOS http://blog.cartodb.com/post/28487635064/our-first-collaboration-with-the-guardian-a-time-lapse
  57. 57. TODOS JUNTOS AHORA Mapas, gráficos, interacción, tiempo. www.gapminder.org
  58. 58. NO TAN ACCESIBLE Hacemos accesibles los datos. Pero no la información. http://en.wikipedia.org/wiki/Anscombe%27s_quartet El Cuarteto de Anscombe, visto en “The Visual Display of Quantitative Informtion”, el clásico de Edward Tufte.
  59. 59. NO TAN ACCESIBLE Hacemos accesibles los datos. Pero no la información. http://en.wikipedia.org/wiki/Anscombe%27s_quartet El Cuarteto de Anscombe, visto en “The Visual Display of Quantitative Informtion”, el clásico de Edward Tufte.
  60. 60. CONCLUSIONES EN TEXTO ¿Qué es lo que este gráfico revela o hace obvio? http://ironfeathers.ca/routes/30/
  61. 61. DESCUBRIR INFORMACIÓN Las mejores visualizaciones interactivas revelan, permiten explorar visualmente y manipular los datos, ver patrones y valores atípicos, comparar.
  62. 62. ¿QUÉ OPINAN? @mrazzari http://goo.gl/VZc7A

×