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

Click here to load reader

  • date post

    28-Nov-2014
  • Category

    Internet

  • view

    360
  • download

    0

Embed Size (px)

description

Avec la diversité grandissante des périphériques de consultation de sites web, notamment des périphériques mobiles (smartphones et tablettes, entre autres), et l'essor du responsive web design, non seulement la question de l'accessibilité du Web demeure, mais les périphériques mobiles et le responsive web design apportent surtout un regard opportun sur l'accessibilité du Web…

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

  • 1. Responsive Web design, priphriques mobiles et accessibilit
  • 2. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Qui suis-je? Victor Brito Situ prs de Paris, dans la France non voisine Intgrateur HTML / CSS freelance Expert Accessiweb en valuation Intervient sur la relecture des rfrentiels Accessiweb Se cache derrire Un seul Web un-seul-web.fr et Tuyaux de laccessibilit tuyauxa11y.info Portfolio: victor-brito.fr Twitter: @victorbritopro
  • 3. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Ce dont il va tre question Priphriques mobiles et responsive Web design: un regard opportun sur laccessibilit du Web Priphriques mobiles et responsive Web design comme rvlateurs de problmes daccessibilit Des critres daccessibilit ngligs sur desktop qui sont rvls sur priphriques mobiles
  • 4. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Linformation ne doit pas tre vhicule uniquement par la couleur
  • 5. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Linformation ne doit pas tre vhicule uniquement par la couleur Le noir et blanc nest pas tout fait mort!
  • 6. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Les formats pour le multimdia
  • 7. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Les formats pour le multimdia Flashboud par la plupart des OS mobiles (iOS en tte) Utiliser les lments HTML 5 audio et video pour le multimdia Animations CSS 3 pour des animations
  • 8. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le contrle des limites de temps
  • 9. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le contrle 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 tche Permettre aux utilisateurs de contrler chaque limite de temps Laisser aux utilisateurs le soin de rafrachir eux-mmes une page Web
  • 10. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le JavaScript
  • 11. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le JavaScript En situation de mobilit, les connexions Wifi et 4G sont (toujours) du luxe Le JavaScript, mme activ, peut ne pas se charger compltement Sassurer que lessentiel des fonctionnalits du site Web est disponible comme si JavaScript tait dsactiv En cas dalternative JavaScript, sassurer de sa pertinence
  • 12. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Les Captchas
  • 13. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Les Captchas Impact sur les crans haute densit de pixels (iPhone 4, iPad 3 et bien dautres priphriques mobiles) Fournir des versions dimages Captcha adaptes ces crans ou privilgier dautres alternatives (opration arithmtique, question ou rien du tout)
  • 14. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Les liens dvitement
  • 15. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Les liens dvitement Facilite la navigation sur des crans plus petits, mme quand on est un utilisateur valide Et surtout
  • 16. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Les liens dvitement vite la tendinite du pouce!
  • 17. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le zoom
  • 18. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le zoom Zoom graphique prdominant sur les priphriques mobiles Zoom paramtrable via la mta viewport (HTML, pas standard) ou la rgle @viewport (CSS, standard en devenir)
  • 19. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le zoom Mta viewport width: dfinition 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 lutilisateur (ne jamais utiliser la valeur no!)
  • 20. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le zoom Rgle @viewport width: dfinition 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 lutilisateur (ne jamais utiliser la valeur fixed!) @viewport { width: device-width; }
  • 21. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Le zoom Attention ! initial-scale=1.0, maximum-scale=1.0vaut user-scalable=no Pour rsoudre des bugs de zoom en cas de changement dorientation, privilgier: @viewport { width: device-width; zoom: 1; }
  • 22. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Lagrandissement du texte
  • 23. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Lagrandissement du texte Unit em dans les media queries + design lastique Permet dappliquer les points de rupture en cas de fort zoom Bnfices Aucune perte dinformation garantie en cas de fort zoom Voire pas de scroll horizontal, mme en cas de fort zoom
  • 24. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Louverture dune nouvelle fentre
  • 25. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Louverture dune nouvelle fentre Certains navigateurs mobiles limitent le nombre donglets pouvant tre ouverts simultanment Limiter autant que possible louverture de liens dans une nouvelle fentre (ou un nouvel onglet) Limiter autant que possible les scripts provoquant louverture dune nouvelle fentre Soigner lavertissement des utilisateurs en cas douverture pareille (lattribut title risque de ne pas suffire)
  • 26. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Conclusion
  • 27. Confrence Romande sur lAccessibilit du Web, Lausanne, 17 juin 2014 Conclusion 71,8 % des utilisateurs de lecteur dcran en utilisent sur un priphrique mobile (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 priphriques mobile