Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

16,085 views

Published on

Presentado en el Curso de Experto Universitario en Accesibilidad y Usabilidad
UTN, FRBA — Octubre 16, 2012

Published in: Technology
  • Be the first to comment

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

  1. 1. ACCESIBILIDAD EN MAPASY VISUALIZACIÓN DEINFORMACIÓNManuel RazzariCurso de Experto Universitario en Accesibilidad y UsabilidadUTN, FRBA — Octubre 16, 2012
  2. 2. SUMARIOPresentaciónEl DOM accesibleAccesibilidad de:▪ SVG▪ Canvas▪ Mapas▪ Visualización de información
  3. 3. CON VISTA AL MARUn 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 descargarlo dibujado
  10. 10. VIZVID.COM Analítica de videos en tiempo realhttp://vizvid.com/
  11. 11. EL DOM ACCESIBLE
  12. 12. EL DOM
  13. 13. EL DOM ACCESIBLEhttp://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
  14. 14. EL DOM ACCESIBLE|
  15. 15. Firefox DOM InspectorAccessible Tree
  16. 16. AVIEWERhttp://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. CONTACTOEl 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. CONTACTOCómo llegar, también en texto.Un framework metodológico para describir mapashttp://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 REDUNDANCIAShttp://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 tecladoRole:presentation no funciona en elementos enfocables, y otras reflexiones:http://asurkov.blogspot.com/2012/02/aria-hidden-and-rolepresentation.html
  30. 30. MAPAS INTERACTIVOSPaneoZoomDibujoCapas“Accesibilidad de mapas = navegación por teclado”
  31. 31. MAPAS INTERACTIVOSDatos geo-espacialeshttp://www.alistapart.com/articles/takecontrolofyourmaps/
  32. 32. MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapashttp://www.alistapart.com/articles/takecontrolofyourmaps/
  33. 33. MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapasCaché de mosaicoshttp://www.alistapart.com/articles/takecontrolofyourmaps/
  34. 34. MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapasCaché de mosaicosCliente visualizadorhttp://www.alistapart.com/articles/takecontrolofyourmaps/
  35. 35. OPEN LAYERSPara hackersHerramientas de dibujo y mediciónInfinitos ejemplosSoporta todo: formatos, proveedores de mapasIE6+, incluso dibujos!La chancha y los veinteOpenLayers.js: 1MBhttp://openlayers.org/
  36. 36. LEAFLETFácil de usar y modificar con CSSIE7+Mobile-friendlyLeaflet.js: 100kbEn ascenso!http://leaflet.cloudmade.com/
  37. 37. MOSAICOS DE MAPAS ¡Texto como imágenes!
  38. 38. PROBLEMAS DE COLORhttp://vischeck.com/
  39. 39. PROBLEMAS DE COLORhttp://vischeck.com/
  40. 40. EL TRACKPADDibujar con trackpadno 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ÁCTILESAtlas for the blind, 1837.http://www.davidrumsey.com/blog/2012/5/21/atlas-for-the-blind-1837
  43. 43. MAPAS TÁCTILESBasados 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 videohttp://www.youtube.com/watch?v=97gL1EZyfDk
  45. 45. ACCESIBILIDAD ENVISUALIZACIÓN DE INFORMACIÓN
  46. 46. GRÁFICOS. INTERACTIVOS.Soluciones viejas Flash Imágenes generadas en el servidorSoluciones nuevas Canvas SVG HTML+CSSProblemas de siempre Texto como imágenes No operable con teclado
  47. 47. TABLAS COMO ORIGENhttp://elauria.com/chartsTutorial: http://goo.gl/AkwdV
  48. 48. TABLAS COMO ORIGENhttp://elauria.com/chartsTutorial: http://goo.gl/AkwdV
  49. 49. TABLAS COMO ORIGEN <caption> <sup> <td> <sub> <th><thead><th>http://elauria.com/chartsTutorial: 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/chartsTutorial: http://goo.gl/AkwdV
  51. 51. TABLAS COMO ORIGENhttp://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 VUELTAhttp://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 COMPLEJOShttp://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, vistoen “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, vistoen “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

×