Designing for Accessibility/Designer pour l'accessibilité

From a talk at KiwiParty in June 2014

Translation by Stéphanie Walter

Transcript

1. @laurakalbag laurakalbag.com
2. @laurakalbag laurakalbag.com
3. Designing for accessibility (universal design, inclusive design Designer pour l'accessibilité (design universel, conception inclusive
4. Are you are developer or a designer? Êtesvous un designer ou un développeur?
6. = =
7. designing for accessibility isn’t just for “designers” concevoir des sites accessibles n'est pas réservé aux “designers”
8. What is accessibility? Qu'est ce que l'accessibilité?
9. Accessibility is the degree to which a website is available to as many people as possible. L'accessibilité permet de concevoir un site consultable par un maximum d'utilisateurs possible.
10. accessibility isn’t just about screen readers L'accessibilité ne concerne pas que les lecteurs d'écrans
13. Shiny Shiny
14. Is it because we don’t understand who we’re trying to help? Estce parce que nous ne comprenons pas qui nous essayons d'aider?
15. Is it because we just don’t know what to do? Estce parce nous ne savons tout simplement pas quoi faire?
16. Is it because it’s too hard, and there’s too much to think about? Estce parce que c'est difficile et qu'il faut prendre en compte beaucoup plus de paramètres?
17. I’ve not got the answers Je n'ai pas vraiment les réponses
18. It’s not fair if the web isn’t accessible C'est injuste si le Web n'est pas accessible
20. Design decisions made in the name of accessibility will largely benefit everyone. Un design conçu en prenant en compte l'accessibilité profitera largement au plus grand nombre.
21. The business case £€$ L'analyse de rentabilité
22. Améliorer l'accessibilité a doublé les ventes d'assurancevie en ligne pour Legal & General http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility doubled Legal and General’s life insurance sales online
23. Améliorer l'accessibilité a augmenté les livraisons à domicile de l'épicerie en ligne Tesco de 16 millions € en 2005 http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Tesco’s grocery home delivery sales by £13M in 2005
24. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Virgin.net sales by 68% Améliorer l'accessibilité a augmenté les ventes de Virgin.net de 68%
25. €€€€€€€€€€€€€€€€€€€€ €€€€€€€€€€€€€€€€€€€€ €€€€€€€€€€€€€€€€€€€€
26. The four (main) types of disability that affect use of the web Les 4 (principaux) types de handicaps affectant les utilisateurs sur le web
27. Visual Visuel
28. Hearing Auditif
29. Motor Moteur
30. Cognitive Cognitif
31. None of these disabilities are completely
    black and white Quand on parle de défiscience, ce n’est jamais “tout ou rien”
32. mild
    ! moderate
    ! moderately severe
    ! severe
    ! profound hearing surdité légère
    ! surdité moyenne
    ! surdité moyennement sévère ! surdité sévère
    ! surdité profonde auditif
33. astigmatism
    ! sensitivity
    ! colour blindness
    ! akinetopsia
    ! blindness eyesight astigmatisme ! photophobie ou “Hypersensibilité visuelle” ! daltonisme ! akinétopsie ! cécité acuité visuelle
35. Visual make it easy to read Visuel facilitez la lecture
36. Hearing make it easy to hear Audition facilitezen l’écoute
37. Motor make it easy to interact Moteur facilitez les interactions
38. make it easy to understand and focus Cognitive facilitez la compréhension et l’attention Cognitif
39. Good accessibility is good usability Une meilleure accessibilité équivaut à une meilleure utilisabilité
40. Examples Exemples
41. Disclaimer Je suis navrée si certains de ces sites sont vos créations, mon but n'est pas d'être méchante.
42. Text Texte
46. Squinting does not make an enjoyable reading experience Devoir plisser les yeux ne rend pas la lecture agréable
47. 1. Make text content easy to read. 2. Ensure sensible font sizes. 3. Don’t prevent the user from resizing the fonts themselves in the browser. 1. Rendez le texte facile à lire. 2. Assurezvous que la taille des polices soit suffisante. 3. N'empêchez pas le redimensionnement des polices par l'utilisateur dans le navigateur
51. Et donc ça signifie quoi tout ça? What’s that supposed to mean?
52. Good copy is a part of good accessibility. Keep your text simple and your meaning clear. Un texte bien écrit fait partie de l'accessibilité. Gardez votre texte simple et facilement compréhensible
53. Colour Couleur
56. Your screen isn’t the same as everybody else’s screens Votre écran est différent de celui de votre voisin
57. 1. Use colour contrast tools to ensure your text is high- contrast enough. 2. Beware of super-high contrast too. 1. Vérifiez que votre texte a suffisamment de contraste avec les outils de mesure de contraste de couleur adéquats 2. Méfiezvous également des contrastes très élevés.
58. Content hierarchy Hiérarchie de contenu
59. Voici un titre de niveau supérieur Voici un paragraphe avec du texte à l'intérieur. Il est long de quelques phrases, beaucoup de paragraphes se présentent sous cette forme. Voici un titre de niveau 2 Voici un paragraphe qui contient quelques liens vers d’autres contenus, ainsi qu'un bouton qui permet d'effectuer une action.
60. Voici un titre de niveau supérieur Voici un paragraphe avec du texte à l'intérieur. Il est long de quelques phrases, beaucoup de paragraphes se présentent sous cette forme.
    Voici un titre de niveau 2.
    Voici un paragraphe qui contient quelques liens vers d’autres contenus, ainsi qu'un bouton qui permet d'effectuer une action
61. Randomly enlarging and colouring text does not make a hierarchy. Agrandir ou colorer son texte de manière anarchique ne permet pas de créer une hiérarchie
62. 1. Make the content structure clear and consistent. 2. Use semantic headings, labels, lists and other relevant elements for your HTML or native controls. 1. Créez une structure de contenu claire et constante. 2. Utilisez des titres sémantiques, des labels, des listes et tous les autres éléments qui seront pertinents avec votre HTML ou contrôles natifs
63. Links Liens
64. Sometimes the links are the same colour and style as the rest of the text and you only find out it’s a link when you hover over it. Les liens sont parfois de la même couleur et avec un style similaire au reste du texte si bien que l'on ne se rend compte que c'est un lien qu'une fois qu'il est survolé
65. Sometimes the links are the same colour and style as the rest of the text and you only find out it’s a link when you hover over it. Les liens sont parfois de la même couleur et avec un style similaire au reste du texte si bien que l'on ne se rend compte que c'est un lien qu'une fois qu'il est survolé.
66. Finding interactive elements should not be a game. Trouver les éléments cliquables ne devrait pas être un jeu de cache-cache
67. 1. Make buttons and interactive elements easyily distinguishable from non-interactive elements. 2. Make links easy to recognise by using an underline. 1. Faites en sorte que les boutons et éléments cliquables se distinguent des autres éléments non interactifs 2. Rendez les liens facilement identifiables en les soulignant
70. Why should I click there? Pourquoi devraisje cliquer ici?
71. 1. Use link text that makes sense out of context. Don’t use “click here”. 2. Remember that not all your users are clicking. 1. Utilisez des ancres de lien qui ont une signification même hors contexte. N'utilisez pas "Cliquez ici". 2. Souvenezvous que tous vos utilisateurs ne cliquent pas.
72. Alt text Texte Alternatif
75. Provide text alternatives for images that helps a user understand the context of the image. Proposez des alternatives textuelles pour les images qui aideront les utilisateurs à comprendre le contexte de l'image
76. Media Média
77. No, I don’t want to listen to your podcast or watch your video tutorial. Give me text! Non je ne veux pas écouter votre podcast ou regarder votre tutoriel vidéo. Donnezmoi du texte!
78. 1. Provide text transcripts for audio. 2. Provide subtitles for video. 1. Proposez des transcriptions textuelles pour les média audio. 2. Proposez des soustitres pour les vidéos.
79. JavaScript
83. 1. Use JavaScript with care and load it in a sensible place. 2. If your web site or app needs JavaScript, ensure you use WAI ARIA to guide assistive technologies. 1. Utilisez le JavaScript avec précaution et chargezle de manière appropriée 2. Si votre site ou application a besoin de JavaScript pour fonctionner, assurezvous d'utiliser WAI ARIA pour que ce soit reconnaissable et utilisable par les technologies d'assistance
84. Navigation and way-finding Navigation et signalétique
87. The days of flash are over, stop punishing me with your artsy navigation. Les jours de gloire de Flash sont terminés, arrêtez de me punir avec votre navigation fantaisiste
88. Provide consistent ways to help users navigate, find content, and determine where they are. La manière pour l'utilisateur de naviguer, de trouver du contenu et de savoir où il se trouve doit être cohérente tout au long du site
89. Forms Formulaires
90. First name
    ! ! Last name
    ! ! Email address
    ! Laura Kalbag email@laurakalbag.com
92. Don’t make me guess what and where the error is. Ne me demandez pas de deviner ce qu'est mon erreur et où elle se trouve
93. Animations
95. Wait for me! Attendezmoi!
96. 1. Give users enough time to read and use content 2. Try not to distract users from their goals with unstoppable animations 1. Donnez aux utilisateurs suffisamment de temps pour lire et utiliser les contenus 2. Essayer de ne pas distraire les utilisateurs de leur but final avec des animations qu'ils ne pourront arrêter
97. Resources Ressources
109. I need proof that accessible sites aren’t just ugly Il me faut des preuves que les sites accessibles ne sont pas tous moches
118. Consider accessibility at every point of planning. It is functionality, content hierarchy, copy, visual design and code. Prenez en compte l'accessibilité à chaque étape du planning : des fonctionnalités au code en passant par la hiérarchie des contenus, le texte et la charte graphique.
119. Accessibility as default L'accessibilité par défaut
120. Accessibility is easy to consider once you start caring about it. L'accessibilité est très facile à prendre en compte dans un projet à partir du moment où l'on commence à s'en soucier.
121. Laura Kalbag @laurakalbag laurakalbag.com