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

on

  • 5,029 views

Presentado en el Curso de Experto Universitario en Accesibilidad y Usabilidad

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

Statistics

Views

Total Views
5,029
Views on SlideShare
4,354
Embed Views
675

Actions

Likes
3
Downloads
0
Comments
0

6 Embeds 675

http://ultimorender.com.ar 645
http://gmpg.org 11
http://feeds.feedburner.com 9
http://translate.googleusercontent.com 7
http://www.linkedin.com 2
http://www.ultimorender.com.ar 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • ACCESIBILIDAD EN MAPASY VISUALIZACIÓN DEINFORMACIÓNManuel RazzariCurso de Experto Universitario en Accesibilidad y UsabilidadUTN, FRBA — Octubre 16, 2012
  • 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, usabilidad y accesibilidad.
  • 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/
  • 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.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
  • 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
  • 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
  • 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/
  • 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/
  • 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
  • MAPAS ACCESIBLES
  • 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
  • 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órdoba</div>http://craigsworks.com/projects/qtip2/
  • SALTEAR REDUNDANCIAShttp://john.foliot.ca/aria-hidden/
  • 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
  • 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/takecontrolofyourmaps/
  • MAPAS INTERACTIVOSDatos geo-espacialesServidor de mapasCaché de mosaicosCliente visualizadorhttp://www.alistapart.com/articles/takecontrolofyourmaps/
  • 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/
  • 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... ver. ¿@longdesc posible? ¿Realista?
  • 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/watch?v=97gL1EZyfDk
  • ACCESIBILIDAD ENVISUALIZACIÓN DE INFORMACIÓN
  • 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
  • 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> <th><thead><th>http://elauria.com/chartsTutorial: http://goo.gl/AkwdV
  • TABLAS COMO ORIGEN role="image" aria-describedby="id_tabla" <caption> <sup> <td> <sub> <th><thead><th>http://elauria.com/chartsTutorial: http://goo.gl/AkwdV
  • 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" 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
  • 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 cuando está disponible"http://www.marcozehe.de/2011/12/05/from-wai-aria-to-html5-and-back-or-maybe-not/
  • 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 El Cuarteto de Anscombe, vistoen “The Visual Display of Quantitative Informtion”, el clásico de Edward Tufte.
  • 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.
  • 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 datos, ver patrones y valores atípicos, comparar.
  • ¿QUÉ OPINAN? @mrazzari http://goo.gl/VZc7A