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.
Presentado originalmente el martes 12 de junio de 2012, en la
5ta. Jornada "Por una Web Sin Barreras para las Personas con Discapacidad",
http://www.isoc.org.ar/proyectos/jornada5.html
Actualizado el 8 de agosto de 2013 para presentación en el curso
"Especialización en Diseño de interacción con estándares de accesibilidad y usabilidad"
del INSPT - Universidad Tecnológica Nacional.
Presentado originalmente el martes 12 de junio de 2012, en la
5ta. Jornada "Por una Web Sin Barreras para las Personas con Discapacidad",
http://www.isoc.org.ar/proyectos/jornada5.html
Actualizado el 8 de agosto de 2013 para presentación en el curso
"Especialización en Diseño de interacción con estándares de accesibilidad y usabilidad"
del INSPT - Universidad Tecnológica Nacional.
1.
PROYECTO
MAPOTECA
PARA EDUC.AR
Manuel Razzari
Junio 12, 2012
Agosto 8, 2013
2.
SUMARIO
Contexto del proyecto
Cosas que salieron bien
Otras que salieron mal
Técnicas y herramientas
Cómo lo encaramos
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.
12.
LIMITES DE UN ESTUDIO WEB
No hay especialistas
Tiempos cortos
Costos por hora
Otras prioridades
Sin control punta a punta
13.
ACCESO UNIVERSAL
Icono IE por http://fav.me/dlx6z0
HTML5…
¿SVG?
¿¡Canvas!?
14.
Ancho de banda
Congestión,
concurrencia
Fuera de Cap.Fed.
Offline!
ACCESO UNIVERSAL
Foto por @joseallona a bordo del 152 http://instagr.am/p/LwHiiTF_02/
16.
¡DESDE EL VAMOS!
El “antes y después”
La accesibilidad incorporada desde el comienzo,
transversal al trabajo de cada miembro del equipo.
No una “revisión sorpresa” al final.
17.
NAVEGACIÓN POR TECLADO
Todos es navegable y activable por teclado.
Interactivos: menúes desplegables, sliders
Ayudar al foco mediante JS.
Foco más visible
20.
INDICAR DESPLEGABLES
La forma “correcta”
La infinita especificación de WAI ARIA para menúes desplegables: http://www.w3.org/WAI/PF/aria-practices/#menu
21.
INDICAR DESPLEGABLES
La forma fácil
Lo más sencillo: usar un componente que use ARIA, como http://yuilibrary.com/yui/docs/node-menunav/
22.
INDICAR DESPLEGABLES
No tan correcto... ¡pero realista!
<a aria-expanded="false"
aria-controls="menu-1">Menú</a>
<ul id="menu-1">
<li>...</li>
<li>...</li>
</ul>
Ya tenemos el menú hecho y nos olvidamos de ARIA, ¿cómo lo emparchamos? www.marcozehe.de/?p=218
27.
EL TRACKPAD
Dibujar con trackpad
no resulta tan fácil.
http://flic.kr/p/bDXYK7
28.
“Observen el mapa y anoten las coordenadas...”
“Observen las siguientes imágenes de paisajes
áridos. Identifiquen el factor erosivo...”
ACTIVIDADES VISUALES
29.
¿QUIÉN QUEDA AFUERA?
Dibujar require
puntero.
Ver los mapas
requiere... ver.
@longdesc
imposible
Falta info al
respecto.
30.
MAPAS INTERACTIVOS
Paneo
Zoom
Dibujo
Capas
“Accesibilidad de mapas = navegación por teclado”
31.
MAPAS INTERACTIVOS
http://www.alistapart.com/articles/takecontrolofyourmaps/
Servidor de mapas
Caché de mosaicos
Cliente visualizador
Datos geo-espaciales
36.
GESTOR DE CONTENIDO
RTE que genere HTML válido
Diálogos para texto @alt y marcado semántico
Plantillas que separen lógica de HTML
Frameworks y sus comunidades
37.
COMPONENTES ACCESIBLES
Testearlo en nuestros browsers objetivo
Puedo usarlo con el teclado
Escalable (text zoom)
Si hay links, que apunten a una URL
¿Dice ser accesible?
Librerías
38.
HERRAMIENTAS
Firefox Accessibility Extension
Examinator
Firefox + NVDA
DOM Inspector Accessible Tree
http://asurkov.blogspot.com.ar/2012/02/dom-inspector-as-accessibility-tool.html