Responsive Web design, périphériques mobiles et accessibilité

Transcription

1 Responsive Web design, périphériques mobiles et accessibilité

2 Qui suis-je? Victor Brito Situé près de Paris, dans la France non voisine Intégrateur HTML / CSS freelance Expert Accessiweb en évaluation Intervient sur la relecture des référentiels Accessiweb Se cache derrière Un seul Web un-seul-web.fr et Tuyaux de l accessibilité tuyauxa11y.info Portfolio : victor-brito.fr Twitter

3 Ce dont il va être question Périphériques mobiles et responsive Web design : un regard opportun sur l accessibilité du Web Périphériques mobiles et responsive Web design comme révélateurs de problèmes d accessibilité Des critères d accessibilité négligés sur desktop qui sont révélés sur périphériques mobiles

4 L information ne doit pas être véhiculée uniquement par la couleur

5 L information ne doit pas être véhiculée uniquement par la couleur Le noir et blanc n est pas tout à fait mort!

6 Les formats pour le multimédia

7 Les formats pour le multimédia Flash boudé par la plupart des OS mobiles (ios en tête) Utiliser les éléments HTML 5 audio et video pour le multimédia Animations CSS 3 pour des animations

8 Le contrôle des limites de temps

9 Le contrôle des limites de temps En situation de mobilité, les connexions Wifi et 4G sont du luxe Plus la connexion est mauvaise, plus il faut de temps pour toute tâche Permettre aux utilisateurs de contrôler chaque limite de temps Laisser aux utilisateurs le soin de rafraîchir eux-mêmes une page Web

10 Le JavaScript

11 Le JavaScript En situation de mobilité, les connexions Wifi et 4G sont (toujours) du luxe Le JavaScript, même activé, peut ne pas se charger complètement S assurer que l essentiel des fonctionnalités du site Web est disponible comme si JavaScript était désactivé En cas d alternative à JavaScript, s assurer de sa pertinence

12 Les Captchas

13 Les Captchas Impact sur les écrans à haute densité de pixels (iphone 4, ipad 3 et bien d autres périphériques mobiles ) Fournir des versions d images Captcha adaptées à ces écrans ou privilégier d autres alternatives (opération arithmétique, question ou rien du tout)

14 Les liens d évitement

15 Les liens d évitement Facilite la navigation sur des écrans plus petits, même quand on est un utilisateur valide Et surtout

16 Les liens d évitement évite la tendinite du pouce!

17 Le zoom

18 Le zoom Zoom graphique prédominant sur les périphériques mobiles Zoom paramétrable via la méta viewport (HTML, pas standard) ou la (CSS, standard en devenir)

19 Le zoom Méta viewport width : définition de la largeur du viewport initial-scale : niveau de zoom initial minimum-scale : niveau de zoom minimal maximum-scale : niveau de zoom maximal user-scalable : zoom par interaction de l utilisateur (ne jamais utiliser la valeur no!) <meta name="viewport" content="width=device-width" />

20 Le zoom width : définition des largeurs minimales et maximales du viewport (raccourci pour min-width et max-width) zoom : niveau de zoom initial min-zoom : niveau de zoom minimal max-zoom : niveau de zoom maximal user-zoom : zoom par interaction de l utilisateur (ne jamais utiliser la valeur { width: device-width; }

21 Le zoom Attention! initial-scale=1.0, maximum-scale=1.0 vaut user-scalable=no Pour résoudre des bugs de zoom en cas de changement d orientation, privilégier : <meta name="viewport" content="width=device-width, initial-scale=1.0" { width: device-width; zoom: 1; }

22 L agrandissement du texte

23 L agrandissement du texte Unité em dans les media queries + design élastique Permet d appliquer les points de rupture en cas de fort zoom Bénéfices Aucune perte d information garantie en cas de fort zoom Voire pas de scroll horizontal, même en cas de fort zoom

24 L ouverture d une nouvelle fenêtre

25 L ouverture d une nouvelle fenêtre Certains navigateurs mobiles limitent le nombre d onglets pouvant être ouverts simultanément Limiter autant que possible l ouverture de liens dans une nouvelle fenêtre (ou un nouvel onglet) Limiter autant que possible les scripts provoquant l ouverture d une nouvelle fenêtre Soigner l avertissement des utilisateurs en cas d ouverture pareille (l attribut title risque de ne pas suffire )

26 Conclusion

27 Conclusion 71,8 % des utilisateurs de lecteur d écran en utilisent sur un périphérique mobile (source : Entre avril et septembre 2013, 54,2 % des Suisses ont utilisé un smartphone, 29,7 % une tablette (source : Les périphériques mobiles ont souvent un lecteur d écran fourni nativement Possibilité de connexion Bluetooth aux plages braille

28 Conclusion Le responsive Web design, c est bon, mangez-en! Les périphériques mobiles peuvent mettre aussi dans des situations de handicap Les critères d accessibilité sont toujours pertinents, quels que soient les supports de consultation Les périphériques mobiles et le responsive Web design apportent un éclairage renouvelé sur certains critères d accessibilité Le responsive Web design : opportunité de servir les mêmes contenus et les mêmes fonctionnalités, indépendamment du périphérique, illustrant l unicité et l universalité du Web L accessibilité du Web concerne des périphériques de plus en plus variés

29 Conclusion et ce n est pas fini!

30 Merci! Lien vers le support de présentation Crédits (Morgane Hervé, CC BY-NC-SA) (Morgane Hervé, CC BY-NC-SA) (ShakataNaGai, CC BY-SA) (chippee, CC BY) (Evan-Amos, domaine public) (Ted Eytan, CC BY-SA) Licence de ce support de présentation Creative Commons BY-SA