Your SlideShare is downloading. ×
ACCESIBILIDAD EN MAPASY VISUALIZACIÓN DEINFORMACIÓNManuel RazzariCurso de Experto Universitario en Accesibilidad y Usabili...
SUMARIOPresentaciónEl DOM accesibleAccesibilidad de:▪   SVG▪   Canvas▪   Mapas▪   Visualización de información
CON VISTA AL MARUn estudio de diseño y desarrollo de interfaces     web que trabaja con estándares web,          usabilida...
MAPOTECA.EDUC.AR Aplicación web para que estudiantes interactúen    con mapas escolares. A ser instalada en las   3 millon...
Página principal
Mapa
Zoom con tiles
Superponer capas
Dibujar, imprimir o descargarlo dibujado
VIZVID.COM                     Analítica de videos                       en tiempo realhttp://vizvid.com/
EL DOM ACCESIBLE
EL DOM
EL DOM ACCESIBLEhttp://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html
EL DOM ACCESIBLE|
Firefox DOM InspectorAccessible Tree
AVIEWERhttp://goo.gl/Oj6Du
ACCESIBILIDAD DE SVG<svg  width="534"  height="344"  role="img"  title="A test for SVG accessibility"  xmlns="http://www.w...
ACCESIBILIDAD DE SVG<svg                                     Elemento SVG dentro de un HTML.                              ...
ACCESIBILIDAD DE SVG<svg                                     Elemento SVG dentro de un HTML.                              ...
ACCESIBILIDAD DE CANVAS <canvas  id="example"  width="260"  height="200">         <h2>Shapes</h2>         <p>A rectangle w...
ACCESIBILIDAD DE CANVAS <canvas  id="example"  width="260"  height="200">                                                 ...
EL ESTADO ACTUAL“El estado actual de la accesibilidad de SVG        no es mejor que el de canvas.”Steve Faulkner, http://l...
MAPAS ACCESIBLES
CONTACTOEl mapita está de moda.Dirección: también en texto!Interactivo:  permitir zoom.Ejemplo encontrado en la Web.http:/...
CONTACTOCómo llegar, también en texto.Un framework metodológico para describir mapashttp://goo.gl/UUNh3
MAPAS DE IMÁGENES
MAPAS DE IMÁGENES<area alt="Córdoba" href="..." coords="..." /><div class="tooltip" role="alert" aria-live="polite">  Córd...
SALTEAR REDUNDANCIAShttp://john.foliot.ca/aria-hidden/
SALTEAR REDUNDANCIAS(function($) {     $(".home-map img, #Map area")       .attr({         role: presentation,         ari...
MAPAS INTERACTIVOSPaneoZoomDibujoCapas“Accesibilidad de mapas = navegación por teclado”
MAPAS INTERACTIVOSDatos geo-espacialeshttp://www.alistapart.com/articles/takecontrolofyourmaps/
MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapashttp://www.alistapart.com/articles/takecontrolofyourmaps/
MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapasCaché de mosaicoshttp://www.alistapart.com/articles/takecontrolofyo...
MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapasCaché de mosaicosCliente visualizadorhttp://www.alistapart.com/arti...
OPEN LAYERSPara hackersHerramientas de dibujo y mediciónInfinitos ejemplosSoporta todo: formatos, proveedores de mapasIE6+...
LEAFLETFácil de usar y modificar con CSSIE7+Mobile-friendlyLeaflet.js: 100kbEn ascenso!http://leaflet.cloudmade.com/
MOSAICOS DE MAPAS ¡Texto como imágenes!
PROBLEMAS DE COLORhttp://vischeck.com/
PROBLEMAS DE COLORhttp://vischeck.com/
EL TRACKPADDibujar con trackpadno resulta tan fácil.http://flic.kr/p/bDXYK7
¿QUIÉN QUEDA AFUERA?              Dibujar require              puntero.              Ver los mapas              requiere.....
MAPAS TÁCTILESAtlas for the blind, 1837.http://www.davidrumsey.com/blog/2012/5/21/atlas-for-the-blind-1837
MAPAS TÁCTILESBasados en OSM, 2009. http://wiki.openstreetmap.org/wiki/HaptoRender
MAPAS EN iOS6 ¡Un nuevo comienzo! Mapas vectoriales. VoiceOver en calles y marcadores. Ver videohttp://www.youtube.com/wat...
ACCESIBILIDAD ENVISUALIZACIÓN DE  INFORMACIÓN
GRÁFICOS. INTERACTIVOS.Soluciones viejas Flash Imágenes generadas en el servidorSoluciones nuevas Canvas SVG HTML+CSSProbl...
TABLAS COMO ORIGENhttp://elauria.com/chartsTutorial: http://goo.gl/AkwdV
TABLAS COMO ORIGENhttp://elauria.com/chartsTutorial: http://goo.gl/AkwdV
TABLAS COMO ORIGEN     <caption>                    <sup>                        <td>                    <sub>            ...
TABLAS COMO ORIGEN                                role="image" aria-describedby="id_tabla"     <caption>                  ...
TABLAS COMO ORIGENhttp://filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
INDICADORES  Se muestran los valores en texto  Reforzado con ARIA slider  <svg    role="range"    aria-valuemax="19"    ar...
BUSCARLE LA VUELTAhttp://omnipotent.net/jquery.sparkline/
MAPAS + GRÁFICOS SIMPLES<svg:path  role="listitem"  aria-label="41% in Brooklin">                   Mejor:   <ol>
CUÁNDO USAR WAI-ARIA    "WAI-ARIA sirve para mejorar, no sustituir, el     marcado nativo. Deberíamos usar éste último    ...
MAPAS COMPLEJOShttp://blog.cartodb.com/post/28487635064/our-first-collaboration-with-the-guardian-a-time-lapse
TODOS JUNTOS AHORA   Mapas, gráficos, interacción, tiempo.www.gapminder.org
NO TAN ACCESIBLE Hacemos accesibles los datos.  Pero no la información.http://en.wikipedia.org/wiki/Anscombe%27s_quartet E...
NO TAN ACCESIBLE Hacemos accesibles los datos.  Pero no la información.http://en.wikipedia.org/wiki/Anscombe%27s_quartet E...
CONCLUSIONES EN TEXTO     ¿Qué es lo que este gráfico revela o hace obvio?http://ironfeathers.ca/routes/30/
DESCUBRIR INFORMACIÓN  Las mejores visualizaciones interactivas revelan,permiten explorar visualmente y manipular los dato...
¿QUÉ OPINAN?       @mrazzari  http://goo.gl/VZc7A
Accesibilidad web en mapas y visualización de información
Upcoming SlideShare
Loading in...5
×

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

8,349

Published on

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
8,349
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "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

×