{"id":38463,"date":"2019-10-31T22:23:52","date_gmt":"2019-10-31T19:23:52","guid":{"rendered":"https:\/\/prohoster.info\/blog\/po-napravleniyu-k-dostupnosti\/"},"modified":"2019-10-31T22:23:52","modified_gmt":"2019-10-31T19:23:52","slug":"po-napravleniyu-k-dostupnosti","status":"publish","type":"post","link":"https:\/\/prohoster.info\/fr\/blog\/news\/po-napravleniyu-k-dostupnosti","title":{"rendered":"Vers l'accessibilit\u00e9","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Vers
\n
\nVendredi \u2013 la fin de la journ\u00e9e de travail. Les mauvaises nouvelles arrivent toujours le vendredi en fin de journ\u00e9e.<\/p>\n

Vous vous appr\u00eatez \u00e0 quitter le bureau, \u00ab ding \u00bb un nouvel e-mail concernant une nouvelle r\u00e9organisation vient d'arriver dans votre bo\u00eete.<\/p>\n

Merci xxxx, yyy \u00e0 partir d'aujourd'hui vous rendrez des comptes \u00e0 zzzz.
\n\u2026
\nEt l'\u00e9quipe de Hugh veillera \u00e0 ce que nos produits soient accessibles aux personnes handicap\u00e9es.<\/i>\n<\/p><\/blockquote>\n

Oh non ! Qu'ai-je fait pour m\u00e9riter cela ? Ils veulent que je parte ? Se pr\u00e9parer \u00e0 un travail ingrat et difficile et tenter de r\u00e9parer les erreurs des autres. Ce sera s\u00fbrement un \u00e9chec...<\/p>\n

C'\u00e9tait la situation il y a quelques ann\u00e9es. Certains malheureux recevaient le travail de \u00ab nettoyage \u00bb de l'interface utilisateur pour essayer de la rendre accessible aux personnes handicap\u00e9es.
\n<\/a><\/noindex>
\nCe que cela signifiait r\u00e9ellement \u00e9tait plut\u00f4t flou \u2013 probablement que si vous pouviez voir l'indicateur de focus et naviguer dans les champs avec la touche tabulation, avoir un texte alternatif et quelques descriptions de champs, cela serait consid\u00e9r\u00e9 comme un accessibilit\u00e9 de votre application...<\/p>\n

Mais soudain, les \u00ab bugs \u00bb ont commenc\u00e9 \u00e0 se multiplier \u00e0 une vitesse fulgurante.<\/p>\n

Diff\u00e9rents lecteurs d'\u00e9cran (en.<\/i> Screen Readers) et navigateurs se comportaient de mani\u00e8re compl\u00e8tement diff\u00e9rente.<\/p>\n

Les utilisateurs se plaignaient que l'application n'\u00e9tait pas utilisable.<\/p>\n

Une fois qu'une erreur \u00e9tait corrig\u00e9e \u00e0 un endroit, une autre apparaissait ailleurs.<\/p>\n

Et simplement changer et corriger les erreurs de l'interface utilisateur n\u00e9cessitait des efforts titanesques.<\/p>\n

J'y \u00e9tais. J'ai surv\u00e9cu, mais nous n'avons pas \u00ab r\u00e9ussi \u00bb \u2013 techniquement nous avons nettoy\u00e9 beaucoup de choses, ajout\u00e9 beaucoup de descriptions aux champs, des r\u00f4les et atteint un certain niveau de conformit\u00e9 aux normes, mais personne n'\u00e9tait satisfait. Les utilisateurs se plaignaient encore de ne pas pouvoir naviguer dans l'application. Le manager se plaignait toujours d'un flux constant d'erreurs. Les ing\u00e9nieurs se plaignaient d'une mauvaise d\u00e9finition des t\u00e2ches, sans solution \u00ab correcte \u00bb clairement d\u00e9finie qui fonctionnerait dans tous les cas.<\/p>\n

Sur mon chemin pour comprendre l'accessibilit\u00e9, j'ai rencontr\u00e9 quelques moments clairement r\u00e9v\u00e9lateurs.
\nIl a peut-\u00eatre d'abord \u00e9t\u00e9 compris que l'ajout de fonctionnalit\u00e9s d'accessibilit\u00e9 \u00e0 un produit existant est compliqu\u00e9. Et il est encore plus difficile de convaincre les gestionnaires que c'est incroyablement complexe ! Non, ce n'est pas juste \"ajouter quelques balises\" et l'interface utilisateur fonctionnera parfaitement. Non, ce n'est pas possible de terminer cela en trois semaines, m\u00eame trois mois seront insuffisants.
\nMon prochain moment de v\u00e9rit\u00e9 est survenu lorsque j'ai vu de mes propres yeux comment les utilisateurs aveugles utilisent r\u00e9ellement notre application. C'est TELLEMENT diff\u00e9rent de la simple consultation des messages d'erreur.<\/p>\n

Je reviendrai encore et encore sur ce point, mais presque toutes nos \u00ab hypoth\u00e8ses \u00bb sur la mani\u00e8re dont les gens utilisaient notre application \u00e9taient erron\u00e9es.<\/p>\n

Naviguer dans une interface utilisateur complexe \u00e0 l'aide des touches Tab\/Shift+Tab<\/code> \u2013 c'est nul ! Nous avons besoin de quelque chose de mieux. Raccourcis clavier, titres.<\/p>\n

Perdre le focus lors de la modification de l'interface utilisateur n'est pas un gros probl\u00e8me ? R\u00e9fl\u00e9chissons encore une fois \u2013 c'est incroyablement d\u00e9routant.<\/p>\n

J'ai continu\u00e9, travaill\u00e9 un certain temps sur divers projets, puis nous avons commenc\u00e9 un nouveau projet, avec une interface utilisateur complexe et une directive claire pour enfin obtenir cette fois-ci une accessibilit\u00e9 correcte.<\/p>\n

Nous avons donc fait un pas en arri\u00e8re et examin\u00e9 comment nous pourrions le mettre en \u0153uvre diff\u00e9remment et r\u00e9ussir, tout en veillant \u00e0 ce que le processus de travail soit agr\u00e9able !<\/p>\n

Assez rapidement, nous avons abouti \u00e0 certaines conclusions :<\/p>\n

    \n
  1. Nous ne voulions pas que les personnes d\u00e9veloppant l'interface utilisateur s'embrouillent avec les annotations\/roles aria et, bien s\u00fbr, avec la structure HTML des composants. Nous devions leur fournir des composants appropri\u00e9s, dans lesquels l'accessibilit\u00e9 est int\u00e9gr\u00e9e d\u00e8s le d\u00e9part.<\/li>\n
  2. Accessibilit\u00e9 == Utilisabilit\u00e9 \u2013 c'est-\u00e0-dire que ce n'est pas seulement une question technique. Nous devions changer tout le processus de conception et nous assurer que l'accessibilit\u00e9 soit prise en compte et discut\u00e9e avant m\u00eame le d\u00e9but de la conception de l'interface utilisateur. Il \u00e9tait n\u00e9cessaire de r\u00e9fl\u00e9chir d'embl\u00e9e \u00e0 la mani\u00e8re dont les utilisateurs pourraient d\u00e9couvrir une fonctionnalit\u00e9, comment ils navigueraient et comment le \"clic droit\" de la souris fonctionnerait depuis le clavier. L'accessibilit\u00e9 doit \u00eatre une partie int\u00e9grante du processus de conception \u2013 pour certains utilisateurs, elle repr\u00e9sente bien plus que l'apparence de l'application.<\/li>\n
  3. D\u00e8s le d\u00e9but, nous voulions obtenir des retours d'utilisateurs aveugles et d'autres utilisateurs ayant des limitations sur la facilit\u00e9 d'utilisation de l'application.<\/li>\n
  4. Nous avions besoin de moyens vraiment efficaces pour d\u00e9tecter les r\u00e9gressions d'accessibilit\u00e9.<\/li>\n<\/ol>\n

    \nEh bien, d'un point de vue technique, la premi\u00e8re partie \u00e9tait assez amusante - concevoir l'architecture et mettre en \u0153uvre la biblioth\u00e8que de composants. Et c'est vraiment ce qu'il en \u00e9tait.<\/p>\n

    En prenant du recul et en regardant des exemples ARIA<\/a><\/noindex> En consid\u00e9rant cela comme un probl\u00e8me de conception plut\u00f4t que comme un probl\u00e8me d'adaptation, nous avons introduit certaines abstractions. Le composant a une ‘Structure’ (compos\u00e9 d'\u00e9l\u00e9ments HTML) et un ‘Comportement’ (comment il interagit avec l'utilisateur). Par exemple, dans les extraits ci-dessous, nous avons une simple liste non ordonn\u00e9e. En ajoutant du \u00ab comportement \u00bb \u00e0 la liste, des r\u00f4les correspondants sont ajout\u00e9s pour qu'elle agisse comme une liste. De la m\u00eame mani\u00e8re, nous proc\u00e9dons pour le menu.<\/p>\n

    \"Vers
    \n
    \nEn fait, ici, non seulement des r\u00f4les sont ajout\u00e9s, mais aussi des gestionnaires d'\u00e9v\u00e9nements pour la navigation au clavier.<\/p>\n

    Cela semble d\u00e9j\u00e0 plus soign\u00e9. Si nous pouvions obtenir une s\u00e9paration nette entre eux, peu importe comment la structure a \u00e9t\u00e9 cr\u00e9\u00e9e, nous pourrions appliquer \u00e0 celle-ci des comportements (Behaviours) et obtenir la bonne accessibilit\u00e9.<\/p>\n

    On peut le voir en action \u00e0 l'adresse https:\/\/stardust-ui.github.io\/react\/<\/a><\/noindex> \u2013 la biblioth\u00e8que UX React<\/a><\/noindex>, qui est con\u00e7ue et mise en \u0153uvre avec l'accessibilit\u00e9 prise en compte d\u00e8s le d\u00e9part.<\/p>\n

    La deuxi\u00e8me partie \u2013 le changement d'approche et de processus autour du design m'a initialement effray\u00e9 : de modestes ing\u00e9nieurs essayant de pousser des changements organisationnels ne se terminent pas toujours bien, mais cela s'est av\u00e9r\u00e9 \u00eatre l'un des domaines les plus int\u00e9ressants o\u00f9 nous avons fait une contribution significative au processus. En r\u00e9sum\u00e9, nous avions le processus suivant : la nouvelle fonctionnalit\u00e9 \u00e9tait d\u00e9velopp\u00e9e par une \u00e9quipe, apr\u00e8s quoi notre groupe de dirigeants analysait \/ it\u00e9rait cette proposition, puis, apr\u00e8s approbation, le design \u00e9tait g\u00e9n\u00e9ralement transmis \u00e0 l'\u00e9quipe d'ing\u00e9nieurs. Dans ce cas, l'\u00e9quipe d'ing\u00e9nieurs \u00ab poss\u00e9dait \u00bb en fait la fonctionnalit\u00e9 d'accessibilit\u00e9, car elle devait r\u00e9soudre tous les probl\u00e8mes qui y \u00e9taient li\u00e9s.<\/p>\n

    Au d\u00e9part, il s'agissait d'un travail assez difficile \u2013 expliquer que l'accessibilit\u00e9 et l'exp\u00e9rience utilisateur sont inextricablement li\u00e9es et qu'il est essentiel de s'en occuper d\u00e8s la phase de conception, sinon cela entra\u00eene de grands changements et une red\u00e9finition de certains r\u00f4les. Cependant, avec le soutien de la direction et des acteurs cl\u00e9s, nous avons fait passer ce message et l'avons mis en \u0153uvre, afin que les conceptions soient v\u00e9rifi\u00e9es pour leur accessibilit\u00e9 et leur convivialit\u00e9 avant d'\u00eatre pr\u00e9sent\u00e9es \u00e0 la direction.<\/p>\n

    Et ces retours ont \u00e9t\u00e9 extr\u00eamement pr\u00e9cieux pour tous \u2013 c'\u00e9tait fantastique, comme un exercice d'\u00e9change de connaissances \/ de transfert d'informations sur la mani\u00e8re dont les utilisateurs interagissent avec les applications web, nous identifions de nombreuses zones probl\u00e9matiques de l'interface utilisateur avant m\u00eame qu'elles ne soient construites, les \u00e9quipes de d\u00e9veloppement ont d\u00e9sormais des sp\u00e9cifications bien meilleures non seulement pour les aspects visuels mais aussi comportementaux du design. Les discussions r\u00e9elles sont des d\u00e9bats amusants, dynamiques et passionn\u00e9s sur les aspects techniques et les interactions.<\/p>\n

    Nous aurions pu am\u00e9liorer ce travail encore davantage si des utilisateurs aveugles et des personnes handicap\u00e9es avaient \u00e9t\u00e9 pr\u00e9sents lors de ces (ou des futures) r\u00e9unions \u2013 cela a \u00e9t\u00e9 difficile \u00e0 organiser, mais nous collaborons d\u00e9sormais vraiment avec des organisations locales pour les aveugles ainsi qu'avec des entreprises qui fournissent des tests externes pour v\u00e9rifier le flux d'ex\u00e9cution \u00e0 des \u00e9tapes pr\u00e9coces de d\u00e9veloppement \u2013 tant au niveau des composants qu'au niveau du flux d'ex\u00e9cution.<\/p>\n

    Maintenant, les ing\u00e9nieurs disposent de sp\u00e9cifications assez d\u00e9taill\u00e9es, des composants accessibles qu'ils peuvent utiliser pour l'int\u00e9gration, et d'un moyen de v\u00e9rifier les flux d'ex\u00e9cution. En partie, l'exp\u00e9rience nous a appris ce que nous omettions constamment \u2013 comment pouvons-nous pr\u00e9venir les r\u00e9gressions. De m\u00eame, les gens peuvent utiliser des tests d'int\u00e9gration ou de bout en bout pour v\u00e9rifier les fonctionnalit\u00e9s dont nous avons besoin pour d\u00e9tecter les changements dans les interactions et les flux d'ex\u00e9cution \u2013 tant visuels que comportementaux.<\/p>\n

    La d\u00e9finition de la r\u00e9gression visuelle est une t\u00e2che assez pr\u00e9cise, il y a tr\u00e8s peu \u00e0 ajouter \u00e0 ce processus, sauf peut-\u00eatre de v\u00e9rifier si le focus est visible lors de la navigation au clavier. Deux technologies relativement nouvelles pour travailler sur l'accessibilit\u00e9 sont plus int\u00e9ressantes.<\/p>\n

      \n
    1. Accessibility Insights<\/a><\/noindex> est un ensemble d'outils pouvant \u00eatre ex\u00e9cut\u00e9s \u00e0 la fois dans le navigateur et dans le cadre du cycle de construction\/test, pour identifier des probl\u00e8mes.<\/li>\n
    2. V\u00e9rifier le bon fonctionnement des lecteurs d'\u00e9cran a \u00e9t\u00e9 une t\u00e2che particuli\u00e8rement difficile. Avec l'introduction de l'acc\u00e8s \u00e0 Accessibility DOM<\/b>, nous avons enfin eu la possibilit\u00e9 de faire des captures de l'application du point de vue de l'accessibilit\u00e9, tr\u00e8s similaires \u00e0 ce que nous faisons pour les tests visuels, et de les v\u00e9rifier pour des r\u00e9gressions.<\/li>\n<\/ol>\n

      \nAinsi, dans la deuxi\u00e8me partie de l'histoire \u2013 nous sommes pass\u00e9s de l'\u00e9dition du code HTML \u00e0 un travail \u00e0 un niveau d'abstraction plus \u00e9lev\u00e9, avons modifi\u00e9 le processus de conception et mis en place des tests rigoureux. De nouveaux processus, de nouvelles technologies et de nouveaux niveaux d'abstraction ont compl\u00e8tement chang\u00e9 la perception de l'accessibilit\u00e9 et ce que cela signifie de travailler dans ce domaine.
      \nMais ce n'est que le d\u00e9but.<\/p>\n

      La prochaine \u00ab compr\u00e9hension \u00bb est que les utilisateurs aveugles poussent les technologies de pointe \u2013 c'est eux qui tirent le plus grand b\u00e9n\u00e9fice non seulement des changements que nous avons d\u00e9crits pr\u00e9c\u00e9demment, mais aussi du fait que de nouvelles approches et id\u00e9es deviennent possibles gr\u00e2ce \u00e0 ML\/AI. Par exemple, la technologie Immersive Reader permet aux utilisateurs de mieux et plus facilement appr\u00e9hender le texte. Il peut \u00eatre lu \u00e0 voix haute, la structure des phrases est divis\u00e9e grammaticalement et m\u00eame les significations des mots sont affich\u00e9es graphiquement. Cela ne correspond absolument pas \u00e0 l'ancienne compr\u00e9hension de \u00ab le rendre accessible \u00bb \u2013 c'est une fonction d'utilisabilit\u00e9 qui aidera tout le monde.<\/p>\n

      Avec ML\/AI, de tout nouveaux modes d'interaction et de travail apparaissent, et nous sommes ravis de faire partie des prochaines \u00e9tapes de ce chemin avant-gardiste. L'innovation est conditionn\u00e9e par un changement de mentalit\u00e9 \u2013 l'humanit\u00e9 existe depuis des milliers d'ann\u00e9es, les machines depuis des centaines d'ann\u00e9es, les sites Web depuis quelques dizaines d'ann\u00e9es, et les smartphones encore moins, la technologie doit s'adapter aux gens, et non l'inverse.<\/p>\n

      P.S. L'article a \u00e9t\u00e9 traduit avec quelques \u00e9carts par rapport \u00e0 l'original. En tant que co-auteur de cet article, j'ai convenu de ces \u00e9carts avec Hugh.<\/p>\n

      Seuls les utilisateurs enregistr\u00e9s peuvent participer au sondage. Connectez-vous<\/a><\/noindex>, s'il vous pla\u00eet.<\/p>\n

      Accordez-vous de l'importance \u00e0 l'accessibilit\u00e9 de vos applications ?<\/h2>\n