$30 off During Our Annual Pro Sale. View Details »

Designing for Accessibility/Designer pour l'accessibilité

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. @laurakalbag laurakalbag.com

    View Slide

  2. @laurakalbag laurakalbag.com

    View Slide

  3. Designing for accessibility
    (universal design, inclusive design
    Designer pour l'accessibilité
    (design universel, conception inclusive

    View Slide

  4. Are you are developer or a designer?
    Êtesvous un designer ou un développeur?

    View Slide

  5. View Slide

  6. =
    =

    View Slide

  7. designing for accessibility isn’t
    just for “designers”
    concevoir des sites accessibles
    n'est pas réservé aux “designers”

    View Slide

  8. What is accessibility?
    Qu'est ce que l'accessibilité?

    View Slide

  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.

    View Slide

  10. accessibility isn’t just about screen readers
    L'accessibilité ne concerne pas que
    les lecteurs d'écrans

    View Slide

  11. View Slide

  12. View Slide

  13. Shiny Shiny

    View Slide

  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?

    View Slide

  15. Is it because we just don’t know
    what to do?
    Estce parce nous ne savons tout
    simplement pas quoi faire?

    View Slide

  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?

    View Slide

  17. I’ve not got the answers
    Je n'ai pas vraiment les réponses

    View Slide

  18. It’s not fair if the web isn’t accessible
    C'est injuste si le Web n'est pas accessible

    View Slide

  19. View Slide

  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.

    View Slide

  21. The business case
    £€$
    L'analyse de rentabilité

    View Slide

  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

    View Slide

  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

    View Slide

  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%

    View Slide

  25. €€€€€€€€€€€€€€€€€€€€
    €€€€€€€€€€€€€€€€€€€€
    €€€€€€€€€€€€€€€€€€€€

    View Slide

  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

    View Slide

  27. Visual
    Visuel

    View Slide

  28. Hearing
    Auditif

    View Slide

  29. Motor
    Moteur

    View Slide

  30. Cognitive
    Cognitif

    View Slide

  31. None of these disabilities are completely
    black and white
    Quand on parle de défiscience, ce n’est jamais
    “tout ou rien”

    View Slide

  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

    View Slide

  33. astigmatism
    !
    sensitivity
    !
    colour blindness
    !
    akinetopsia
    !
    blindness
    eyesight
    astigmatisme
    !
    photophobie ou
    “Hypersensibilité visuelle”
    !
    daltonisme
    !
    akinétopsie
    !
    cécité
    acuité visuelle

    View Slide

  34. View Slide

  35. Visual make it easy to read
    Visuel facilitez la lecture

    View Slide

  36. Hearing make it easy to hear
    Audition facilitezen l’écoute

    View Slide

  37. Motor make it easy to interact
    Moteur facilitez les interactions

    View Slide

  38. make it easy to understand
    and focus
    Cognitive
    facilitez la compréhension
    et l’attention
    Cognitif

    View Slide

  39. Good accessibility is good usability
    Une meilleure accessibilité équivaut à une
    meilleure utilisabilité

    View Slide

  40. Examples
    Exemples

    View Slide

  41. Disclaimer
    Je suis navrée si certains de ces sites sont vos
    créations, mon but n'est pas d'être méchante.

    View Slide

  42. Text
    Texte

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. Squinting does not make an
    enjoyable reading experience
    Devoir plisser les yeux ne rend
    pas la lecture agréable

    View Slide

  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

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. Et donc ça signifie quoi tout ça?
    What’s that supposed to mean?

    View Slide

  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

    View Slide

  53. Colour
    Couleur

    View Slide

  54. View Slide

  55. View Slide

  56. Your screen isn’t the same as
    everybody else’s screens
    Votre écran est différent
    de celui de votre voisin

    View Slide

  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.

    View Slide

  58. Content hierarchy
    Hiérarchie de contenu

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  63. Links
    Liens

    View Slide

  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é

    View Slide

  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é.

    View Slide

  66. Finding interactive elements
    should not be a game.
    Trouver les éléments cliquables ne
    devrait pas être un jeu de cache-cache

    View Slide

  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

    View Slide

  68. View Slide

  69. View Slide

  70. Why should I click there?
    Pourquoi devraisje cliquer ici?

    View Slide

  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.

    View Slide

  72. Alt text
    Texte Alternatif

    View Slide

  73. View Slide

  74. View Slide

  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

    View Slide

  76. Media
    Média

    View Slide

  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!

    View Slide

  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.

    View Slide

  79. JavaScript

    View Slide

  80. View Slide

  81. View Slide

  82. View Slide

  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

    View Slide

  84. Navigation and way-finding
    Navigation et signalétique

    View Slide

  85. View Slide

  86. View Slide

  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

    View Slide

  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

    View Slide

  89. Forms
    Formulaires

    View Slide

  90. First name
    !
    !
    Last name
    !
    !
    Email address
    !
    Laura
    Kalbag
    [email protected]

    View Slide

  91. View Slide

  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

    View Slide

  93. Animations

    View Slide

  94. View Slide

  95. Wait for me!
    Attendezmoi!

    View Slide

  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

    View Slide

  97. Resources
    Ressources

    View Slide

  98. View Slide

  99. View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. View Slide

  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

    View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. View Slide

  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.

    View Slide

  119. Accessibility as default
    L'accessibilité par défaut

    View Slide

  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.

    View Slide

  121. Laura Kalbag
    @laurakalbag laurakalbag.com

    View Slide