Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Designing for Accessibility/Designer pour l'acc...

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

Laura Kalbag

June 13, 2014
Tweet

More Decks by Laura Kalbag

Other Decks in Design

Transcript

  1. = =

  2. designing for accessibility isn’t just for “designers” concevoir des sites

    accessibles n'est pas réservé aux “designers”
  3. 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.
  4. 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?
  5. Is it because we just don’t know what to do?

    Estce parce nous ne savons tout simplement pas quoi faire?
  6. 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?
  7. 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.
  8. 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
  9. 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
  10. The four (main) types of disability that affect use of

    the web Les 4 (principaux) types de handicaps affectant les utilisateurs sur le web
  11. None of these disabilities are completely black and white Quand

    on parle de défiscience, ce n’est jamais “tout ou rien”
  12. 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
  13. astigmatism ! sensitivity ! colour blindness ! akinetopsia ! blindness

    eyesight astigmatisme ! photophobie ou “Hypersensibilité visuelle” ! daltonisme ! akinétopsie ! cécité acuité visuelle
  14. make it easy to understand and focus Cognitive facilitez la

    compréhension et l’attention Cognitif
  15. Disclaimer Je suis navrée si certains de ces sites sont

    vos créations, mon but n'est pas d'être méchante.
  16. 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
  17. 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
  18. Your screen isn’t the same as everybody else’s screens Votre

    écran est différent de celui de votre voisin
  19. 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.
  20. 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.
  21. 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
  22. 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
  23. 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
  24. 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é
  25. 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é.
  26. Finding interactive elements should not be a game. Trouver les

    éléments cliquables ne devrait pas être un jeu de cache-cache
  27. 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
  28. 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.
  29. 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
  30. 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!
  31. 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.
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. I need proof that accessible sites aren’t just ugly Il

    me faut des preuves que les sites accessibles ne sont pas tous moches
  38. 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.
  39. 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.