Your SlideShare is downloading. ×
Accesibilidad web en mapas y visualización de información
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

6,886
views

Published on

Presentado en el Curso de Experto Universitario en Accesibilidad y Usabilidad …

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

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,886
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ACCESIBILIDAD EN MAPASY VISUALIZACIÓN DEINFORMACIÓNManuel RazzariCurso de Experto Universitario en Accesibilidad y UsabilidadUTN, FRBA — Octubre 16, 2012
  • 2. SUMARIOPresentaciónEl DOM accesibleAccesibilidad de:▪ SVG▪ Canvas▪ Mapas▪ Visualización de información
  • 3. CON VISTA AL MARUn 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.http://mapoteca.educ.ar/
  • 5. Página principal
  • 6. Mapa
  • 7. Zoom con tiles
  • 8. Superponer capas
  • 9. Dibujar, imprimir o descargarlo dibujado
  • 10. VIZVID.COM Analítica de videos en tiempo realhttp://vizvid.com/
  • 11. EL DOM ACCESIBLE
  • 12. EL DOM
  • 13. EL DOM ACCESIBLEhttp://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
  • 14. EL DOM ACCESIBLE|
  • 15. Firefox DOM InspectorAccessible Tree
  • 16. AVIEWERhttp://goo.gl/Oj6Du
  • 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. 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. 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. 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. 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. 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. MAPAS ACCESIBLES
  • 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. CONTACTOCómo llegar, también en texto.Un framework metodológico para describir mapashttp://goo.gl/UUNh3
  • 26. MAPAS DE IMÁGENES
  • 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. SALTEAR REDUNDANCIAShttp://john.foliot.ca/aria-hidden/
  • 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. MAPAS INTERACTIVOSPaneoZoomDibujoCapas“Accesibilidad de mapas = navegación por teclado”
  • 31. MAPAS INTERACTIVOSDatos geo-espacialeshttp://www.alistapart.com/articles/takecontrolofyourmaps/
  • 32. MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapashttp://www.alistapart.com/articles/takecontrolofyourmaps/
  • 33. MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapasCaché de mosaicoshttp://www.alistapart.com/articles/takecontrolofyourmaps/
  • 34. MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapasCaché de mosaicosCliente visualizadorhttp://www.alistapart.com/articles/takecontrolofyourmaps/
  • 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. LEAFLETFácil de usar y modificar con CSSIE7+Mobile-friendlyLeaflet.js: 100kbEn ascenso!http://leaflet.cloudmade.com/
  • 37. MOSAICOS DE MAPAS ¡Texto como imágenes!
  • 38. PROBLEMAS DE COLORhttp://vischeck.com/
  • 39. PROBLEMAS DE COLORhttp://vischeck.com/
  • 40. EL TRACKPADDibujar con trackpadno resulta tan fácil.http://flic.kr/p/bDXYK7
  • 41. ¿QUIÉN QUEDA AFUERA? Dibujar require puntero. Ver los mapas requiere... ver. ¿@longdesc posible? ¿Realista?
  • 42. MAPAS TÁCTILESAtlas for the blind, 1837.http://www.davidrumsey.com/blog/2012/5/21/atlas-for-the-blind-1837
  • 43. MAPAS TÁCTILESBasados en OSM, 2009. http://wiki.openstreetmap.org/wiki/HaptoRender
  • 44. MAPAS EN iOS6 ¡Un nuevo comienzo! Mapas vectoriales. VoiceOver en calles y marcadores. Ver videohttp://www.youtube.com/watch?v=97gL1EZyfDk
  • 45. ACCESIBILIDAD ENVISUALIZACIÓN DE INFORMACIÓN
  • 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. TABLAS COMO ORIGENhttp://elauria.com/chartsTutorial: http://goo.gl/AkwdV
  • 48. TABLAS COMO ORIGENhttp://elauria.com/chartsTutorial: http://goo.gl/AkwdV
  • 49. TABLAS COMO ORIGEN <caption> <sup> <td> <sub> <th><thead><th>http://elauria.com/chartsTutorial: http://goo.gl/AkwdV
  • 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. TABLAS COMO ORIGENhttp://filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
  • 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. BUSCARLE LA VUELTAhttp://omnipotent.net/jquery.sparkline/
  • 54. MAPAS + GRÁFICOS SIMPLES<svg:path role="listitem" aria-label="41% in Brooklin"> Mejor: <ol>
  • 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. MAPAS COMPLEJOShttp://blog.cartodb.com/post/28487635064/our-first-collaboration-with-the-guardian-a-time-lapse
  • 57. TODOS JUNTOS AHORA Mapas, gráficos, interacción, tiempo.www.gapminder.org
  • 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. 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. CONCLUSIONES EN TEXTO ¿Qué es lo que este gráfico revela o hace obvio?http://ironfeathers.ca/routes/30/
  • 61. DESCUBRIR INFORMACIÓN Las mejores visualizaciones interactivas revelan,permiten explorar visualmente y manipular los datos, ver patrones y valores atípicos, comparar.
  • 62. ¿QUÉ OPINAN? @mrazzari http://goo.gl/VZc7A