Accesibilidad web en mapas y visualización de información
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
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/
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
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
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
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/
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
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
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/
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.