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

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

Responsive Web design,périphériques mobiles et

accessibilité

Page 2: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Qui suis-je ?

Victor BritoSitué près de Paris, dans la France non voisineIntégrateur HTML / CSS freelanceExpert Accessiweb en évaluationIntervient sur la relecture des référentiels AccessiwebSe cache derrière Un seul Web un-seul-web.fr et Tuyaux de l’accessibilité tuyauxa11y.infoPortfolio : victor-brito.frTwitter : @victorbritopro

Page 3: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Ce dont il va être question

Périphériques mobiles et responsive Web design : un regard opportun surl’accessibilité du Web

Périphériques mobiles et responsive Web design comme révélateurs deproblèmes d’accessibilité

Des critères d’accessibilité négligés sur desktop qui sont révélés surpériphériques mobiles

Page 4: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

L’information ne doit pas être véhiculéeuniquement par la couleur

Page 5: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

L’information ne doit pas être véhiculéeuniquement par la couleur

Le noir et blanc n’est pas tout à fait mort !

Page 6: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Les formats pour le multimédia

Page 7: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

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

Page 8: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Le contrôle des limites de temps

Page 9: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

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

Page 10: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Le JavaScript

Page 11: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

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 commesi JavaScript était désactivé

En cas d’alternative à JavaScript, s’assurer de sa pertinence

Page 12: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Les Captchas

Page 13: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Les Captchas

Impact sur les écrans à haute densité de pixels (iPhone 4, iPad 3 et biend’autres périphériques mobiles…)

Fournir des versions d’images Captcha adaptées à ces écrans ou privilégierd’autres alternatives (opération arithmétique, question… ou rien du tout)

Page 14: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Les liens d’évitement

Page 15: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Les liens d’évitement

Facilite la navigation sur des écrans plus petits, même quand on est unutilisateur valide

Et surtout…

Page 16: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Les liens d’évitement

… évite la tendinite du pouce !

Page 17: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Le zoom

Page 18: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

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 règle@viewport (CSS, standard en devenir)

Page 19: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

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 lavaleur no !)

<meta name="viewport" content="width=device-width" />

Page 20: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Le zoom

Règle @viewport

width : définition des largeurs minimales et maximales du viewport (raccourcipour 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 valeurfixed !)

@viewport { width: device-width;}

Page 21: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

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" />

@viewport { width: device-width; zoom: 1;}

Page 22: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

L’agrandissement du texte

Page 23: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

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

Page 24: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

L’ouverture d’une nouvelle fenêtre

Page 25: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

L’ouverture d’une nouvelle fenêtre

Certains navigateurs mobiles limitent le nombre d’onglets pouvant être ouvertssimultanément

Limiter autant que possible l’ouverture de liens dans une nouvelle fenêtre (ouun nouvel onglet)

Limiter autant que possible les scripts provoquant l’ouverture d’une nouvellefenêtre

Soigner l’avertissement des utilisateurs en cas d’ouverture pareille (l’attributtitle risque de ne pas suffire…)

Page 26: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Conclusion

Page 27: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Conclusion

71,8 % des utilisateurs de lecteur d’écran en utilisent sur un périphériquemobile (source : http://webaim.org/projects/screenreadersurvey4/#mobile)

Entre avril et septembre 2013, 54,2 % des Suisses ont utilisé un smartphone,29,7 % une tablette(source : http://www.net-metrix.ch/fr/produits/net-metrix-base/publication)

Les périphériques mobiles ont souvent un lecteur d’écran fourni nativement

Possibilité de connexion Bluetooth aux plages braille

Page 28: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Conclusion

Le responsive Web design, c’est bon, mangez-en !

Les périphériques mobiles peuvent mettre aussi dans des situations dehandicap

Les critères d’accessibilité sont toujours pertinents, quels que soient lessupports de consultation

Les périphériques mobiles et le responsive Web design apportent un éclairagerenouvelé sur certains critères d’accessibilité

Le responsive Web design : opportunité de servir les mêmes contenus et lesmê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…

Page 29: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Conclusion

… et ce n’est pas fini !

Page 30: Responsive Web design, périphériques mobiles et accessibilité

Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014

Merci !

Lien vers le support de présentationhttp://www.victor-brito.fr/slides/craw2014

Créditshttps://www.flickr.com/photos/68720132@N05/8364165786/ (Morgane Hervé, CC BY-NC-SA)https://www.flickr.com/photos/68720132@N05/14221296235/ (Morgane Hervé, CC BY-NC-SA)http://commons.wikimedia.org/wiki/File:Amazon_Kindle_-_Wikipedia.jpg (ShakataNaGai, CC BY-SA)https://www.flickr.com/photos/chippee/7089977541/ (chippee, CC BY)http://commons.wikimedia.org/wiki/File:Blackberry-Bold-9650-Verizon.jpg (Evan-Amos, domaine public)https://www.flickr.com/photos/taedc/8714927697/ (Ted Eytan, CC BY-SA)

Licence de ce support de présentationCreative Commons BY-SA http://creativecommons.org/licenses/by-sa/3.0/deed.fr