mobile et accessibilité, une partie à troie
DESCRIPTION
Les smartphones donnent d'un côté des super-pouvoirs aux porteurs de handicaps (à défaut d'autre mot moins connoté), de l'autre ils donnent un aperçu des bénéfices de l'accessibilité. Par ailleurs, la refonte nécessaire pour rendre un site mobile est l'occasion rêvée de le rendre (plus) accessible, vu les recoupements entre bonnes pratiques mobile et accessibilité. Il faut bien sûr faire attention à certains détails... Présentation donnée lors de Paris Web 2013 et de WebInAlps9.TRANSCRIPT
![Page 1: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/1.jpg)
Goulven Champenois
Une partie à Troie
Mobile et accessibilité
![Page 2: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/2.jpg)
Qui suis-je ?
![Page 3: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/3.jpg)
“Les handicapés n’utilisent pas de smartphones”
Mythe
![Page 4: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/4.jpg)
Vraiment ?
![Page 5: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/5.jpg)
• 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
![Page 6: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/6.jpg)
72% des handicapés utilisent un lecteur d’écran sur leur mobile
28%
72%
http://webaim.org/projects/screenreadersurvey4/#mobile
![Page 7: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/7.jpg)
Pendant ce temps, sur le Web
![Page 8: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/8.jpg)
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
![Page 9: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/9.jpg)
![Page 10: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/10.jpg)
• 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
![Page 11: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/11.jpg)
Un smartphone est utilisé plus de 2h par jour !
Étude IDC-Facebook “Always connected” https://fb-public.app.box.com/s/3iq5x6uwnqtq7ki4q8wk
![Page 12: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/12.jpg)
Nous sommes des cyborgs
![Page 13: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/13.jpg)
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€
![Page 14: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/14.jpg)
Les smartphones font de nous des handicapés.
![Page 15: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/15.jpg)
• 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
![Page 16: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/16.jpg)
<3
![Page 17: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/17.jpg)
![Page 18: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/18.jpg)
Comment faire ?
Responsive et accessible
![Page 19: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/19.jpg)
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
![Page 20: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/20.jpg)
Opérable
• Ni survol ni tabulation
• Attention aux iframes pièges à doigt !
• Allongez le temps des sessions
• Stockez la saisie en local
![Page 21: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/21.jpg)
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
![Page 22: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/22.jpg)
Robuste
• HTML valide
• Types d’input adaptés
• Alléger les pages (images, polices, Javascript)
![Page 23: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/23.jpg)
Responsive : forcément accessible ?
![Page 24: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/24.jpg)
• Permettre de zoomer
• Fournir les mêmes contenus et fonctionnalités
Oui, à condition de
![Page 25: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/25.jpg)
Rendons le site accessible
Ne dites pas
![Page 26: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/26.jpg)
Faisons un site mobile
Mais :
![Page 27: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/27.jpg)
Et faites-le bien…
![Page 28: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/28.jpg)
Un site mobile
doit être
accessible
![Page 29: Mobile et accessibilité, une partie à Troie](https://reader034.vdocuments.site/reader034/viewer/2022052507/558769d7d8b42ad80b8b45c5/html5/thumbnails/29.jpg)
Crédits photo
• Trojan Horse 7 https://www.flickr.com/photos/urbanduck/6121857076/
• Facepalm monkey https://www.flickr.com/photos/lars_in_japan/6600322055/
• Ghost in the Shell http://www.comicwallpapers10.net/ghost-in-the-shell/wallpaper-awesome-ghost-in-the-shell-wallpaper-3