Mobile et accessibilité, une partie à Troie

Les smartphones sont précieux pour les handicapés. Même sans handicap, ils nous sont devenus quasi indispensables. Et pourtant, leurs limitations gênent notre accès au Web...
Un Web accessible profite donc à énormément de gens, la refonte mobile est donc l'opportunité rêvée pour prendre l'accessibilité en compte.
Conférence donnée lors de Paris Web 2013 et de WebInAlps9.

Transcript

1. Goulven Champenois Une partie à Troie Mobile et accessibilité
2. Qui suis-je ?
3. “Les handicapés n’utilisent pas de smartphones” Mythe
4. Vraiment ?
5. • OS accessible • Applications accessibles • Synthèse vocale préinstallée • Connection bluetooth aux plages braille et aides audio • Applications de zoom, de reconnaissance optique • GPS voiture et piéton
6. 72% des handicapés utilisent un lecteur d’écran sur leur mobile 28% 72% http://webaim.org/projects/screenreadersurvey4/#mobile
7. Pendant ce temps, sur le Web
8. On entend encore dire que l'accessibilité... • Concerne une minorité • Est un surcoût sans valeur ajoutée • On n’a pas le budget pour tout refaire
10. • Tous les visiteurs en bénéficient • Il faut casser l'existant de toute façon, car... • Plus de 25 millions de mobinautes en France (chiffres Médiamétrie 2013) • Et trop peu de sites responsive ou mobiles
11. Un smartphone est utilisé plus de 2h par jour ! Étude IDC-Facebook “Always connected” https://fb-public.app.box.com/s/3iq5x6uwnqtq7ki4q8wk
12. Nous sommes des cyborgs
13. Pourtant… • Pas de souris • Pas de clavier • Pas d'écran (enfin, tout petit) • Pas de plugins (flash, au hasard) • Pas toujours de connexion • Jamais assez d'autonomie 700€
14. Les smartphones font de nous des handicapés.
15. • Perceptible • Opérable • Compréhensible • Robuste Puisque nous sommes handicapés, le Web mobile doit être WCAG = Règles pour l'Accessibilité des Contenus Web
16. <3
18. Comment faire ? Responsive et accessible
19. Perceptible • Alternatives (images, vidéos, audio) • Contraste et taille de texte • Attention aux popups et popins • Éviter les images de fond trop chargées • Attention à l'interligne (recouvrement) • Éviter le texte justifié sans césure
20. Opérable • Ni survol ni tabulation • Attention aux iframes pièges à doigt ! • Allongez le temps des sessions • Stockez la saisie en local
21. Compréhensible • Spécifier la langue de la page • Expliciter les abréviations • Étiquettes pour les icônes • L'affichage doit correspondre à l'ordre du code source • Valider la saisie à la volée
22. Robuste • HTML valide • Types d’input adaptés • Alléger les pages (images, polices, Javascript)
23. Responsive : forcément accessible ?
24. • Permettre de zoomer • Fournir les mêmes contenus et fonctionnalités Oui, à condition de