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
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
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
L’information ne doit pas être véhiculéeuniquement par la couleur
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 !
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Les formats pour le multimédia
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
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Le contrôle des limites de temps
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
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Le JavaScript
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
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Les Captchas
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)
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Les liens d’évitement
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…
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Les liens d’évitement
… évite la tendinite du pouce !
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Le zoom
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)
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" />
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;}
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;}
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
L’agrandissement du texte
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
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
L’ouverture d’une nouvelle fenêtre
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…)
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Conclusion
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
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…
Conférence Romande sur l’Accessibilité du Web, Lausanne, 17 juin 2014
Conclusion
… et ce n’est pas fini !
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