{"id":8197,"date":"2022-10-18T00:29:56","date_gmt":"2022-10-17T22:29:56","guid":{"rendered":"https:\/\/stephaniewalter.design\/fr\/?p=8197"},"modified":"2024-08-05T13:31:14","modified_gmt":"2024-08-05T11:31:14","slug":"documenter-accessibilite-en-phase-de-design","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/","title":{"rendered":"Documenter l\u2019accessibilit\u00e9 en phase de design !"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 4 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Les besoins en termes d\u2019accessibilit\u00e9 sont, aujourd\u2019hui encore trop souvent pris en compte en fin de projet. Voire carr\u00e9ment pas du tout pris en compte du tout. Les interactions utilisateur et l\u2019accessibilit\u00e9 sont peu, ou pas document\u00e9es c\u00f4t\u00e9 design. Ou pas livr\u00e9s aux \u00e9quipes de d\u00e9veloppement. Et <strong>r\u00e9gler plus tard des soucis d\u2019accessibilit\u00e9, co\u00fbte bien plus cher que si on les avait \u00e9vit\u00e9s d\u00e8s le d\u00e9but<\/strong>.<\/p>\n<p>Une documentation efficace aide les \u00e9quipes \u00e0 impl\u00e9menter les besoins d\u2019accessibilit\u00e9 de la bonne mani\u00e8re, d\u00e8s le d\u00e9part. Je vous explique <strong>pourquoi<\/strong> et <strong>comment documenter<\/strong> <strong>diff\u00e9rents aspects de l\u2019accessibilit\u00e9<\/strong> <strong>d\u00e8s la phase de design<\/strong>, pour cr\u00e9er des produits plus inclusifs. Je propose \u00e9galement sur ma boutique un un <a href=\"https:\/\/shop.stephaniewalter.design\/b\/kit-de-documentation-annotation-accessibilite-pour-designer\">Kit de Documentation Accessibilit\u00e9 et Interactions<\/a> pour aider vos \u00e9quipes au quotidien.<\/p>\n<p><em>Cet article est une version texte d\u2019une conf\u00e9rence donn\u00e9e \u00e0 <span lang=\"en\">DevFest<\/span> Nantes en 2022. La <a href=\"#devfestvideo\">vid\u00e9o de la conf\u00e9rence \u00e0 cet \u00e9v\u00e8nement est disponible \u00e0 la fin de l&rsquo;article<\/a>.<br \/>\n<\/em><\/p>\n<h2>Un atelier sur le sujet?<\/h2>\n<p>Pour 2023, je pr\u00e9pare une version atelier de cette conf\u00e9rence. Ca serait un atelier sans doute en ligne, en fran\u00e7ais, avec de la th\u00e9orie et des exercices pratiques pour concevoir et documenter des maquettes accessibles. J&rsquo;ai r\u00e9par\u00e9 un formulaire en ligne, laissez-y moi votre email et je pourrai vous recontacter quand l&rsquo;atelier sera pr\u00eat pour les inscriptions (il ne s&rsquo;agit en aucun cas d&rsquo;une pr\u00e9inscription)<\/p>\n<p class=\"cta text-center\"><a href=\"https:\/\/sendfox.com\/lp\/36knrj\" class=\"button is-accentuated has-icon\"><span>Laisser mon email pour avoir plus d&#039;informations <svg aria-hidden=\"true\" role=\"presentation\" class=\"icon icon-arrow-right\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><use xlink:href=\"#icon-arrow-right\"><\/use><\/svg><\/span><\/a><\/p>\n<h2>Pourquoi r\u00e9gler plus tard des soucis d&rsquo;accessibilit\u00e9 qu\u2019on pourrait \u00e9viter d\u00e8s le d\u00e9but ?<\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8230\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/01-pourquoi-fixer-accessibilite-plus-tard-1.jpg\" alt=\"Des lunettes cass\u00e9es r\u00e9par\u00e9es avec du ruban adh\u00e9sif brillant et de la colle\" width=\"1062\" height=\"594\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/01-pourquoi-fixer-accessibilite-plus-tard-1.jpg 1062w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/01-pourquoi-fixer-accessibilite-plus-tard-1-768x430.jpg 768w\" sizes=\"(max-width: 1062px) 100vw, 1062px\" \/><\/p>\n<p>Aujourd\u2019hui encore, de nombreux sites n&rsquo;ont pas \u00e9t\u00e9 con\u00e7us (ou m\u00eame d\u00e9velopp\u00e9s) sans prendre en compte les besoins d\u2019accessibilit\u00e9 d\u00e8s le d\u00e9but du projet. Et beaucoup de designeuses et designers pensent encore que \u00ab\u00a0l&rsquo;accessibilit\u00e9 c\u2019est le travail de l&rsquo;\u00e9quipe de d\u00e9veloppement\u00a0\u00bb.<\/p>\n<p>Les entreprises mettent en ligne des produits et services inaccessibles. Et tout le monde se dit qu\u2019ils r\u00e8gleront les probl\u00e8mes d\u2019accessibilit\u00e9 plus tard. Ou si quelqu\u2019un se plaint (je l\u2019ai d\u00e9j\u00e0 entendu). Et c\u2019est bien <strong>trop tard<\/strong>. Quand le site n\u2019a pas \u00e9t\u00e9 design\u00e9 et d\u00e9velopp\u00e9 en prenant en compte l\u2019accessibilit\u00e9 d\u00e8s le d\u00e9but, <strong>les corrections seront plus compliqu\u00e9es et souvent plus co\u00fbteuses<\/strong>.<\/p>\n<p>Un peu comme sur cette photo : on ne peut pas r\u00e9parer les lunettes cass\u00e9es avec du ruban adh\u00e9sif. M\u00eame s\u2019il a des paillettes !<\/p>\n<p>Ma question est la suivante : <strong>Pourquoi r\u00e9gler plus tard des soucis d&rsquo;accessibilit\u00e9 qu\u2019on pourrait \u00e9viter d\u00e8s le d\u00e9but ?<\/strong><\/p>\n<p>C&rsquo;est pourquoi nous devons <strong>sensibiliser les \u00e9quipes \u00e0 l&rsquo;accessibilit\u00e9 plus t\u00f4t dans le projet<\/strong>. Lorsque chacune et chacun devient responsable de l&rsquo;accessibilit\u00e9, la plupart des probl\u00e8mes peuvent \u00eatre identifi\u00e9s et r\u00e9solus tr\u00e8s t\u00f4t dans le projet.<\/p>\n<p>Et je pense qu\u2019une fa\u00e7on d\u2019y parvenir est de <strong>documenter l\u2019accessibilit\u00e9, d\u00e8s la phase de design.<\/strong><\/p>\n<h2>Comment et o\u00f9 documenter l&rsquo;accessibilit\u00e9 (et les interactions) ?<\/h2>\n<h3>Des annotations d&rsquo;accessibilit\u00e9 dans les maquettes et la documentation de design<\/h3>\n<p>Comme je prends des exemples tir\u00e9s de mes projets, je vais vous en expliquer la structure. C\u00f4t\u00e9 design, nous utilisons Sketch et nous travaillons sur 2 fichiers :<\/p>\n<ul>\n<li>Un fichier de <strong>documentation des composants<\/strong> qui est notre design system, o\u00f9 le fonctionnement de chaque composant est d\u00e9crit en d\u00e9tail. Ce fichier est utilis\u00e9 comme librairie Sketch.<\/li>\n<li>Un fichier de <strong>documentation des page<\/strong>s. Nous utilisons les composants du 1er fichier, pour designer des pages d\u00e9taill\u00e9es.<\/li>\n<\/ul>\n<p>Les liens vers la documentation de composants, ou de pages, sont mis dans Jira pour que les \u00e9quipes de d\u00e9veloppement puissent inspecter les maquettes Sketch.<\/p>\n<p>Je documente beaucoup en utilisant des <strong>annotations<\/strong>, en contexte, directement sur les maquettes<\/p>\n<h3>Documentation au niveau des composants<\/h3>\n<p>Voici un exemple de documentation, au niveau des composants.<\/p>\n<div id=\"attachment_8231\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-8231\" class=\"wp-image-8231 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/02.annotations-01-1.jpg\" alt=\"Documentation d\u00e9taill\u00e9e des composants avec des annotations\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/02.annotations-01-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/02.annotations-01-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><p id=\"caption-attachment-8231\" class=\"wp-caption-text\">\u00c0 gauche : un exemple de composant avec diff\u00e9rents \u00e9tats. A droite : mes symboles de composants.<\/p><\/div>\n<p>A gauche, un exemple d\u2019une documentation de composant d\u00e9taill\u00e9e pour un filtre de recherche, avec diff\u00e9rents \u00e9tats. A droite, un exemple de mes symboles Sketch utilis\u00e9s pour la documentation.<\/p>\n<p>Pour aider les \u00e9quipes de d\u00e9veloppement \u00e0 comprendre <strong>comment le composant fonctionne en termes d\u2019interactions et d&rsquo;accessibilit\u00e9<\/strong>, j&rsquo;ai plac\u00e9 des <strong>annotations<\/strong> directement sur la maquette. Ce sont les petites fl\u00e8ches en rose sur ma maquette, les annotations de clavier et le texte autour du composant.<\/p>\n<p>Je me suis rendu compte que ce type de documentation est bien <strong>plus efficace<\/strong> pour communiquer ce qui est attendu que de devoir lire long ticket Jira tr\u00e8s verbeux. Ici la documentation est visuelle, \u00e9tape par \u00e9tape.<\/p>\n<p>Dans Sketch, je me suis cr\u00e9\u00e9 <strong>une librairie de symboles pour ces annotations<\/strong>. J&rsquo;ai des fl\u00e8ches, des puces avec des chiffres, des \u00e9l\u00e9ments d\u2019interaction clavier \/ souris, et des petites bo\u00eetes pour \u00e9crire du texte un peu plus long, etc.<\/p>\n<h3>Annotations directement au niveau de la page<\/h3>\n<p>J\u2019ai \u00e9galement parfois besoin d\u2019avoir des annotations directement sur les pages d\u00e9taill\u00e9es. Dans ce cas-l\u00e0 je duplique souvent la page.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-8232 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/02.annotations-02-1.jpg\" alt=\"Annotation au niveau de la page lorsque cela est n\u00e9cessaire\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/02.annotations-02-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/02.annotations-02-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/>J\u2019ai une version \u201cpropre\u201d sans annotations pour permettre facilement l\u2019inspection des styles J\u2019ai une version avec pleins de petites annotations pour les diff\u00e9rents d\u00e9tails dont nous avons besoin.<\/p>\n<p>Un conseil :\u00a0 lorsque vous cr\u00e9ez des annotations, assurez-vous que<strong> le style des annotations est diff\u00e9rent de votre charte<\/strong>.\u00a0 Les miens sont par exemple magenta sur ce projet, couleur non utilis\u00e9e dans le projet. Je veux \u00e9viter que les \u00e9quipes de d\u00e9veloppement n\u2019impl\u00e9mentent par erreur les annotations comme partie int\u00e9grante du produit. \u00c7a parait anecdotique, mais j\u2019ai d\u00e9j\u00e0 vu le cas.<\/p>\n<h3>Documenter en utilisant des annotations num\u00e9riques et commentaires en marge<\/h3>\n<p>En faisant des recherches pour cette conf\u00e9rence, je suis tomb\u00e9e sur \u00ab\u00a0<a lang=\"en\" href=\"https:\/\/www.behance.net\/gallery\/78024369\/Accessibility-Annotation-Examples\">Accessibility Annotation Examples<\/a>\u00a0\u00bb de Karen Hawkins.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8233\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/03.Karen-Annotations-1.jpg\" alt=\"Annotation d'accessibilit\u00e9 en rouge avec le pr\u00e9fixe (AR) dans la marge de droite, li\u00e9e \u00e0 de petits chiffres sur la maquette pour indiquer ce qui est annot\u00e9.\" width=\"1061\" height=\"471\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/03.Karen-Annotations-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/03.Karen-Annotations-1-768x341.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>J&rsquo;ai trouv\u00e9 son format de documentation \u00e9galement tr\u00e8s int\u00e9ressant. A gauche de la page, vous avez la maquette en fond, avec des petites notifications chiffr\u00e9es et des zones d\u00e9finies en bleu. A droite de la maquette, elle a le d\u00e9tail de la documentation pour chaque chiffre.<\/p>\n<p>D\u00e9tail int\u00e9ressant : les annotations de design sont en noir. Les annotations d\u2019accessibilit\u00e9 en rouge, pr\u00e9fix\u00e9es avec un petit (AR), pour permettre de les diff\u00e9rencier.<\/p>\n<p>D\u00e9terminer le meilleur format avec VOS \u00e9quipes<\/p>\n<p>Je vous ai montr\u00e9 deux exemples de documentation via des annotations : le mien, et Karen. La chose \u00e0 retenir : si vous voulez que votre documentation soit <strong>utile et utilis\u00e9e<\/strong>, <strong>demandez VOTRE \u00e9quipe ce qui lui conviendrait<\/strong>.<\/p>\n<p>On peut imaginer de nombreux formats. Par exemple :<\/p>\n<ul>\n<li>Des d\u00e9tails dans les tickets Jira<\/li>\n<li>Une documentation d\u00e9taill\u00e9e dans Confluence<\/li>\n<li>Une documentation s\u00e9par\u00e9e dans un document Word ou Excel.<\/li>\n<li>Utiliser les commentaires Figma directement pour la documentation, etc.<\/li>\n<\/ul>\n<p>Pour moi, il s&rsquo;agit encore une fois de conna\u00eetre <strong>le meilleur format pour VOTRE \u00e9quipe<\/strong>.\u00a0 Discutez-en !<\/p>\n<h3>La documentation n\u2019est PAS un substitut \u00e0 la communication avec vos \u00e9quipes !<\/h3>\n<p>Et souvenez-vous d&rsquo;une chose : <strong>la documentation n\u2019est pas faite pour remplacer la communication directe entre les \u00e9quipes<\/strong> !!\u00a0 Il est toujours important de <strong>pr\u00e9senter les maquettes et la documentation en personne<\/strong> quand vous le pouvez.<\/p>\n<p>Dans notre \u00e9quipe, nous avons des r\u00e9unions hebdomadaires C\u2019est l\u00e0 o\u00f9 les \u00e9quipes de d\u00e9veloppement vont montrer les d\u00e9mos de ce qui a \u00e9t\u00e9 produit.\u00a0 Et moi, je pr\u00e9sente les maquettes, la documentation, et discute des sp\u00e9cifications dans ce que nous appelons des \u00ab\u00a0sessions d&rsquo;alignement\u00a0\u00bb.<\/p>\n<h2>Qu\u2019est-ce que les \u00e9quipes de design peuvent documenter ?<\/h2>\n<p>Il est temps d\u2019entrer dans des exemples concrets : qu\u2019est-ce que les \u00e9quipes de design peuvent et devraient documenter ? Pour nous aider, j\u2019ai divis\u00e9 le document en 4 cat\u00e9gories diff\u00e9rentes : Aspect Visuel, Elements Interactifs \/ Interactions, Signalisation et Contenu Alternatif &amp; Balisage S\u00e9mantique.<\/p>\n<h3>Documenter l\u2019aspect visuel<\/h3>\n<p>Commen\u00e7ons par la documentation de l\u2019aspect visuel.<\/p>\n<h4>Palette de couleur et rapports de contraste<\/h4>\n<p>La premi\u00e8re chose que les designeuses peuvent documenter est la <strong>palette de couleurs<\/strong>.<\/p>\n<p>Pour m\u2019aider \u00e0 d\u00e9finir les combinaisons possibles, qui auront un rapport de contraste suffisant quand on les utilise ensemble, je peux cr\u00e9er <a href=\"https:\/\/contrast-grid.eightshapes.com\/?version=1.1.0&amp;background-colors=%23FFFFFF%2C%20White%0D%0A%23FEDC2A%2C%20Yellow%0D%0A%235A3B5D%2C%20Dark%20Purple%0D%0A%238B538F%2C%20Light%20Purple%0D%0A%23C3A3C9%2C%20Lightst%20purple%0D%0A%23777777%2C%20Gray%0D%0A%23555555%2C%20Darker%20Gray%0D%0A%0D%0A&amp;foreground-colors=%23FFFFFF%2C%20White%0D%0A%23FEDC2A%2C%20Yellow%0D%0A%235A3B5D%2C%20Dark%20Purple%0D%0A%238B538F%2C%20Light%20Purple%0D%0A%23C3A3C9%2C%20Lightst%20purple%0D%0A%23777777%2C%20Gray%0D%0A%23555555%2C%20Darker%20Gray%0D%0A%23444444%2C%20Darker%20%20Darker%20Gray%0D%0A%23333333%2C%20Fifty%20Shades%20of%20darker%20gray%0D%0A%23222222%2C%20Dorian%20Gray%3F&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;es-color-form__show-contrast=dnp\">une matrice de couleur<\/a><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-8234 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/04.matrice-de-couleurs-1.jpg\" alt=\"Matrice de couleurs avec les m\u00eames couleurs sur les axes x et y et leur rapport de contraste de couleurs lorsqu'elles sont utilis\u00e9es ensemble \u00e0 l'intersection\" width=\"1061\" height=\"628\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/04.matrice-de-couleurs-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/04.matrice-de-couleurs-1-768x455.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>Ici, nous avons une matrice, avec les m\u00eames couleurs sur l&rsquo;axe horizontal et vertical.<\/p>\n<p>L&rsquo;intersection des deux montre leur <strong>rapport de contraste<\/strong> lorsqu&rsquo;elles sont associ\u00e9es.<\/p>\n<p>Par exemple : je ne peux pas utiliser ce jaune comme texte sur fond blanc, mais je peux l&rsquo;associer \u00e0 un gris plus fonc\u00e9. Cette matrice m&rsquo;aide \u00e0 savoir si j\u2019aurai un rapport de contraste suffisant si j\u2019associe 2 couleurs de ma charte.<\/p>\n<p>\u00c7a peut \u00eatre int\u00e9ressant de mettre cette matrice \u00e0 disposition de toute l\u2019\u00e9quipe de design (ou de d\u00e9veloppement) quelque part dans le design syst\u00e8me pour les aider \u00e0 comprendre les associations possibles.<\/p>\n<h4>Combinaisons de couleur sp\u00e9cifiques<\/h4>\n<p>Au niveau du design system, j\u2019ai aussi tendance \u00e0 documenter de mani\u00e8re sp\u00e9cifi\u00e9 l\u2019utilisation de certaines couleurs : <strong>qu\u2019est ce qui est permis et non permis<\/strong>.<\/p>\n<p>Ici vous avez un exemple pour les statuts.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8259\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/05.documenation-couleurs-2.jpg\" alt=\"Quelles nuances de couleurs peut-on associer pour les statuts?\" width=\"1061\" height=\"637\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/05.documenation-couleurs-2.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/05.documenation-couleurs-2-768x461.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>Nous avons 4 variantes du vert pour le statut succ\u00e8s : dark, main, light et contrastText <em>(le nom de celui-l\u00e0 n\u2019a pas vraiment de sens mais il est repris du material UI du coup j\u2019ai le m\u00eame nom dans mon design system que c\u00f4t\u00e9 token d\u00e9veloppement.)<\/em><\/p>\n<p>J\u2019ai document\u00e9 <strong>quelles variantes peuvent \u00eatre utilis\u00e9es ensemble <\/strong>lorsque nous utilisons ces couleurs pour diff\u00e9rents statuts. Par exemple : on peut utiliser \u201ccontrastText\u201d (ou light) avec en couleur de fond la variante \u201cdark\u201d.<\/p>\n<h4>Sensibiliser les \u00e9quipes de design aux niveaux AA, AAA et rapports de contraste.<\/h4>\n<p>Une chose importante : toutes les designeuses ne connaissent pas forc\u00e9ment les notions de rapport de contraste, la signification de AA \/ AAA et le concept de petit et grand texte.<\/p>\n<p>Pensez \u00e0 les <strong>expliquer<\/strong> quelque part ou mettre un client vers des sources externes comme par exemple :<\/p>\n<ul>\n<li><a href=\"https:\/\/stephaniewalter.design\/fr\/blog\/accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible\/\">Accessibilit\u00e9 et couleurs : outils et ressources pour concevoir des produits accessibles<\/a><\/li>\n<li><a href=\"https:\/\/gerireid.com\/wcag-for-designers.html\" hreflang=\"en\">WCAG for Designers documentation<\/a><\/li>\n<li>La page (en anglais) de <a href=\"https:\/\/www.accessguide.io\/guide\/high-color-contrast\" hreflang=\"en\"><span lang=\"en\">accessguide <\/span>sur les contrastes<\/a><\/li>\n<\/ul>\n<h3>Documenter les \u00e9lements interactifs \/ interactions<\/h3>\n<h4>\u00c9tats et statuts des \u00e9l\u00e9ments interactifs<\/h4>\n<p>Pour les composants interactifs (par exemple, les boutons ou les \u00e9l\u00e9ments de formulaire), la premi\u00e8re chose que j&rsquo;essaie de documenter, ce sont <strong>les diff\u00e9rents \u00e9tats<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8236\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/06-interactions-1.jpg\" alt=\"Documentation pour les \u00e9tats des boutons et les \u00e9l\u00e9ments de formulaire\" width=\"1751\" height=\"493\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/06-interactions-1.jpg 1751w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/06-interactions-1-768x216.jpg 768w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/06-interactions-1-1536x432.jpg 1536w\" sizes=\"(max-width: 1751px) 100vw, 1751px\" \/>Dans mon exemple, \u00e0 gauche, pour les boutons, je documente :<\/p>\n<ul>\n<li>L\u2019\u00e9tat par d\u00e9faut<\/li>\n<li>Le survol<\/li>\n<li>Le focus<\/li>\n<li>L\u2019\u00e9tat actif<\/li>\n<li>\u00a0L\u2019\u00e9tat inactif<\/li>\n<\/ul>\n<p>L\u2019\u00e9tat <strong>focus<\/strong> est important pour l&rsquo;accessibilit\u00e9 car il permet aux utilisatrices qui naviguent au clavier de savoir o\u00f9 elles se trouvent dans une page.<\/p>\n<p>Pour les cases \u00e0 cocher, \u00e0 droite j\u2019ai document\u00e9 :<\/p>\n<ul>\n<li>D\u00e9faut (non coch\u00e9)<\/li>\n<li>Focus<\/li>\n<li>Coch\u00e9<\/li>\n<li>D\u00e9sactiv\u00e9<\/li>\n<li>D\u00e9sactiv\u00e9 coch\u00e9<\/li>\n<li>Ind\u00e9termin\u00e9<\/li>\n<li>D\u00e9sactiv\u00e9 ind\u00e9termin\u00e9<\/li>\n<\/ul>\n<p>Les deux derniers ne sont pas dans les sp\u00e9cifications HTML mais nous en avons besoin parfois sur des tableaux o\u00f9 la personne peut cocher plusieurs lignes. Idem pour les boutons radio, sauf qu&rsquo;ils ne sont pas ind\u00e9termin\u00e9s.<\/p>\n<p>Tout cela est document\u00e9 au niveau des composants.<\/p>\n<p>Pour les <strong>champs de formulaire<\/strong>, au niveau du composant, dans mon exemple de gauche, j&rsquo;ai quelques \u00e9tats g\u00e9n\u00e9riques : default, focus, rempli, readonly<\/p>\n<p>Mais j\u2019ai aussi besoin d\u2019\u00e9tats de statuts suppl\u00e9mentaires, par exemple :<\/p>\n<ul>\n<li>Erreur<\/li>\n<li>Succ\u00e8s<\/li>\n<li>Information<\/li>\n<\/ul>\n<p>Pensez \u00e9galement \u00e0<strong> ne pas utiliser la couleur comme seul moyen de transmission de l\u2019information<\/strong>. Dans mon exemple, j\u2019ai la couleur, mais aussi le texte et une ic\u00f4ne.<\/p>\n<p>Le composant de champ de formulaire est ensuite utilis\u00e9 dans des pages. Dans mon exemple \u00e0 droite j\u2019ai un champ utilis\u00e9 dans un filtre d\u2019ann\u00e9e. Au niveau de la page, j\u2019ai document\u00e9 de fa\u00e7on pr\u00e9cise :<\/p>\n<ul>\n<li>Ce qui <strong>d\u00e9clenche<\/strong> l&rsquo;erreur (= cas d&rsquo;erreur)<\/li>\n<li>Quel doit \u00eatre le <strong>message exact<\/strong> (texte)<\/li>\n<\/ul>\n<h4>Parcours d\u2019interactions : documenter comment ce composant doit fonctionner<\/h4>\n<p>Pour les composants complexes avec de nombreuses interactions, je construis des <strong>parcours <\/strong>(ou flux) <strong>d\u2019interactions<\/strong>\u201d. Cela documente la mani\u00e8re dont ces composants doivent fonctionner, lorsqu&rsquo;il y a diff\u00e9rentes interactions.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-8237 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/08-interactionflow-1.jpg\" alt=\"&quot;Comment doit-il fonctionner avec la navigation au clavier ?&quot; un exemple de parcours d'interactions \u00e0 la souris et clavier d'un composant annot\u00e9\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/08-interactionflow-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/08-interactionflow-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/>Commen\u00e7ons par <strong>l&rsquo;interaction \u00e0 la souris<\/strong>. Dans cet exemple, j&rsquo;ai un filtre avec des cases \u00e0 cocher. J&rsquo;ai <strong>document\u00e9 \u00e9tape par \u00e9tape<\/strong> ce qui se passe quand une utilisatrice<\/p>\n<ul>\n<li>Ouvre le filtre,<\/li>\n<li>Survole un \u00e9l\u00e9ment,<\/li>\n<li>Coche une case,<\/li>\n<li>Appuie sur le bouton <span lang=\"en\">Apply<\/span>, etc.<\/li>\n<\/ul>\n<p>En plus des interactions \u00e0 la souris, je documente \u00e9galement les <strong>interactions au clavier<\/strong>.<\/p>\n<p>Je me retrouve donc avec un parcours similaire, qui expliquera \u00e9galement la navigation au clavier dans ce composant :<\/p>\n<ul>\n<li>Comment ouvrir le filtre (entr\u00e9e\/espace), le fermer (esc)<\/li>\n<li>Comment naviguer entre les \u00e9l\u00e9ments (touche haut\/bas)<\/li>\n<li>Comment cocher une case<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>Si le composant a des raccourcis clavier (les miens n&rsquo;en ont pas), ce serait un bon endroit pour le documenter \u00e9galement.<\/p>\n<p>Quelques ressources pour les interactions au clavier<\/p>\n<ul>\n<li><a href=\"https:\/\/www.washington.edu\/accessibility\/checklist\/keyboard\/\">Designing for Keyboard Accessibility<\/a><\/li>\n<li><a href=\"https:\/\/tink.uk\/the-difference-between-keyboard-and-screen-reader-navigation\/\">The difference between keyboard and screen reader navigation<\/a><\/li>\n<li><a href=\"https:\/\/tetralogical.com\/blog\/2021\/10\/26\/browsing-with-a-keyboard\/\">Browsing with a keyboard<\/a><\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/keyboard\/#testing\">A table to help you with keyboard testing<\/a><\/li>\n<\/ul>\n<h4>Liens ambigus<\/h4>\n<p>Parfois, il n\u2019est pas \u00e9vident de \u201cdeviner\u201d <strong>quelle est la partie cliquable d\u2019un composant<\/strong>. Surtout lorsque le lien enveloppe un \u00e9l\u00e9ment complexe.<img decoding=\"async\" class=\"alignnone wp-image-8307 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/20-liens-explicites.jpg\" alt=\"Documenter \u2028les liens si n\u00e9cessaire - documentation d'une liste de liens pour expliciter o\u00f9 se trouve le lien\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/20-liens-explicites.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/20-liens-explicites-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/>Dans cet exemple, nous avons un composant qu\u2019on appelle \u201ctuile\u201d dans notre design system, avec 5 \u00e9l\u00e9ments de liste. Chacun se compose d\u2019une ic\u00f4ne, un titre, un identifiant et une petite fl\u00e8che \u00e0 droite.<\/p>\n<p>J\u2019utilise ici des <strong>annotations<\/strong> pour indiquer \u00e0 mes \u00e9quipes de d\u00e9veloppement que <strong>lien se trouve sur tout l\u2019\u00e9l\u00e9ment de liste<\/strong>. Je peux documenter \u00e7a sur les maquettes, ou dans un ticket Jira.<\/p>\n<h4>Alternatives pour les gestes complexes<\/h4>\n<p>Proposer des<strong> alternatives aux gestes complexes<\/strong> est une bonne pratique en mati\u00e8re d&rsquo;accessibilit\u00e9 et d\u2019ergonomie. Sont consid\u00e9r\u00e9s comme geste complexes, les geste avec plusieurs points de contacte qui requi\u00e8rent un mouvement (zoom avec deux doigts, <span lang=\"en\">swipe<\/span>\u2026)<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8238\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/09-gestes-complexes-1.jpg\" alt=\"Gestion complexe et 2 alternatives pour la fonction archive de gmail\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/09-gestes-complexes-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/09-gestes-complexes-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/>La fonction \u00ab\u00a0swipe vers la droite\u00a0\u00bb pour archiver dans Gmail en est un exemple. Si je devais documenter les alternatives \u00e0 Gmail, je pourrais faire la chose suivante :<\/p>\n<p>Le geste complexe : une maquette qui montre le swipe \u00e0 droite pour archiver.<\/p>\n<p>Puis deux alternatives<\/p>\n<ul>\n<li>Appuyez longuement sur le message pour afficher la barre d&rsquo;outils, puis appuyez sur l&rsquo;ic\u00f4ne d&rsquo;archivage.<\/li>\n<li>Ouvrir le message, puis appuyer sur l\u2019ic\u00f4ne d\u2019archivage en haut<\/li>\n<\/ul>\n<h4>Comportement au zoom<\/h4>\n<p>Une recommandation d\u2019accessibilit\u00e9 est de<strong> laisser les utilisatrices zoomer<\/strong> dans la page pour augmenter la taille du contenu <strong>jusqu\u2019\u00e0 200%<\/strong> sans que cela ne nuise \u00e0 la lisibilit\u00e9 des contenus. Ce comportement au zoom peut \u00e9galement \u00eatre document\u00e9, en particulier s\u2019il va avoir tendance \u00e0 changer la mise en page.<\/p>\n<p>Pour \u00eatre honn\u00eate, c\u2019est quelque chose que je ne documente pas forc\u00e9ment souvent pour les sites de nos jours, car nous construisons des sites responsive. Du coup j\u2019ai tendance \u00e0 demander aux \u00e9quipes de d\u00e9veloppement de <strong>NE PAS bloquer l&rsquo;agrandissement,<\/strong> de tester et v\u00e9rifier que tout s\u2019affiche bien \u00e0 200%<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8239\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/10-zoom-1.jpg\" alt=\"Exemple d'une application natif \u00e0 zoom 100% et 200%.\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/10-zoom-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/10-zoom-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>Mais je pense que cela peut \u00eatre tr\u00e8s utile pour les <strong>applications natives<\/strong> (qui ne profitent pas de toutes les technologies de CSS responsive qu\u2019on a sur le web).<\/p>\n<p>Cet exemple a \u00e9t\u00e9 pr\u00eat\u00e9 par Goulven Baron (Maif). Il a document\u00e9 le comportement de la vue mobile \u00e0 100% \u00e0 gauche et \u00e0 200% de zoom. Sur la vue \u00e0 200%, les boutons passent de 2 colonnes \u00e0 1 colonne.<\/p>\n<h4>R\u00e9duction des animations et mouvements<\/h4>\n<p>Les animations et les transitions sont un aspect du design qu&rsquo;il est assez difficile de documenter.<\/p>\n<p>Il existe \u00e9galement des bonnes pratiques en mati\u00e8re d\u2019accessibilit\u00e9 de ce c\u00f4t\u00e9-l\u00e0.<\/p>\n<p>Certaines animations et transitions peuvent <strong>d\u00e9clencher de la g\u00eane et des naus\u00e9es<\/strong> chez les utilisatrices. Par exemple, celles souffrant de troubles vestibulaires (j&rsquo;en fais partie d&rsquo;ailleurs ^^). Vous pouvez utiliser la media query prefers-reduced-motion pour fournir une version alternative aux personnes qui pr\u00e9f\u00e8rent moins d\u2019animations et de mouvement. Pour en apprendre plus sur le sujet, je vous renvoie \u00e0 <a href=\"https:\/\/stephaniewalter.design\/blog\/enhancing-user-experience-with-css-animations\/#accessibility\" hreflang=\"en\">la partie accessibilit\u00e9 de ma conf\u00e9rence sur les animations CSS et l\u2019exp\u00e9rience utilisateur (en anglais)<\/a><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8240\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/11-animations-mouvement-1.jpg\" alt=\"Mon site web et l'option Macbook de r\u00e9duction des mouvements qui supprimera certaines des animations.\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/11-animations-mouvement-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/11-animations-mouvement-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/>Un exemple sur ma page<a href=\"https:\/\/stephaniewalter.design\/\" hreflang=\"en\"> d\u2019accueil<\/a>. J\u2019ai en haut \u00e0 gauche une animation des 3 petits \u00e9l\u00e9ments (le renard, le sushi et la tasse) qui tournent autour de ma t\u00eate. Plus bas dans la page sur la partie \u201c<span lang=\"en\"><a href=\"https:\/\/stephaniewalter.design\/#blog\" hreflang=\"en\">I help people grow<\/a>\u201d<\/span>, j\u2019ai une plante qui pousse en SVG. Quand l\u2019utilisatrice a l\u2019option \u201creduce motion\u201d activ\u00e9, je retire l\u2019animation des 3 \u00e9l\u00e9ments flottants. Et j\u2019ai remplac\u00e9 la place qui grandit par une animation qui risque moins de d\u00e9clencher de la g\u00eane : une apparition en fade-in.<\/p>\n<p>Comment documenter cela ? Eh bien\u2026 c\u2019est un peu compliqu\u00e9.<\/p>\n<p>On peut <strong>d\u00e9crire les animations textuellement<\/strong>, ou faire un <strong>storyboard<\/strong> par exemple qui d\u00e9crit comment \u00e7a va fonctionner. On peut les <strong>prototyper<\/strong> avec des outils dans un certaine mesure (transitions Figma\/axure, voir after effect) Mais le plus simple reste de <strong>coconstruire les animations avec les \u00e9quipes de d\u00e9veloppement<\/strong>, et les affiner directement dans le navigateur<\/p>\n<p>Enfin, n\u2019oubliez pas non plus de pr\u00e9voir des <strong>boutons de lecture\/pause<\/strong> dans votre interface, si vous avez des vid\u00e9os \u00e0 d\u00e9clencher, ou des carrousels. Laissez le contr\u00f4le final \u00e0 vos utilisatrices !<\/p>\n<h4>Sch\u00e9mas de parcours utilisateur\u00a0 pour documenter les interactions entre les pages<\/h4>\n<p>Un dernier niveau de documentation est celui des interactions entre les pages.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8241\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/12-parcours-utilisateur-1.jpg\" alt=\"Sch\u00e9mas de parcours utilisateur pour documenter les interactions entre les pages \/ vues\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/12-parcours-utilisateur-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/12-parcours-utilisateur-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/>Les <strong>sch\u00e9mas de parcours utilisateur<\/strong> (ou <span lang=\"en\"><strong>user flow<\/strong><\/span>) \u00e0 gauche sont des sch\u00e9mas compos\u00e9s de bo\u00eetes et de fl\u00e8ches qui documentent<strong> la mani\u00e8re dont une personne accomplit une t\u00e2che<\/strong>. Ils listent les pages, les vues, les embranchements, etc. on les construit g\u00e9n\u00e9ralement au d\u00e9but du projet pour aider \u00e0 planifier ces pages et ces parcours.<\/p>\n<p>Les \u201c<strong><span lang=\"en\">screen flows<\/span><\/strong>\u201d (\u00e0 droite) sont \u00e0 peu pr\u00e8s la m\u00eame chose, mais \u00e0 la place des bo\u00eetes abstraites, on affiche les vraies maquettes des pages. On les construit g\u00e9n\u00e9ralement \u00e0 la fin, une fois que les tests utilisateur et discussions sur la faisabilit\u00e9 technique des maquettes (ou wireframes) sont termin\u00e9s.<\/p>\n<p>Les deux aident l&rsquo;\u00e9quipe de d\u00e9veloppement \u00e0 comprendre comment l\u2019utilisatrice navigue sur l&rsquo;ensemble de l&rsquo;interface.<\/p>\n<p>Ces deux livrables peuvent aider \u00e0 planifier diff\u00e9rentes choses niveau accessibilit\u00e9 :<\/p>\n<ul>\n<li>Les <strong>transitions entre les pages<\/strong>, notamment dans les SPAs (Single Page Application, ou application \u00e0 page unique) : assurez-vous qu&rsquo;elles ne cr\u00e9ent pas de g\u00eane ou naus\u00e9e<\/li>\n<li>Les <strong>alertes ou messages<\/strong> qui peuvent appara\u00eetre en haut d&rsquo;une page, par exemple lorsque l&rsquo;utilisateur passe \u00e0 la page suivante.<\/li>\n<li>Les<strong> parcours \u00e0 \u00e9tapes multiples<\/strong> (par exemple formulaires) o\u00f9 vous pr\u00e9voyez des dur\u00e9es de session. Notez que niveau accessibilit\u00e9, il vaut mieux \u00e9viter de limiter la dur\u00e9e d\u2019une session et laisser \u00e0 la personne le temps qu\u2019elle souhaite pour remplir les champs. Mais dans certains cas vous n\u2019avez pas le choix.<\/li>\n<\/ul>\n<h3>Documenter la signalisation<\/h3>\n<p>La signalisation, comme dans le code de la route, est la documentation des \u00e9l\u00e9ments qui aideront les personnes \u00e0 trouver leur chemin sur la page (navigation et autres).<\/p>\n<h4>Titre HTML des pages<\/h4>\n<p>Commen\u00e7ons par le <strong>titre de la page.<\/strong> Il est affich\u00e9 dans les <strong>onglets<\/strong> du navigateur.<\/p>\n<p>Il est \u00e9galement annonc\u00e9 par les <strong>lecteurs d&rsquo;\u00e9cran<\/strong>. Cela permet aux utilisatrices de savoir o\u00f9 elles se trouvent et ce qu&rsquo;elles peuvent s&rsquo;attendre \u00e0 trouver sur cette page.<\/p>\n<div id=\"attachment_8242\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-8242\" class=\"wp-image-8242 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/14-title-1.jpg\" alt=\"Une capture d'\u00e9cran d'une page Jira avec un tableau de titres en 3 colonnes : Titre de page HTML et exemple de titre HTML pour diff\u00e9rentes pages d'un projet.\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/14-title-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/14-title-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><p id=\"caption-attachment-8242\" class=\"wp-caption-text\">Exemple de tableau, o\u00f9 nous documentons la structure des titres de pages HTML et un exemple pour chacun d&rsquo;entre eux.<\/p><\/div>\n<p>Pour cela, sure mon projet, nous utilisons un ticket Jira (car nous n&rsquo;avons pas de confluence).\u00a0 Vous pouvez \u00e9galement documenter cela directement dans les maquettes.<\/p>\n<h4>Liens d\u2019\u00e9vitements<\/h4>\n<p>Les \u00e9quipes de design peuvent \u00e9galement documenter les<a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-skip.html\"> liens d\u2019\u00e9vitements<\/a>.<\/p>\n<p>Ce sont des liens qui sont (souvent mais pas toujours) \u00ab\u00a0invisibles\u00a0\u00bb par d\u00e9faut. Ils deviennent visibles quand quelqu\u2019un commence \u00e0 naviguer avec le clavier, et sont annonc\u00e9s par les lecteurs d&rsquo;\u00e9cran.<\/p>\n<p>Ces liens permettent aux utilisatrices de<strong> lecteurs d&rsquo;\u00e9cran de passer directement au contenu principal<\/strong> de la page (sans devoir passer dans la navigation par exemple)<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8243\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/15-liens-evitements-1.jpg\" alt=\"Exemple d'un lien d'\u00e9vitement sur un site de cuisine, qui montre que le lien renvoie \u00e0 la zone de contenu principal de la page.\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/15-liens-evitements-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/15-liens-evitements-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>Vous pouvez documenter<\/p>\n<ul>\n<li>o\u00f9 se trouve le lien<\/li>\n<li>\u00e0 quoi il ressemble lorsqu&rsquo;il prend le focus<\/li>\n<li>o\u00f9 il enverra l&rsquo;utilisatrice.<\/li>\n<\/ul>\n<h4>Landmarks<\/h4>\n<p>Les liens d&rsquo;\u00e9vitement envoyaient les utilisatrices vers une zone de ma page appel\u00e9e \u201cmain\u00a0\u00bb. Mais il existe d&rsquo;autres zones qui aident les utilisatrices de lecteurs d&rsquo;\u00e9cran \u00e0 s&rsquo;orienter sur la page : les<a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/example-index\/landmarks\/main.html\"> <strong>Aria Landmarks<\/strong><\/a>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-8245 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/16-landmarks-1.jpg\" alt=\"Exemple du site de document ARIA landmarks, qui documente les zones avec des annotations color\u00e9es.\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/16-landmarks-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/16-landmarks-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/>Avec l&rsquo;aide d&rsquo;expertes en accessibilit\u00e9, les \u00e9quipes de design peuvent \u00e9galement les documenter.<\/p>\n<h4>Niveaux de titres \u00e0 l\u2019int\u00e9rieur des pages<\/h4>\n<p>Une fois que l&rsquo;utilisatrice se trouve \u00ab\u00a0\u00e0 l&rsquo;int\u00e9rieur\u00a0\u00bb d&rsquo;une page, avoir les bons niveaux de titres HTML (<code>H1<\/code>, <code>H2<\/code>, etc.) est \u00e9galement tr\u00e8s important pour l\u2019accessibilit\u00e9.<\/p>\n<p>Je peux faire deux choses :<\/p>\n<ul>\n<li>Premi\u00e8rement, j&rsquo;ai l&rsquo;habitude de <strong>nommer directement mes styles <\/strong>avec le niveau de titre appropri\u00e9 afin que les autres designers puissent les r\u00e9utiliser (et que les \u00e9quipes de d\u00e9veloppement voient le nom lors de l\u2019inspection).<\/li>\n<li>Je peux aussi <strong>afficher le niveau de titre attendu avec une annotatio<\/strong>n sur la maquette.<\/li>\n<\/ul>\n<div id=\"attachment_8247\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-8247\" class=\"size-full wp-image-8247\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/17-niveaux-de-titre-1.jpg\" alt=\"Niveaux de titres \u00e0 l\u2019int\u00e9rieur des pages\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/17-niveaux-de-titre-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/17-niveaux-de-titre-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><p id=\"caption-attachment-8247\" class=\"wp-caption-text\">Dans cet exemple, j&rsquo;ai document\u00e9 un <code>H1<\/code> pour le titre de la recette, puis un <code>H2<\/code> pour les ingr\u00e9dients et les \u00e9tapes de pr\u00e9paration, etc.<\/p><\/div>\n<p>C&rsquo;est le genre de choses que vous pourriez \u00e9galement documenter avec les personnes charg\u00e9es du contenu (SEO, UX writers, etc.). Parfois, vous avez besoin d&rsquo;un niveau de titre, mais cela nuirait au r\u00e9f\u00e9rencement. Dans ce cas, vous pouvez utiliser les<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Attributes\/aria-level\"> aria-levels<\/a> (et une balise de paragraphe). V\u00e9rifiez avec vos d\u00e9veloppeurs. Si vous voulez un exemple, consultez le code de mon pied de page \u00ab\u00a0let&rsquo;s get in touch\u00a0\u00bb. Le titre est visuellement le m\u00eame que <code>H2<\/code>, mais cela n&rsquo;a aucun sens pour le r\u00e9f\u00e9rencement. Il a donc re\u00e7u un <code>role=\"heading\"<\/code> et un <code>aria-level=2<\/code> \u00e0 la place.<\/p>\n<h4>Ordre de navigation au clavier au niveau de la page<\/h4>\n<p>Certaines personnes naviguent sur un site sans souris, en <strong>utilisant le clavier<\/strong>. <strong>L&rsquo;ordre navigation au clavier<\/strong> doit suivre la logique du flux naturel de la page. Au niveau de la page, vous pouvez \u00e9galement documenter l&rsquo;ordre des \u00e9l\u00e9ments au focus.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-8244 size-full\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/16-focus-page-1.jpg\" alt=\"Ordre de navigation au clavier au niveau de la page: Un site web complexe avec des annotations pour montrer l'ordre de priorit\u00e9 au niveau des pages\" width=\"1490\" height=\"813\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/16-focus-page-1.jpg 1490w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/16-focus-page-1-768x419.jpg 768w\" sizes=\"(max-width: 1490px) 100vw, 1490px\" \/><\/p>\n<p>Mon exemple est tir\u00e9 d&rsquo;un<a href=\"https:\/\/www.figma.com\/community\/file\/984136149483735147\" hreflang=\"en\"> kit Figma cr\u00e9\u00e9 par l&rsquo;\u00e9quipe du Fluent Design System de Microsoft <\/a><\/p>\n<p>La maquette est affich\u00e9e \u00e0 l&rsquo;arri\u00e8re-plan. Par-dessus sont ajout\u00e9es des <strong>annotations<\/strong> pour <strong>documenter l\u2019ordre de navigation au clavier<\/strong> (avec leur correspondance dans la marge \u00e0 droite).<\/p>\n<p>Dans cet exemple, l\u2019utilisatrice parcourt la partie haute, puis entre dans la navigation de gauche. Elle passe ensuite par le lien de retour \u00e0 SharePoint, en bas de la navigation, avant d\u2019arriver dans le contenu principal \u00e0 droite.<\/p>\n<p>L\u00e0 encore, cette documentation n\u2019est pas forc\u00e9ment n\u00e9cessaire pour les pages simples. Mais lorsque vous commencez \u00e0 entrer dans ces applications m\u00e9tier complexes, avec beaucoup d\u2019\u00e9l\u00e9ments interactifs, elle peut \u00eatre int\u00e9ressante.<\/p>\n<h4>Ordre de tabulation au niveau des composants<\/h4>\n<p>Voici un autre exemple d&rsquo;une telle documentation au<strong> niveau d\u2019un composant<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8246\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/17-focus-composant-formulaire-1.jpg\" alt=\"Ordre de tabulation au niveau des composants: deux examples de documentation sur une modale, un example dans Sketch et un dans Figma avec le plugin a11y focus order \u00e0 cot\u00e9\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/17-focus-composant-formulaire-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/17-focus-composant-formulaire-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>J\u2019ai une modale, dans laquelle j\u2019ai un champ texte, puis, beaucoup de cases \u00e0 cocher. Je <strong>documente l&rsquo;ordre de tabulation <\/strong>\u00e0 travers tout le contenu de la modale :<\/p>\n<ul>\n<li>Le champ texte<\/li>\n<li>Les checkboxes dans un certain ordre<\/li>\n<li>Le bouton d\u2019annulation, puis confirmation<\/li>\n<li>La fermeture de la modale.<\/li>\n<\/ul>\n<p>Je pr\u00e9cise \u00e9galement que la modale doit \u00eatre refermable avec la touche echap.<\/p>\n<p>A gauche, un exemple de documentation faite \u201c\u00e0 la main\u201d dans Sketch. L\u00e0 encore, j\u2019utilise des annotations num\u00e9riques sur les champs pour indiquer l\u2019ordre attendu. A droite, j\u2019ai un exemple de documentation en utilisant <span lang=\"en\"><a href=\"https:\/\/www.figma.com\/community\/plugin\/731310036968334777\">A11Y Focus Order<\/a><\/span>, un plugin Figma (cr\u00e9\u00e9 par l\u2019\u00e9quipe de Microsoft). Il permet de s\u00e9lectionner les \u00e9l\u00e9ments et de leur donner un num\u00e9ro dans le plugin. On peut ensuite les r\u00e9ordonner si besoin.<\/p>\n<h3>Documenter le Contenu Alternatif &amp; Balisage S\u00e9mantique<\/h3>\n<h4>Alternatives aux images et annonces pour les lecteurs d\u2019\u00e9cran<\/h4>\n<p>Si les maquettes contiennent des <strong>images ou des ic\u00f4nes porteuses de sens<\/strong>, les \u00e9quipes de design peuvent \u00e9galement documenter ce que le lecteur d&rsquo;\u00e9cran doit annoncer.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8248\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/18-alt-image-01-1.jpg\" alt=\"Que doit annoncer le lecteur d\u2019\u00e9cran pour ces images ? Exemples de documentation pour une page d'en-t\u00eate de pizza. La pizza a un texte alternatif alors que les ic\u00f4nes n'en ont pas.\" width=\"880\" height=\"495\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/18-alt-image-01-1.jpg 880w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/18-alt-image-01-1-768x432.jpg 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>Dans mon exemple, j&rsquo;ai un site de recettes de cuisine avec une image d&rsquo;une tranche de pizza en haut de la page.<\/p>\n<p>J&rsquo;utilise des annotations pour documenter le texte alternatif de cette image :<\/p>\n<ul>\n<li>Une pastille avec un num\u00e9ro sur l\u2019image,<\/li>\n<li>Le d\u00e9tail de ce qui doit \u00eatre annonc\u00e9 dans l&rsquo;attribut alt est sur la droite<\/li>\n<\/ul>\n<p>J&rsquo;ai \u00e9galement 3 boutons : enregistrer, partager, noter (la recette). Chacun a une ic\u00f4ne accompagn\u00e9e d\u2019un label (ou \u00e9tiquette ). Dans mes annotations pour ces boutons,<strong> j&rsquo;explique que le lecteur d&rsquo;\u00e9cran ne doit PAS annoncer quoi que ce soit<\/strong> pour les ic\u00f4nes. Comme il y a d\u00e9j\u00e0 le label du bouton, dupliquer l\u2019information ne sert \u00e0 rien.<\/p>\n<p>Dans le second cas, je ne sais pas comment les \u00e9quipes de d\u00e9veloppement vont impl\u00e9menter les ic\u00f4nes. Je pr\u00e9f\u00e8re donc ne pas documenter exactement s&rsquo;il doit s&rsquo;agir d&rsquo;un alt vide, d\u2019un role= presentation, etc. Je pourrais discuter avec les \u00e9quipes, puis mettre \u00e0 jour la documentation pour refl\u00e9ter la fa\u00e7on dont cela serait mis en \u0153uvre.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8249\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/18-alt-image-02-1.jpg\" alt=\"Ce contenu \u2028va-t-il \u00eatre g\u00e9n\u00e9r\u00e9 par un CMS \/ outil WYSIWYG ? - Example d'un champ alt dans WordPress\" width=\"880\" height=\"495\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/18-alt-image-02-1.jpg 880w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/18-alt-image-02-1-768x432.jpg 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>Un petit d\u00e9tail : jusque-l\u00e0, je suis partie du principe qu\u2019on a une page statique et nous avons le contr\u00f4le sur les attributs alt. Mais dans le cas d&rsquo;un site de recettes de cuisine, il y a de fortes chances que ce contenu soit g\u00e9n\u00e9r\u00e9 par une utilisatrice, en utilisant une sorte de CMS (<span lang=\"en\">content management system<\/span>) ou \u00e9diteur WYSIWYG (<span lang=\"en\">what you see is what you get<\/span>). \u00c7a veut dire, qu\u2019il va falloir que <strong>les \u00e9quipes qui d\u00e9veloppent le CMS pr\u00e9voient ce champ alt pour les images<\/strong>.<\/p>\n<p>Je ne vais pas entrer plus dans les d\u00e9tails. Mais, si le sujet vous int\u00e9resse, sachez qu\u2019il y a des bonnes pratiques pour les \u00e9diteurs de contenus appel\u00e9s <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/atag\/\"><span lang=\"en\">ATAG : Authoring Tool Accessibility Guidelines<\/span><\/a>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8250\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/18-alt-image-03-1.jpg\" alt=\"Texte annonc\u00e9 pour les &quot;boutons ic\u00f4ne&quot;: les icones sont annot\u00e9es avec le texte de lecteur d'\u00e9cran dans la marge\" width=\"880\" height=\"495\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/18-alt-image-03-1.jpg 880w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/18-alt-image-03-1-768x432.jpg 768w\" sizes=\"(max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>Dans ce deuxi\u00e8me exemple, mes boutons n&rsquo;ont <strong>pas d\u2019\u00e9tiquettes visibles<\/strong>. J&rsquo;ai donc besoin d\u2019<strong>ajouter de l\u2019information pour que le lecteur d\u2019\u00e9cran les annonce<\/strong> :<\/p>\n<p>Avec mes annotations, j\u2019indique que :<\/p>\n<ul>\n<li>Le premier doit \u00eatre lu \u00ab\u00a0view graph\u00a0\u00bb (voir le diagramme)<\/li>\n<li>Le second doit \u00eatre lu \u00ab\u00a0view table\u201d (voir tableau)<\/li>\n<\/ul>\n<p>L\u00e0 encore, avec l&rsquo;aide de mon \u00e9quipe de d\u00e9veloppement, je pourrais aller plus loin et commencer \u00e0 documenter certains<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/ARIA_Techniques#states_and_properties\"> \u00e9tats <span lang=\"en\">ARIA states<\/span><\/a> (selected, etc.).<\/p>\n<h4>Ordre du contenu annonc\u00e9 (HTML) versus ordre visuel<\/h4>\n<p>Je peux \u00e9galement documenter<strong> l&rsquo;ordre du contenu annonc\u00e9<\/strong>. Ceci est int\u00e9ressant lorsque l&rsquo;ordre visuel est diff\u00e9rent de l\u2019ordre dans le HTML. Notez que la plupart du temps, on veut quand m\u00eame \u00e9viter \u00e7a, et on pr\u00e9f\u00e8re que l&rsquo;ordre annonc\u00e9 et l&rsquo;ordre visuel soient identiques. A utiliser avec pr\u00e9caution.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8251\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/19-ordre-contenu-annonce-1.jpg\" alt=\"Ordre du contenu annonc\u00e9 (HTML) vs ordre visuel (attention ici): un composant de carte avec un ordre annonc\u00e9 diff\u00e9rent de l'ordre visuel\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/19-ordre-contenu-annonce-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/19-ordre-contenu-annonce-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>Dans cet exemple, j\u2019ai une petite version du composant d\u2019aper\u00e7u d&rsquo;une recette de cuisine, sous forme de \u201ccarte\u201d La mise en page de la carte est verticale. L\u2019image est en haut avec le bouton \u201dSave\u201d par-dessus. En dessous, on retrouve, les cat\u00e9gories, le titre de la recette et le r\u00e9sum\u00e9.<\/p>\n<ul>\n<li>Je ne veux <strong>rien annoncer pour l\u2019image<\/strong>, car il sera utilis\u00e9 dans une page de r\u00e9sultats recherche et \u00e7a risque d\u2019\u00eatre redondant si le lecteur d\u2019\u00e9cran d\u00e9crit 30 pizzas. Mais l\u00e0 encore, certaines expertes vous diront qu\u2019il vaut mieux d\u00e9crire quand m\u00eame.<\/li>\n<li>Le titre doit \u00eatre annonc\u00e9 en premier. Il est gros, en gras dans mon design pour lui donner plus d\u2019importance visuelle. L\u2019annoncer en retranscrit cette hi\u00e9rarchie visuelle.<\/li>\n<li>Pour le bouton \u201cSave\u201d, m\u00eame s&rsquo;il est visuellement en haut (surtout pour gagner de l&rsquo;espace), il devrait \u00eatre en bas du HTML et annonc\u00e9 en dernier.<\/li>\n<\/ul>\n<p>Comment on pourrait impl\u00e9menter \u00e7a en HTML ? Marie Guillaumet, experte accessibilit\u00e9 chez <a href=\"https:\/\/access42.net\/\">Access42<\/a> vous explique :<\/p>\n<p>\u00ab\u00a0M\u00eame si le titre appara\u00eet visuellement apr\u00e8s les cat\u00e9gories, dans le code HTML, il faut le mettre au-dessus. De cette fa\u00e7on, le lecteur d&rsquo;\u00e9cran lira le titre, puis les cat\u00e9gories. Ensuite, vous utilisez le CSS pour inverser l&rsquo;ordre visuellement dans le composant\u00a0\u00bb.<\/p>\n<p>Pour aller plus loin : <a href=\"https:\/\/ux.shopify.com\/a-4-step-process-for-testing-the-accessibility-of-your-designs-17bc95bceafe\"><span lang=\"en\">A 4-step process for testing the accessibility of your designs<\/span><\/a><\/p>\n<h4>Contenu suppl\u00e9mentaire pour les lecteurs d&rsquo;\u00e9cran<\/h4>\n<p>Parfois, les utilisatrices de l<strong>ecteurs d&rsquo;\u00e9cran<\/strong> ont besoin d&rsquo;<strong>informations suppl\u00e9mentaires<\/strong>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8253\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/21-contenu-techno-assistance-1.jpg\" alt=\"Contenu suppl\u00e9mentaire pour les technologies d'assistance: example d'annonce suppl\u00e9mentaire pour des badges de notification de nouveaux documents et t\u00e2ches\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/21-contenu-techno-assistance-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/21-contenu-techno-assistance-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>Dans cet exemple, si j&rsquo;ai un badge de notification avec un certain nombre de \u201cnouveaux\u201d \u00e9l\u00e9ments sur ma navigation. Annoncer seulement le chiffre, sans pr\u00e9ciser qu\u2019il s\u2019agit de notifications de nouveaux \u00e9l\u00e9ments pourrait porter \u00e0 confusion.<\/p>\n<p>Je peux donc documenter <strong>ce qui devrait \u00eatre annonc\u00e9 pour diff\u00e9rents sc\u00e9narios<\/strong> :<\/p>\n<ul>\n<li>Aucun nouveau document (s&rsquo;il n&rsquo;y a pas de notification)<\/li>\n<li>5 nouveaux documents<\/li>\n<li>Pas de nouvelles t\u00e2ches<\/li>\n<li>5 nouvelles t\u00e2ches (au cas o\u00f9 j&rsquo;en aurais 5)<\/li>\n<\/ul>\n<h4>Documenter la s\u00e9mantique, avec l&rsquo;aide de d\u00e9veloppeurs et d&rsquo;experts en accessibilit\u00e9<\/h4>\n<p>Je vous ai principalement pr\u00e9sent\u00e9 la documentation que les<strong> \u00e9quipes de design<\/strong> peuvent produire. Mais, pour beaucoup d&rsquo;exemples, vous pourriez collaborer avec des \u00e9quipes de d\u00e9veloppement et d\u2019expertise en accessibilit\u00e9 pour ajouter des informations suppl\u00e9mentaires \u00e0 cette documentation, par exemple :<\/p>\n<ul>\n<li>Les \u00e9l\u00e9ments s\u00e9mantiques HTML corrects<\/li>\n<li>Les <code>ARIA role<\/code><\/li>\n<li>Les <code>ARIA states<\/code> et <code>ARIA properties<\/code><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8254\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/22-formulaire-semantique-1.jpg\" alt=\"Pour les formulaires, les experts en accessibilit\u00e9 peuvent aider\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/22-formulaire-semantique-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/22-formulaire-semantique-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>Par exemple, pour les formulaires, vous pouvez documenter :<\/p>\n<ul>\n<li>Quel est le bon <strong>type HTML (HTML5)<\/strong> ? Dans mon exemple, cela est document\u00e9 par une petite annotation rose \u00e0 c\u00f4t\u00e9 du champ de droite : <code>option<\/code>, <code>type=date<\/code>, <code>type=search<\/code>.<\/li>\n<li>Ce champ est-il cens\u00e9 avoir de l\u2019autocomplete, autofill, etc.<\/li>\n<li>Les balises de legend et de fieldset<\/li>\n<li>Quel \u00e9l\u00e9ment qui prend le focus par d\u00e9faut \u00e0 l&rsquo;ouverture de la page (si \u00e7a a du sens niveau exp\u00e9rience utilisateur)<\/li>\n<\/ul>\n<h4>Acc\u00e8s \u00e0 la documentation externe pour les sous-titres, les transcriptions, etc.<\/h4>\n<p>Il peut aussi y avoir des contenus alternatifs que vous ne pouvez pas documenter dans les maquettes. Pour ceux-ci, on peut fournir des liens vers des sources externes.<\/p>\n<p>Quelques exemples :<\/p>\n<ul>\n<li>Les ressources HTML\/texte pour les<strong> transcriptions audio <\/strong>(pour les podcasts par exemple)<\/li>\n<li>Les <strong>sous-titres<\/strong> des vid\u00e9os : vous pouvez fournir un lien vers la transcription en texte brut et\/ou un lien vers le fichier .srt.<\/li>\n<li>Une liste de <strong>liens avec les ancres<\/strong> : \u00ab\u00a0cliquez ici\u00a0\u00bb est horrible pour l&rsquo;accessibilit\u00e9 et pour l&rsquo;utilisabilit\u00e9. Il faut \u00e9viter cela. Souvent, les sp\u00e9cialistes du contenu (SEO, r\u00e9dacteurs UX) fournissent une liste compl\u00e8te de ces liens avec l&rsquo;URL r\u00e9elle, l&rsquo;ancre, le titre, etc.<\/li>\n<\/ul>\n<h2>Qui participe \u00e0 la documentation de l&rsquo;accessibilit\u00e9 et quand ?<\/h2>\n<p>Je viens de vous donner beaucoup d\u2019exemples de documentation de design. Mais une grande partie peut \u00eatre document\u00e9e par plusieurs r\u00f4les. Du coup souvent, dans les \u00e9quipes, la question de \u201cqui devrait documenter tout \u00e7a et quand\u201d se pose.<\/p>\n<p>J&rsquo;ai 2 r\u00e9ponses \u00e0 vous donner<\/p>\n<ul>\n<li>C&rsquo;est un travail d\u2019\u00e9quipe<\/li>\n<li>\u00c7a d\u00e9pend<\/li>\n<\/ul>\n<h3>C\u2019est un travail d\u2019\u00e9quipe<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8260\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/23.qui-documente-quoi-2.jpg\" alt=\"Gestion de projet, \u00e9quipes design, \u00e9quipes de d\u00e9veloppement \/ expertise accessibilit\u00e9, \u00e9quipes en charge du contenu: SEO,UX writers, Equipes de \u2028QA \/ Test\" width=\"1061\" height=\"268\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/23.qui-documente-quoi-2.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/23.qui-documente-quoi-2-768x194.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>De nombreuses personnes peuvent participer \u00e0 une telle documentation.<\/p>\n<ul>\n<li>L\u2019\u00e9quipe de <strong>gestion de projet <\/strong>: elle peut d\u00e9finir et documenter les exigences d&rsquo;accessibilit\u00e9 au niveau du projet. Faut-il cibler AA ou AAA par exemple ? Ils peuvent \u00e9galement faire en sorte que l&rsquo;accessibilit\u00e9 fasse partie de la d\u00e9finition of done si vous travaillez dans un environnement agile.<\/li>\n<li>Les <strong>\u00e9quipes de design <\/strong>: elles con\u00e7oivent et documentent le fonctionnement, l&rsquo;apparence, mais \u00e9galement la navigation, les interactions \u201ccach\u00e9es\u00a0\u00bb<\/li>\n<li>Les <strong>\u00e9quipes de d\u00e9veloppement \/ expertise accessibilit\u00e9 <\/strong>: elles documentent la mise en \u0153uvre technique (balise HTML correct, ARIA role, landmarks, etc.).<\/li>\n<li>Les \u00e9quipes de <strong>r\u00e9daction de contenu UX et SEO : <\/strong>elles peuvent documenter le texte alt, les intitul\u00e9s de liens et de boutons et tout ce qui concerne le contenu.<\/li>\n<li>Les <strong>\u00e9quipes de QA <\/strong>(quality assurance ou assurance qualit\u00e9) <strong>et de test<\/strong> : elles peuvent documenter la mani\u00e8re de tester les composants et les pages et les cas de tests d\u2019accessibilit\u00e9<\/li>\n<\/ul>\n<h3>Cela d\u00e9pend (de ce avec quoi les \u00e9quipes sont \u00e0 l&rsquo;aise)<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8256\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/24.cartographie-documentation-accessibilite-1.jpg\" alt=\"Une matrice en 3 sections expliquant ce que je peux documenter par moi-m\u00eame, avec l'aide d'experts en d\u00e9veloppement\/accessibilit\u00e9 et de personnes charg\u00e9es du contenu.\" width=\"1061\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/24.cartographie-documentation-accessibilite-1.jpg 1061w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/24.cartographie-documentation-accessibilite-1-768x432.jpg 768w\" sizes=\"(max-width: 1061px) 100vw, 1061px\" \/><\/p>\n<p>Commencez par ce avec quoi vos \u00e9quipes sont famili\u00e8res \/ \u00e0 l\u2019aise. Formez et montez en comp\u00e9tence sur le reste !<\/p>\n<p>En pr\u00e9parant cette conf\u00e9rence, j&rsquo;ai essay\u00e9 d&rsquo;organiser ce que je peux <strong>documenter par moi-m\u00eame,<\/strong> ce pour quoi j&rsquo;ai besoin de l<strong>&lsquo;aide d\u2019\u00e9quipes de d\u00e9veloppement et d&rsquo;expertise en accessibilit\u00e9<\/strong>. Et ce pour quoi je souhaiterais l<strong>&lsquo;aide d\u2019\u00e9quipes de r\u00e9daction et de SEO<\/strong>.<\/p>\n<p>J&rsquo;ai rang\u00e9 tous les types de documentation que je viens de pr\u00e9senter dans une matrice \u00e0 3 sections. C&rsquo;est une fa\u00e7on tr\u00e8s \u00ab\u00a0personnelle\u00a0\u00bb d&rsquo;ordonner les choses. Elle est bas\u00e9e sur mes propres domaines d&rsquo;expertise.<\/p>\n<p>Je vous conseille de faire quelque chose de similaire avec votre \u00e9quipe. Votre cartographie sera forc\u00e9ment diff\u00e9rente de la mienne. Elle d\u00e9pend de beaucoup de facteurs, dont le <strong>niveau d\u2019expertise et d\u2019aisance en accessibilit\u00e9<\/strong> de vos \u00e9quipes.<\/p>\n<p>Le <strong>type de projet<\/strong> peut aussi changer la cartographie.<\/p>\n<h3>Quand est-ce qu\u2019on documente ?<\/h3>\n<p>Pour conclure cette section, une question que je re\u00e7ois souvent est \u00ab\u00a0quand dois-je documenter tout cela\u201d. De mon c\u00f4t\u00e9, je documente les <strong>composants \/ pages finales apr\u00e8s les avoir test\u00e9es<\/strong> et eues une discussion avec l\u2019\u00e9quipe de d\u00e9veloppement sur la <strong>faisabilit\u00e9 technique<\/strong>.<\/p>\n<p>Ce qui signifie que je peux retravailler certaines maquettes en fonction de la faisabilit\u00e9 technique. Et ensuite, je cr\u00e9e la documentation finale.<\/p>\n<h2>Quels sont les b\u00e9n\u00e9fices d&rsquo;une telle documentation<\/h2>\n<p>Je vous ai donn\u00e9 de nombreux exemples de ce qu&rsquo;il faut documenter. La derni\u00e8re question est : Quels sont les b\u00e9n\u00e9fices d&rsquo;une telle documentation ? C\u2019est \u00e0 -dire :\u00a0 comment convaincre mon \u00e9quipe d\u2019investir dans une telle documentation ?<\/p>\n<h3>Les b\u00e9n\u00e9fices pour moi, designeuse (et l\u2019\u00e9quipe de design)<\/h3>\n<p>Les premiers b\u00e9n\u00e9fices sont, pour moi, en tant que designeuse. C\u2019est une bonne fa\u00e7on d\u2019en <strong>apprendre plus sur l\u2019accessibilit\u00e9<\/strong>. Mais \u00e9galement de continuer \u00e0 <strong>me mettre \u00e0 jour <\/strong>car c\u2019est un domaine qui \u00e9volue constamment.<\/p>\n<p>Cela m&rsquo;oblige \u00e0 <strong>r\u00e9fl\u00e9chir \u00e0 diff\u00e9rentes interactions<\/strong>, au-del\u00e0 des pixels \u00ab\u00a0statiques\u00a0\u00bb qu\u2019on a dans nos outils de design. La documentation est un exercice mental int\u00e9ressant qui m&rsquo;oblige \u00e0 prendre un peu de recul et \u00e0 me poser diff\u00e9rentes questions :<\/p>\n<ul>\n<li>Comment quelqu&rsquo;un va-t-il interagir avec ceci avec une souris ?<\/li>\n<li>Un clavier ?<\/li>\n<li>Comment cela fonctionnera-t-il au toucher ?<\/li>\n<li>Qu&rsquo;est-ce qu&rsquo;un lecteur d&rsquo;\u00e9cran va annoncer pour cela ? Etc.<\/li>\n<\/ul>\n<p>Parfois, je suis trop plong\u00e9e dans les d\u00e9tails des pixels d\u2019une interface, que je ne remarque pas forc\u00e9ment que ce que j\u2019avais en t\u00eate ne pourra pas fonctionner, une fois que la personne va interagir avec. Cet exercice m\u2019aide \u00e0 m\u2019en rendre compte et \u00e0 <strong>repenser, si besoin, une autre solution<\/strong>.<\/p>\n<p>C\u2019est enfin un bon <strong>outil d\u2019onboarding pour les nouvelles personnes dans l\u2019\u00e9quipe de design,<\/strong> surtout si elles ne connaissent pas (encore) l\u2019accessibilit\u00e9. Elles ont acc\u00e8s \u00e0 des <strong>exemples de ce que l&rsquo;on attend d&rsquo;elles<\/strong>. C\u2019est aussi l\u2019occasion de poser des questions, et en apprendre plus sur l\u2019accessibilit\u00e9 via ce biais.<\/p>\n<h3>B\u00e9n\u00e9fices pour la collaboration design \/ d\u00e9veloppement<\/h3>\n<p>La documentation du design permet de <strong>gagner du temps et d&rsquo;\u00e9viter les erreurs d\u2019interpr\u00e9tation<\/strong>. Bien s\u00fbr, cela ne signifie pas que vous n&rsquo;avez pas besoin de parler \u00e0 vos \u00e9quipes de d\u00e9veloppement, ou que vous n&rsquo;avez pas besoin de pr\u00e9senter vos maquettes&#8230;<\/p>\n<p>Mais parfois, il y a des mois entre le moment o\u00f9 j&rsquo;ai con\u00e7u un composant, je l\u2019ai pr\u00e9sent\u00e9 \u00e0 l&rsquo;\u00e9quipe de d\u00e9veloppement et le moment o\u00f9 ce ticket Jira arrive dans leur backlog.<\/p>\n<p>Avoir cette base document\u00e9e permet de se souvenir des discussions.<\/p>\n<p>Cela permet d\u2019<strong>assurer la coh\u00e9rence des pages et interactions futures<\/strong>. Si les interactions et l&rsquo;accessibilit\u00e9 sont document\u00e9es pour un composant, alors les composants similaires devraient fonctionner de la m\u00eame mani\u00e8re. Quand ce n\u2019est pas le cas, mes \u00e9quipes de d\u00e9veloppement me le rappellent : \u201cEuh, Stef, c&rsquo;est presque le m\u00eame composant l\u00e0, pourquoi cela fonctionne-t-il diff\u00e9remment ?\u00a0\u00bb. Et ils ont raison de demander.<\/p>\n<p>Cette documentation permet \u00e9galement d&rsquo;\u00e9tablir une r\u00e9f\u00e9rence, un exemple de ce qui est attendu pour les prochains designs. Cela aide \u00e0<strong> am\u00e9liorer la coh\u00e9rence du design system<\/strong> lorsque l&rsquo;\u00e9quipe de design s&rsquo;agrandit. Et permet de ne pas oublier l&rsquo;accessibilit\u00e9 !<\/p>\n<h3>B\u00e9n\u00e9fices pour le projet dans sa globalit\u00e9<\/h3>\n<p>Cela permet de lancer une <strong>conversation sur l&rsquo;accessibilit\u00e9<\/strong> au sein du projet et encourage les \u00e9quipes \u00e0 creuser davantage le sujet. Tout \u00e7a, pour s\u2019assurer que l&rsquo;accessibilit\u00e9 n&rsquo;est plus \u201cun truc dont on s\u2019occupera plus tard\u201d, mais qu&rsquo;elle fasse partie int\u00e9grante du projet \u00e0 chaque \u00e9tape.<\/p>\n<h2>En conclusion\u2026<\/h2>\n<p>J\u2019ai partag\u00e9 beaucoup d\u2019exemples de ce que les \u00e9quipes de design peuvent documenter pour aider \u00e0 faire pousser l\u2019accessibilit\u00e9 sur vos projets Mon but \u00e9tait de vous montrer la large palette de ce qu\u2019il est possible de faire.<\/p>\n<p>Mais je vais \u00eatre honn\u00eate, je n&rsquo;ai pas toujours le temps de documenter tout \u00e7a dans mes maquettes. Mon conseil, si le temps est limit\u00e9 : <strong>choisissez votre bataille documentez les \u00e9l\u00e9ments qui pourraient poser le plus de probl\u00e8mes ou de malentendus<\/strong>.<\/p>\n<p>L\u2019important au final, c&rsquo;est le <strong>travail d\u2019\u00e9quipe<\/strong>. M\u00eame si vous ne documentez pas tout, la communication est l&rsquo;aspect le plus important ici. Avec vos \u00e9quipes de design, de d\u00e9veloppement, de test. Pour que nous puissions <strong>faire avancer l&rsquo;accessibilit\u00e9 ensemble, pour tout le monde<\/strong>. Et l&rsquo;int\u00e9grer <strong>dans d\u00e8s le d\u00e9but dans les projets<\/strong>. Et oui, c&rsquo;est un TRES GROS travail. Mais \u00e7a en vaut la peine !<\/p>\n<h2>Le Kit de Documentation Accessibilit\u00e9 et Interactions<\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8357\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/25.design-accessibilite-aide-memoire-annotations-sketch-figma.jpg\" alt=\"Exemple de 2 pages de l'aide m\u00e9moire et du fichier Figma et Sketch\" width=\"1622\" height=\"597\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/25.design-accessibilite-aide-memoire-annotations-sketch-figma.jpg 1622w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/25.design-accessibilite-aide-memoire-annotations-sketch-figma-768x283.jpg 768w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/25.design-accessibilite-aide-memoire-annotations-sketch-figma-1536x565.jpg 1536w\" sizes=\"(max-width: 1622px) 100vw, 1622px\" \/><\/p>\n<p>Wow. Ca fait beaucoup. Mais ne vous inqui\u00e9tez pas, si vous ne vous souvenez pas de tout ce que vous pourriez documenter, j&rsquo;ai pr\u00e9par\u00e9 un aide m\u00e9moire pour vous. Il s\u2019accompagne d\u2019un kit d&rsquo;annotation pour Sketch et Figma, pour vous faire gagner du temps votre processus de design et documentation de maquettes. Le kit est disponible sur <a href=\"https:\/\/shop.stephaniewalter.design\/\">ma boutique de templates et resources<\/a>.<\/p>\n<p><em>(Navr\u00e9e, pour le moment la boutique est techniquement limit\u00e9e \u00e0 une seule langue, le texte est en fran\u00e7ais mais l&rsquo;interface en anglais)<\/em><\/p>\n<p class=\"cta text-center\"><a href=\"https:\/\/shop.stephaniewalter.design\/b\/kit-de-documentation-annotation-accessibilite-pour-designer?utm-source=swblog\" class=\"button is-accentuated has-icon\"><span>Obtenir le Kit via la boutique <svg aria-hidden=\"true\" role=\"presentation\" class=\"icon icon-arrow-right\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><use xlink:href=\"#icon-arrow-right\"><\/use><\/svg><\/span><\/a><\/p>\n<h2 id=\"devfestvideo\">Dev Fest Nantes &#8211; Vid\u00e9o<\/h2>\n<p>Cette conf\u00e9rence \u00e0 \u00e9t\u00e9 film\u00e9e \u00e0 DevFest Nantes en 2022.<\/p>\n<div class=\"videoWrapper\"><iframe loading=\"lazy\" title=\"[DevFest Nantes 2022] Documentons l\u2019accessibilit\u00e9 en phase de design\" src=\"https:\/\/www.youtube.com\/embed\/yJwweyOlhaE\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/div>\n<h2 id=\"sketchnote\">Sketchnote<\/h2>\n<p><a href=\"https:\/\/twitter.com\/AurelieT44\/status\/1583107519035031552\">Aurelie Touchard<\/a> \u00e0 DevFest Nantes a fait une magnifique sketchnote de cette conf\u00e9rence.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-8295\" src=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/FfhT4sYWAAInwfN.jpg\" alt=\"sketchnote de ma conf\u00e9rence\" width=\"2048\" height=\"1448\" srcset=\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/FfhT4sYWAAInwfN.jpg 2048w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/FfhT4sYWAAInwfN-768x543.jpg 768w, https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/FfhT4sYWAAInwfN-1536x1086.jpg 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/p>\n<h2>Remerciements et liens utiles<\/h2>\n<p>Tout d\u2019abord, un gros merci \u00e0<a href=\"https:\/\/www.linkedin.com\/in\/avagner\/\">\u00a0 Alain Vagner<\/a>,<a href=\"https:\/\/twitter.com\/MarieGuillaumet\"> Marie Guillaumet<\/a>,<a href=\"https:\/\/twitter.com\/geoffreycrofte\"> Geoffrey Crofte<\/a> et<a href=\"https:\/\/www.pragm.co\/\"> Myriam Jessier<\/a> pour l\u2019aide et les retours sur cette conf\u00e9rence, \u00e0<a href=\"https:\/\/www.linkedin.com\/in\/goulven-baron\/\">\u00a0 Goulven Baron<\/a> and<a href=\"https:\/\/www.linkedin.com\/in\/karen-hawkins-cpacc-4a721119\/\"> Karen Hawkins<\/a> pour m\u2019avoir pr\u00eat\u00e9 des exemples.<\/p>\n<h3>Liens vers les ressources dans le support<\/h3>\n<ul>\n<li><a lang=\"en\" href=\"https:\/\/www.behance.net\/gallery\/78024369\/Accessibility-Annotation-Examples\">Accessibility Annotation Examples from Karen Hawkins<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/contrast-grid.eightshapes.com\/?version=1.1.0&amp;background-colors=%23FFFFFF%2C%20White%0D%0A%23FEDC2A%2C%20Yellow%0D%0A%235A3B5D%2C%20Dark%20Purple%0D%0A%238B538F%2C%20Light%20Purple%0D%0A%23C3A3C9%2C%20Lightst%20purple%0D%0A%23777777%2C%20Gray%0D%0A%23555555%2C%20Darker%20Gray%0D%0A%0D%0A&amp;foreground-colors=%23FFFFFF%2C%20White%0D%0A%23FEDC2A%2C%20Yellow%0D%0A%235A3B5D%2C%20Dark%20Purple%0D%0A%238B538F%2C%20Light%20Purple%0D%0A%23C3A3C9%2C%20Lightst%20purple%0D%0A%23777777%2C%20Gray%0D%0A%23555555%2C%20Darker%20Gray%0D%0A%23444444%2C%20Darker%20%20Darker%20Gray%0D%0A%23333333%2C%20Fifty%20Shades%20of%20darker%20gray%0D%0A%23222222%2C%20Dorian%20Gray%3F&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;es-color-form__show-contrast=dnp\">Color ratio Matrix tool<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/gerireid.com\/wcag-for-designers.html\">WCAG for designers<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.figma.com\/community\/plugin\/731310036968334777\">A11y \u2013 Focus Orderer \u2014 Plugin for Figma<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.figma.com\/community\/file\/984136149483735147\">Fluent Accessibility Notation \u2014 Figma<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices\/examples\/landmarks\/main.html\">ARIA Example : One Main Landmark<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/stephaniewalter.design\/\">Reduced motion example on stephaniewalter.design<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.figma.com\/community\/file\/953682768192596304\">A11y Annotation Kit \u2014 Figma<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.figma.com\/community\/file\/779827094223635810\">Accessibility bluelines \u2014 Figma<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/dribbble.com\/shots\/6269661-Accessibility-Bluelines\">Accessibility Bluelines<\/a> (Sketch, Adobe XD, Invision Studio)<\/li>\n<li><a href=\"https:\/\/www.streamlinehq.com\/\">Icons in the presentation by Streamline<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/atag\/\">Authoring Tool Accessibility Guidelines (ATAG)lang=\u00a0\u00bben\u00a0\u00bb<\/a><\/li>\n<\/ul>\n<p>Plus de liens utiles pour approfondir le sujet:<\/p>\n<ul>\n<li>Pour vous former en fran\u00e7ais sur le sujet, je recommande vivement la <a href=\"https:\/\/formations.access42.net\/formations\/design-dinterfaces-accessibles-ux-ui-multimedia\/\">Formation design accessible<\/a> d\u2019Access42. J&rsquo;en suis tellement contente que <a href=\"https:\/\/stephaniewalter.design\/fr\/blog\/illustrations-citation-formation-accessibilite-interfaces-access42\/\">j&rsquo;ai illustr\u00e9 certains des points forts sur mon blog<\/a><\/li>\n<li><a href=\"https:\/\/stephaniewalter.design\/fr\/blog\/accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible\/\">Accessibilit\u00e9 et couleurs : outils et ressources pour concevoir des produits accessibles <\/a><\/li>\n<li><a href=\"https:\/\/www.alsacreations.com\/tuto\/lire\/1619-creer-facilement-une-palette-de-couleurs-accessibles.html\">Cr\u00e9er facilement une palette de couleurs accessibles<\/a>, mon article chez Alsacreations<\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.figma.com\/community\/file\/976946194228458698\">Accessibility annotation Figma template<\/a> (by twitter)<\/li>\n<li><a lang=\"en\" href=\"https:\/\/inclusive-components.design\/\">Inclusive Components<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/tetralogical.com\/blog\/2021\/09\/29\/browsing-with-a-desktop-screen-reader\/\">browsing with a desktop screen reader<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/tetralogical.com\/blog\/2021\/10\/05\/browsing-with-a-mobile-screen-reader\/\">browsing with a mobile screen reader<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/tetralogical.com\/blog\/2021\/10\/26\/browsing-with-a-keyboard\/\">browsing with a keyboard<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/tetralogical.com\/blog\/2021\/11\/15\/browsing-with-speech-recognition\/\">browsing with speech recognition<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/bbc.github.io\/accessibility-news-and-you\/guides\/screen-reader-ux.html\">How to document the screen reader user experience<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/davidakennedy.com\/blog\/accessible-design-in-60-seconds\/\">Designing for Web Accessibility in 60 Seconds<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/www.figma.com\/community\/plugin\/892114953056389734\/Text-Resizer---Accessibility-Checker\">Text Resizer \u2013 Accessibility Checker<\/a><\/li>\n<li><a lang=\"en\" href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/accessibility_inspector\/index.html#show-web-page-tabbing-order\">Firefox Accessibility Inspector<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Les besoins en termes d\u2019accessibilit\u00e9 sont encore trop souvent pris en compte en fin de projet, voire pas du tout. Les interactions utilisateur et l\u2019accessibilit\u00e9 sont peu, ou pas document\u00e9es c\u00f4t\u00e9 design. R\u00e9gler plus tard des soucis d\u2019accessibilit\u00e9, co\u00fbte bien plus cher que si on les avait \u00e9vit\u00e9s d\u00e8s le d\u00e9but. Nous verrons pourquoi quand et comment peut-on documenter diff\u00e9rents aspects de l\u2019accessibilit\u00e9 d\u00e8s la phase de design, pour cr\u00e9er des produits plus inclusifs. Bonus: un aide m\u00e9moire et mon templates Sketch d&rsquo;annotation.<\/p>\n","protected":false},"author":3,"featured_media":8294,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[223,55],"tags":[],"class_list":["post-8197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibilite","category-ux-ui-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Documenter l\u2019accessibilit\u00e9 en phase de design ! Par St\u00e9phanie Walter - UX designer &amp; experte mobile<\/title>\n<meta name=\"description\" content=\"Pourquoi quand et comment peut-on documenter diff\u00e9rents aspects de l\u2019accessibilit\u00e9 d\u00e8s la phase de design, pour cr\u00e9er des produits plus inclusifs . Bonus: un aide m\u00e9moire et mon templates Sketch d&#039;annotation.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Documenter l\u2019accessibilit\u00e9 en phase de design ! Par St\u00e9phanie Walter - UX designer &amp; experte mobile\" \/>\n<meta property=\"og:description\" content=\"Pourquoi quand et comment peut-on documenter diff\u00e9rents aspects de l\u2019accessibilit\u00e9 d\u00e8s la phase de design, pour cr\u00e9er des produits plus inclusifs . Bonus: un aide m\u00e9moire et mon templates Sketch d&#039;annotation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-17T22:29:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-05T11:31:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/Documenter-accessibilite-design-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1700\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"33 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/\",\"name\":\"Documenter l\u2019accessibilit\u00e9 en phase de design ! Par St\u00e9phanie Walter - UX designer & experte mobile\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/Documenter-accessibilite-design-1.jpg\",\"datePublished\":\"2022-10-17T22:29:56+00:00\",\"dateModified\":\"2024-08-05T11:31:14+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Pourquoi quand et comment peut-on documenter diff\u00e9rents aspects de l\u2019accessibilit\u00e9 d\u00e8s la phase de design, pour cr\u00e9er des produits plus inclusifs . Bonus: un aide m\u00e9moire et mon templates Sketch d'annotation.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/Documenter-accessibilite-design-1.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/Documenter-accessibilite-design-1.jpg\",\"width\":1700,\"height\":700},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Documenter l\u2019accessibilit\u00e9 en phase de design ! Par St\u00e9phanie Walter - UX designer & experte mobile","description":"Pourquoi quand et comment peut-on documenter diff\u00e9rents aspects de l\u2019accessibilit\u00e9 d\u00e8s la phase de design, pour cr\u00e9er des produits plus inclusifs . Bonus: un aide m\u00e9moire et mon templates Sketch d'annotation.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/","og_locale":"fr_FR","og_type":"article","og_title":"Documenter l\u2019accessibilit\u00e9 en phase de design ! Par St\u00e9phanie Walter - UX designer & experte mobile","og_description":"Pourquoi quand et comment peut-on documenter diff\u00e9rents aspects de l\u2019accessibilit\u00e9 d\u00e8s la phase de design, pour cr\u00e9er des produits plus inclusifs . Bonus: un aide m\u00e9moire et mon templates Sketch d'annotation.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2022-10-17T22:29:56+00:00","article_modified_time":"2024-08-05T11:31:14+00:00","og_image":[{"width":1700,"height":700,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2022\/10\/Documenter-accessibilite-design-1.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"33 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/","name":"Documenter l\u2019accessibilit\u00e9 en phase de design ! Par St\u00e9phanie Walter - UX designer & experte mobile","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/Documenter-accessibilite-design-1.jpg","datePublished":"2022-10-17T22:29:56+00:00","dateModified":"2024-08-05T11:31:14+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Pourquoi quand et comment peut-on documenter diff\u00e9rents aspects de l\u2019accessibilit\u00e9 d\u00e8s la phase de design, pour cr\u00e9er des produits plus inclusifs . Bonus: un aide m\u00e9moire et mon templates Sketch d'annotation.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/documenter-accessibilite-en-phase-de-design\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/Documenter-accessibilite-design-1.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2022\/10\/Documenter-accessibilite-design-1.jpg","width":1700,"height":700},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l&#039;utilisabilit\u00e9 et l&#039;accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher &amp; Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=8197"}],"version-history":[{"count":10,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8197\/revisions"}],"predecessor-version":[{"id":8593,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8197\/revisions\/8593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/8294"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=8197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=8197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=8197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}