Responsive Web Design y la accesibilidad

Charla conjunta de los meetups HTML5 Spain y Accesibilidad Spain

Transcript

1. Responsive Web Design y la accesibilidad @felixzapata @ramoncorominas @accSpain @HTML5MeetSpain
2. ¿Un concepto nuevo?
3. ¿Cómo se hace una web "para móviles"? un problema con múltiples soluciones...
4. Detección por User Agent ¿Quién eres tú?
5. Detección de características ¿Qué sabes hacer? http://modernizr.com http://www.caniuse.com
6. Redirecciones Distinta URL: m. o .mobi. El eterno dilema.
7. El problema de las detecciones ¡Somos unos mentirosos! Listado de cadenas de identificación de agentes de usuario.
8. Media queries El sistema natural para permitir que nuestro diseño se adapte según el contexto de visualización. ¡Me encanta esta página!
9. ¿"responsive" = "adaptable"? El fin de ambos es el mismo, pero no la manera de hacerlo.
10. Lo básico para entender RWD (y un poco de código)
11. Diseño y estructura flexible Valores proporcionales (%, em o rem), max-width, max-height, etc.
12. Definición del viewport < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 . 0 " / >
13. Sintaxis de las media queries < ! - - M e d i a q u e r y e n u n e l e m e n t o ( l i n k , p . e j . ) - - > < l i n k r e l = " s t y l e s h e e t " h r e f = " e x a m p l e . c s s " m e d i a = " ( m a x - w i d t h : 8 0 0 p x ) " / > < ! - - M e d i a q u e r y e n u n a h o j a d e e s t i l o s - - > < s t y l e > @ m e d i a ( m a x - w i d t h : 6 0 0 p x ) { . f a c e t _ s i d e b a r { d i s p l a y : n o n e ; } } < / s t y l e > CSS media queries
14. Combinando reglas @ m e d i a ( m i n - w i d t h : 7 0 0 p x ) a n d ( o r i e n t a t i o n : l a n d s c a p e ) { . . . }
15. Tipos de media queries Dispositivos de salida: braille, embossed, handheld, print, projection, screen, speech, tty, tv. Tamaño de dispositivo / tamaño de viewport → breakpoints. Orientación (vertical / apaisado). Profundidad de color. Otras.
16. Más alla del diseño responsive
17. Diseño sensible al contexto Sensores, geolocalización, geo + meteo, etc.
18. Diseño sensible al usuario responsive / sensible al contexto + necesidades del usuario = adaptación responsable.
19. Unas cuestiones previas de accesibilidad al usar RWD
20. ¿Debo tener el mismo contenido en todas las versiones? Mobile ≠ Desktop → Mobile First → One Web ¡No elimines opciones, elimina confusión!
21. ¿Debo informar al usuario de en qué versión está? Contenido idéntico → evita confusiones Contenido distinto → muy importante Turning off RWD
22. ¿Pongo enlaces a otras versiones? Sí, por favor Letting users disable responsive layout
23. ¿De qué manera informo? Visibilidad → visible (si te dejan) Colocación → preferible al principio Texto del mensaje → versión "móvil" / "reducida"
24. ¿Cómo evaluar una web responsive? La dura vida del consultor de accesibilidad
25. ¿Cómo sé en qué versión estoy? El peligro de navegar con la ventana minimizada
26. ¿Cómo sé cuántas versiones (*) hay? (*) Sólo suelen importar los cambios de contenido Cambiando la resolución / dispositivo Mirando el código Preguntando al desarrollador
27. ¿Es posible evaluar todas las versiones? Depende. No llego a tanta resolución No dispongo de tantos dispositivos
28. ¿Lleva el mismo tiempo? No.
29. ¿Cómo afecta a la certificación? URL única → misma certificación Es preferible informar en el sello
30. Ejemplos prácticos de (in)accesibilidad en RWD El pan de cada día.
31. 1. Impedir al usuario hacer zoom No puedo ni verte
32. <meta> viewport < ! - - n o q u i e r o q u e m e v e a s d e m a s i a d o b i e n - - > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , u s e r - s c a l a b l e = n o " / > < ! - - b u e n o , p e r o s ó l o u n p o c o . . . - - > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , m a x i m u m - s c a l e = 1 . 5 " / > < ! - - h a z c o n m i g o l o q u e q u i e r a s . . . - - > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h " / >
33. 2. Iconos sin identificar Adivina, adivinanza
34. Tipografías de iconos < ! - - E n l a c e s s i n c o n t e n i d o . . . - - > < a c l a s s = " i c o n - t w i t t e r " h r e f = " h t t p : / / w w w . t w i t t e r . c o m " > < / a > < ! - - M u c h o m á s c l a r o . . . - - > < a c l a s s = " i c o n - t w i t t e r " h r e f = " h t t p : / / w w w . t w i t t e r . c o m " t i t l e = " T w i t t e r " > < s p a n c l a s s = " o c u l t o " > T w i t t e r < / s p a n > < / a > . o c u l t o { p o s i t i o n : a b s o l u t e ; l e f t : - 9 9 9 9 e m ; w i d t h : 1 p x ; h e i g h t : 1 p x ; o v e r f l o w : h i d d e n ; }
35. 3. placeholder en lugar de etiquetas ¿Y esto qué es lo que era? Placeholders in Form Fields are Harmful
36. Etiquetado de formularios < ! - - C a m p o d e t e x t o s ó l o c o n p l a c e h o l d e r - - > < i n p u t t y p e = " t e x t " n a m e = " n o m b r e " p l a c e h o l d e r = " T u n o m b r e " / > < ! - - C a m p o c o r r e c t a m e n t e e t i q u e t a d o - - > < l a b e l f o r = " n o m b r e " > T u n o m b r e < / l a b e l > < i n p u t i d = " n o m b r e " t y p e = " t e x t " n a m e = " n o m b r e " p l a c e h o l d e r = " T u n o m b r e " / > Float Labels with CSS
37. 4. Mostrar y ocultar sin control del foco Sólo para tus ojos... Contenido dinámico accesible. Yes, we can!
38. Enlaces de interés
39. Enlaces de interés Fashionably flexible responsive web design (full day workshop from New Adventures, January 2013) CSS3 for Responsive Web Design (full day workshop) [VIDEO] HTML5 Spain: Hangout #2 – Responsive Web Design Un gato "responsive"
40. Enlaces de interés A List Apart: What We Mean When We Say “responsive" Mobile web content adaptation techniques DeviceAtlas Responsive Patterns
41. Enlaces de interés BBC Mobile Accessibility Guidelines Responsive Design y accesibilidad. Buenas y malas prácticas. Errores comunes. What Does Responsive Web Design Have to do with Accessibility "Accessible Responsive Web Design", by Kathy Wahlbin) Accessibility Problems in Responsive Websites
42. Be responsible, my friend! @felixzapata @ramoncorominas @accSpain @HTML5MeetSpain