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