Designing for Accessibility/Designer pour l'accessibilité

95b99419138620c939f1582fc0cd8b9b?s=47 Laura Kalbag
June 13, 2014

Designing for Accessibility/Designer pour l'accessibilité

From a talk at KiwiParty in June 2014

Translation by Stéphanie Walter

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

June 13, 2014
Tweet

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?
  5. None
  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
  11. None
  12. None
  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
  19. None
  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
  34. None
  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

  43. None
  44. None
  45. None
  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
  48. None
  49. None
  50. None
  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

  54. None
  55. None
  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
  68. None
  69. None
  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

  73. None
  74. None
  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

  80. None
  81. None
  82. None
  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

  85. None
  86. None
  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
  91. None
  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

  94. None
  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

  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  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
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  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