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

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. SUMARIO
Presentación
El DOM accesible
Accesibilidad de:
▪ SVG
▪ Canvas
▪ Mapas
▪ Visualización de información

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. 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 descargar
lo dibujado

10. VIZVID.COM
Analítica de videos
en tiempo real
http://vizvid.com/

12. EL DOM ACCESIBLE

13. EL DOM

14. EL DOM ACCESIBLE
http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html

15. EL DOM ACCESIBLE
|

16. Firefox DOM Inspector
Accessible Tree

17. AVIEWER
http://goo.gl/Oj6Du

18. 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

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>
<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 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

21. 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/

22. 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/

23. 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

24. MAPAS ACCESIBLES

25. 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

26. CONTACTO
Cómo llegar, también
en texto.
Un framework metodológico para describir mapas
http://goo.gl/UUNh3

27. MAPAS DE IMÁGENES

28. 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/

29. SALTEAR REDUNDANCIAS
http://john.foliot.ca/aria-hidden/

30. 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

31. MAPAS INTERACTIVOS
Paneo
Zoom
Dibujo
Capas
“Accesibilidad de mapas = navegación por teclado”

32. MAPAS INTERACTIVOS
Datos geo-espaciales
http://www.alistapart.com/articles/takecontrolofyourmaps/

33. MAPAS INTERACTIVOS
Datos geo-espaciales
Servidor de mapas
http://www.alistapart.com/articles/takecontrolofyourmaps/

34. MAPAS INTERACTIVOS
Datos geo-espaciales
Servidor de mapas
Caché de mosaicos
http://www.alistapart.com/articles/takecontrolofyourmaps/

35. MAPAS INTERACTIVOS
Datos geo-espaciales
Servidor de mapas
Caché de mosaicos
Cliente visualizador
http://www.alistapart.com/articles/takecontrolofyourmaps/

36. 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/

37. LEAFLET
Fácil de usar y
modificar con CSS
IE7+
Mobile-friendly
Leaflet.js: 100kb
En ascenso!
http://leaflet.cloudmade.com/

38. MOSAICOS DE MAPAS
¡Texto como imágenes!

39. PROBLEMAS DE COLOR
http://vischeck.com/

40. PROBLEMAS DE COLOR
http://vischeck.com/

41. EL TRACKPAD
Dibujar con trackpad
no resulta tan fácil.
http://flic.kr/p/bDXYK7

42. ¿QUIÉN QUEDA AFUERA?
Dibujar require
puntero.
Ver los mapas
requiere... ver.
¿@longdesc posible?
¿Realista?

43. MAPAS TÁCTILES
Atlas for the blind, 1837.
http://www.davidrumsey.com/blog/2012/5/21/atlas-for-the-blind-1837

44. MAPAS TÁCTILES
Basados en OSM, 2009. http://wiki.openstreetmap.org/wiki/HaptoRender

45. MAPAS EN iOS6
¡Un nuevo comienzo!
Mapas vectoriales.
VoiceOver en calles y marcadores.
Ver video
http://www.youtube.com/watch?v=97gL1EZyfDk

46. ACCESIBILIDAD EN
VISUALIZACIÓN DE
INFORMACIÓN

47. 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

48. TABLAS COMO ORIGEN
http://elauria.com/charts
Tutorial: http://goo.gl/AkwdV

49. TABLAS COMO ORIGEN
http://elauria.com/charts
Tutorial: http://goo.gl/AkwdV

50. TABLAS COMO ORIGEN
<caption>
<sup>
<td>
<sub>
<th>
<thead><th>
http://elauria.com/charts
Tutorial: http://goo.gl/AkwdV

51. 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

52. TABLAS COMO ORIGEN
http://filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

53. 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

54. BUSCARLE LA VUELTA
http://omnipotent.net/jquery.sparkline/

55. MAPAS + GRÁFICOS SIMPLES
<svg:path
role="listitem"
aria-label="41% in Brooklin">
Mejor: <ol>

56. 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/

57. MAPAS COMPLEJOS
http://blog.cartodb.com/post/28487635064/our-first-collaboration-with-the-guardian-a-time-lapse

58. TODOS JUNTOS AHORA
Mapas, gráficos, interacción, tiempo.
www.gapminder.org

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. 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.

61. CONCLUSIONES EN TEXTO
¿Qué es lo que este gráfico revela o hace obvio?
http://ironfeathers.ca/routes/30/

62. DESCUBRIR INFORMACIÓN
Las mejores visualizaciones interactivas revelan,
permiten explorar visualmente y manipular los datos,
ver patrones y valores atípicos, comparar.

63. ¿QUÉ OPINAN?
@mrazzari
http://goo.gl/VZc7A