SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Accesibilidad web en mapas y visualización de información
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
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/
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
24.
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
25.
CONTACTO
Cómo llegar, también
en texto.
Un framework metodológico para describir mapas
http://goo.gl/UUNh3
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 teclado
Role:presentation no funciona en elementos enfocables, y otras reflexiones:
http://asurkov.blogspot.com/2012/02/aria-hidden-and-rolepresentation.html
30.
MAPAS INTERACTIVOS
Paneo
Zoom
Dibujo
Capas
“Accesibilidad de mapas = navegación por teclado”
31.
MAPAS INTERACTIVOS
Datos geo-espaciales
http://www.alistapart.com/articles/takecontrolofyourmaps/
32.
MAPAS INTERACTIVOS
Datos geo-espaciales
Servidor de mapas
http://www.alistapart.com/articles/takecontrolofyourmaps/
33.
MAPAS INTERACTIVOS
Datos geo-espaciales
Servidor de mapas
Caché de mosaicos
http://www.alistapart.com/articles/takecontrolofyourmaps/
34.
MAPAS INTERACTIVOS
Datos geo-espaciales
Servidor de mapas
Caché de mosaicos
Cliente visualizador
http://www.alistapart.com/articles/takecontrolofyourmaps/
35.
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/
36.
LEAFLET
Fácil de usar y
modificar con CSS
IE7+
Mobile-friendly
Leaflet.js: 100kb
En ascenso!
http://leaflet.cloudmade.com/
46.
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
47.
TABLAS COMO ORIGEN
http://elauria.com/charts
Tutorial: http://goo.gl/AkwdV
48.
TABLAS COMO ORIGEN
http://elauria.com/charts
Tutorial: http://goo.gl/AkwdV
49.
TABLAS COMO ORIGEN
<caption>
<sup>
<td>
<sub>
<th>
<thead><th>
http://elauria.com/charts
Tutorial: http://goo.gl/AkwdV
50.
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
51.
TABLAS COMO ORIGEN
http://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 VUELTA
http://omnipotent.net/jquery.sparkline/
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/
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, visto
en “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, visto
en “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.