Une touche d’accessibilité et d’ergonomie dans vos projets - Frasnes, belgique, mai 2018

Conférence présentée à l'espace CoWorking de Frasnes, Belgique, en mai 2018 sur l'accessibilité et l'ergonomie pour des porteurs de projet et des entrepreneurs.

Transcript

1. Une touche d’accessibilité et d’ergonomie dans vos projets Benoit Henry (@bhenbe) - Frasnes le 7 mai 2018
2. Une tendance ? Un nouvel argument de vente ? Un nouveau motif pour se défenestrer ?
3. Un enjeu social. Une obligation légale. Des outils et services plus simples. (?)
4. ça dépend... Séduire Être performant Rester simple Informer Rassurer Répondre aux besoins Se différencier
5. «[...] Sam passe neuf heures par jour sur le web. Il aime la recherche et la vérification des faits. L'Internet lui permet de trouver des informations sur presque n'importe quoi dans le monde. » Extrait de Laura Kalbag «Accessibilité pour tous.»
6. Ergonomie: étude de la relation entre l’homme et une application, un site et la mise en oeuvre de ces connaissances pour offrir un maximum de confort, de sécurité et d’efficacité. Merci Wikipédia.
7. Accessibilité: adaptation des systèmes numériques dont les sites web aux différents types de handicap et développement d'outils spécifiques comme les loupes ou claviers visuels. Merci Wikipédia.
8. Cinq principaux domaines d'invalidité affectent notre utilisation de sites et d’applications: les déficiences visuelles, les déficiences auditives, les déficiences motrices, les déficiences cognitives et les troubles vestibulaires et crises épileptiques. Extrait de Laura Kalbag «Accessibilité pour tous.»
9. Déficiences visuelles anomalies de la vision qui affectent la perception des couleurs, perte partielle ou totale de la vision (pour ex: glaucome) Déficiences auditives perte partielle ou totale d’audition > difficulté à écouter un fichier son ou consulter une vidéo Déficiences motrices ou physiques problèmes musculaires et articulaires à divers degrés, amputation > difficultés à utiliser un clavier et incapacité à utiliser un smartphone
10. Déficiences cognitives problèmes de mémoire difficultés à se concentrer difficultés à traiter des informations et résoudre des problèmes difficultés à comprendre des textes (pour ex: dyslexie) difficultés à résoudre des problèmes mathématiques (captcha) difficultés à interpréter des informations visuelles (pour ex: dyslexie) analphabétisme Troubles vestibulaires sensibilité parfois aiguë aux animations (pour ex: parallax)
11. Si vous désirez en savoir plus: https://www.w3.org/WAI/intro/people-use-web/diversity
12. L’invalidité est une perte de capacité mais ne peut pas uniquement être assimilée à un handicap. Au quotidien, nous faisons face à des situations où nos capacités sont diminuées d’une manière ou d’une autre : situation inconfortable, réseau faible ou inexistant, contexte bruyant et peu favorable à la concentration, etc.
13. Internet s’invite désormais à tout moment de la journée par le biais de nos smartphones et nos tablettes. Nous sommes rarement en capacité de faire sans. Non mais, sincèrement, osez me dire le contraire...
14. L’ergonomie et l’accessibilité s’adressent donc à tout le monde et consistent à offrir la meilleure expérience possible à vos audiences, quelles qu’elles soient et dans n’importe quelle situation. Et ça, c’est beau.
15. Améliorez vos pages web ! S’il vous plaît.
16. Quelques principes à retenir
17. Le contenu prime sur tout le reste. Un contenu qui n’est pas clair, attractif, pertinent et adapté au critères de recherche de l’utilisateur a moins de chance d’avoir un impact positif sur vos audiences.
18. Vous dialoguez avec des humains ! Vos utilisateurs ont des sentiments, des réactions inattendues, absurdes et dénuées de toute logique. Faites-vous une raison...
19. Le javascript n’est pas votre ennemi. Beaucoup pensent à tort que le langage Javascript est la cause de bon nombre de problèmes d’accessibilité. C’est tout le contraire et il solutionne divers manques.
20. Ne vous demandez plus Comment ça marche ? Demandez-vous plutôt Comment ça foire ? Merci Jeremy Keith.
21. Le responsive n’est plus une option.
22. L’accessibilité n’est pas l’opposée du design.
23. Ne tentez pas de réinventer ce qui n’a pas lieu d’être. Modifier un acquis pour un effet de style ou se distinguer risque plus de susciter de l’inconfort que son contraire.
24. La palette couleur
25. Une palette cohérente et… accessible. Définissez une palette couleur à la fois cohérente avec votre identité et adaptée aux problèmes que peuvent rencontrer vos audiences. Un bon contraste est gage de réussite mais cela ne se résume pas à du noir et blanc. Vous disposez de latitude ! http://carbondesignsystem.com/style/colors/swatches
26. Evitez les arrière-plans trop complexes Assurez-vous toujours de la qualité de lecture de vos textes et surtout si ceux-ci se superposent à des images. Des arrière-plans complexes sont très prisés mais diminuent le confort de lecture. Si vous n’êtes pas en capacité d’offrir un contraste optimal, optez pour des tailles de texte plus grandes et grasses. https://www.ideta.be
27. Les textes
28. Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ? Non mais, sincèrement, vous auriez envie de lire un texte écrit comme ça en ligne ?
29. Optez pour des typos qui ont du rythme et pas trop de caractère, sans mauvais jeu de mots, mais avec beaucoup de caractères, par contre ! Parfois plus adaptées pour des phrases courtes. Parfois idéales pour des textes longs. Peut-être plus pour des titres.
30. Il convient de présenter vos textes avec une largeur comprise entre 50 et 70 caractères, d’une taille de caractère de 16px minimum et d’une hauteur de ligne de 1.4, soit 1,4 fois la hauteur de caractère. Vos lecteurs vous remercieront.
31. Guidez le lecteur. Utilisez des titres ! Nous lisons rarement des articles complets en ligne. Pire, certaines pages qui semblent kilométriques nous découragent instantanément. Pour des contenus plus long, n’hésitez pas à scinder vos paragraphes par des titres qui résument leur teneur. Le lecteur sautera d’un titre à l’autre et lira les paragraphes qui l’interpèlent, ni plus ni moins. https://deardesignstudent.com/a-designers-code-of-ethics-f4a88aca9e95
32. Certains problèmes se règlent plus facilement avec des modules OpenDyslexic pour Chrome remplace vos typos pour favoriser la lecture des dyslexiques.
33. Les marges
34. Aérez vos contenu. Créez une grille. Les marges permettent de distinguer visuellement les différents éléments de contenu qui organisent vos pages web. Elles sont devenu un élément de design à part entière et facilitent la lecture quand elles sont utilisées correctement. Ces marges, associées à une structure de page (grille) sont aussi appelées gouttières. https://medium.com/
35. Pensez tactile ! Les écrans tactiles ont changé la donne ces dernières années. Prévoyez des boutons de taille acceptable (minimum 44px) et séparez-les afin d’éviter les “mauvais clics” qui frustrent. N’oubliez pas qu’un écran tactile ne reproduit pas les effets de survol. Vos interfaces doivent être intuitives sans prendre en compte cette fonctionnalité. Design inventory - http://atomicdesign.bradfrost.com
36. La navigation
37. La navigation au clavier Chaque page doit disposer d’un lien pour accéder directement au contenu principal de la page en cours. Votre barre de navigation doit être accessible au clavier (via la tabulation) et proposer un ordre de navigation cohérent. https://www.smashingmagazine.com/
38. Des liens que l’on identifie clairement Un lien doit fournir une information claire sur son objectif. On assimile souvent le fait d’ajouter du texte caché pour les liseuses d’écran à une lien comme une des priorités de l’accessibilité. Il n’en est rien. Il convient surtout de fournir une information précise, textuellement et visuellement, à l’ensemble de vos liens afin de lever toute ambiguïté sur sa fonction. https://www.viget.com/articles/visual-loudness/
39. Barre de navigation Une barre de navigation doit refléter la structure de votre site tout comme le ferait un plan de site. Cette démarche va aider vos audiences à mieux appréhender les contenus proposés. Votre navigation se doit d’être claire, descriptive et aussi brève que possible. Une navigation trop complexe risque toujours de dérouter voire effrayer vos lecteurs.
40. Le chemin de site Un moteur de recherche nous amène le plus souvent à une page interne d’un site web et le chemin de site est un atout majeur pour se situer rapidement. Il permet aussi de mieux faire comprendre la relation qu’il peut y avoir entre des pages. Il répond donc aux problèmes que peuvent rencontrer des personnes qui souffrent de troubles de la mémoire ou qui ne disposent pas d’un espace favorable à la concentration. Vous êtes ici !
41. Les icônes
42. Pour un mieux, associez vos icônes à du texte. Même si la plupart des icônes ont été assimilées par le plus grand nombre, le bénéfice qu’elles offrent en terme de place dans un design est à double tranchant.
43. Les formulaires
44. Simplifiez vos formulaires !
45. Un bon formulaire est... Un formulaire aussi simple que possible. Des champs adaptés au clavier et à la souris comme au tactile. Des labels placés idéalement afin de les associer aux champs qu’ils décrivent. Des alertes claires à des moments opportuns et des messages d’erreur qui ne laissent place à aucune interrogation. https://www.smashingmagazine.com/
46. Un formulaire doit être pratique et intuitif. Vous ne tirerez aucun bénéfice à ce qu’il soit visuellement complexe. Si le design de vos pages est trop élaboré ou inutile, prévoyez un nouveau modèle de page dédié à votre formulaire. Si votre formulaire semble trop complexe et rébarbatif au premier coup d’oeil, scindez-le en étapes. L’application Slack a opté pour cette solution lorsque l’on s’identifie. Cette façon de faire offre une illusion de simplicité très agréable.
47. Les listes déroulantes Les listes déroulantes sont des éléments complexes pour les écrans tactiles. Les listes de pays ou les sélections de dates provoquent parfois beaucoup de frustration. D’autres listes, plus courtes, gagneraient à être remplacées par des boutons radio ou des checkbox. Quoi qu’il en soit, le javascript offre ici de fiers services en permettant de placer des listes de suggestions, des sélecteurs de date et plus d’interaction entre des champs (date de début -> date de fin, pour exemple).
48. Le rendu pour impression
49. On oublie souvent ce que l’on ne voit pas. Pour autant, ne vous est-il jamais arrivé de pester en voyant le résultat d’une page web imprimée ? Une consommation inutile d’encre et de papier… Tout le monde est susceptible de vouloir imprimer une page pour diverses raisons : une alternative aux favoris, une documentation annexe à un travail ou un service complémentaire offert à vos clients. https://www.felix-immobilier.fr/
50. Les pages d’erreur
51. Les designers ont la fâcheuse habitude de transformer les pages 404 en oeuvres d’art sans se soucier de leur utilité. Ne faites pas de ces pages des cul-de-sac à l’intérêt uniquement visuel. Proposez des liens et un moteur de recherche pour les aider à se sortir de là. Airbnb flat 404
52. Ce design de Twitter reste une référence et à juste titre car il propose aussi à l’internaute de vérifier pourquoi cette erreur a lieu. Un visuel sympathique aide à faire passer la pilule quand quelque chose va mal mais il ne peut pas fonctionner seul. Ici comme sur l’ensemble de votre présence web, le contenu prime sur le design. https://twitter.com
53. Les performances
54. Un site se doit d’être performant et d’afficher l’information attendue en un minimum de temps. Même si cela parait logique, ce n’est pas toujours évident à mettre en place. Divers facteurs peuvent ralentir le chargement de vos pages : des images ou des vidéos trop lourdes, des contenus externes, un mauvais hébergeur, une mauvaise connexion internet, etc. Ou comment se la péter grave.
55. Si vous ne pouvez pas influer sur la lourdeur de certains de vos contenus, il convient alors de fournir à vos audiences l’illusion que l’information est sur le point d’apparaître. Une animation de chargement vous offre un sursis supplémentaire et rend vos lecteurs plus indulgents quant au délai d’affichage de vos contenus tant que celui-ci reste raisonnable. Il en est de même pour la soumission de vos formulaires, commentaires, avis, etc.
56. Il existe beaucoup de solutions techniques… Faites confiance aux professionnels. Mais pas trop. Ils tombent parfois amoureux d’une solution qu’ils maîtrisent. Ne prenez pas tout pour argent comptant. Des outils gratuits peuvent vous aider : https://gtmetrix.com/ https://developers.google.com/speed/pagespeed/insights/ https://www.woorank.com/fr
57. PRENEZ LE TEMPS DE TESTER VOTRE SITE
58. Collectez et prenez le temps d’analyser les retours de vos utilisateurs humains
59. N’oubliez jamais que votre site actuel n’est que la version beta de votre futur site ! Ne frustrez pas vos audiences actuelles. Ne jetez pas ce qui plaît. Améliorez ce qui peut l’être !
60. Merci de m’avoir subi. Benoit Henry (ce n’est pas moi sur la photo) contact@bhen.be