Accessibilité de la vitrine

Jan 12 2023
Les critères de réussite du dilemme d'accessibilité pour l'accessibilité du Web selon les WCAG 2.1 (Directives pour l'accessibilité des contenus Web) pourraient être écrasants s'ils ne sont vus que du point de vue des manuels.
Une illustration artistique montre un collage d'images. Une femme portant une écharpe jaune et une veste noire avec un logo d'accessibilité Web en filigrane. Un utilisateur aveugle masculin sur fond de clavier. Une main avec un plâtre de bandage. Un signe dollar relie les 3 images.

Le dilemme de l'accessibilité

Les critères de succès pour l'accessibilité du Web selon les WCAG 2.1 (Web Content Accessibility Guidelines) pourraient être écrasants s'ils ne sont considérés que du point de vue des manuels. D'après mon expérience, les développeurs et les gestionnaires ont des réactions d'inconfort presque unanimes face aux projets d'accessibilité Web. Comme : faut-il lire « tout ça », c'est juste « trop ennuyeux », « il suffit de lancer le validateur »… des grillons et des tumbleweeds pour résumer.

En tant que développeur et apprenant de l'accessibilité Web, j'ai réalisé qu'une fois dépassée la "douleur atroce" de la lecture des critères, elle peut être abordée sous différents angles. Sous l' angle User Experience par exemple, mais aussi par couches. Lentement, mais vraiment, juste en le testant. Quelque chose que les développeurs font tout le temps. Maintenant, cela m'amène généralement aux questions et réponses suivantes :

Mais que devons-nous « tester » exactement ?

Ce que nous faisons inconsciemment la plupart du temps : le parcours utilisateur .

Comment fait-on cela?

En empathique consciemment avec les handicaps que nos utilisateurs peuvent avoir, en d'autres termes, simuler ou imiter.

Ne suffit-il pas de tester mon site avec un validateur ?

Ce n'est pas. Les validateurs sont d'une grande aide lors de l'analyse de grands sites Web pour certains critères. Comme 20% d'entre eux seulement. Cependant, j'ai vu des validateurs passer des sites avec brio pour se rendre compte qu'ils ne sont en fait pas accessibles sur le terrain.

Analogie concrète, s'il vous plaît ?

Croire que le simple fait de respecter quelques critères rend votre site Web « accessible » à un certain niveau. Ce serait comme penser que votre immeuble de bureaux est "accessible" car il a un très gros bouton pour ouvrir automatiquement la porte à l'entrée principale... mais seulement après avoir traversé un parking en gravier et monté un escalier. Alors, comment l'utilisateur parvient-il à la porte pour commencer ?

Accessibilité de la vitrine

De nos jours, de nombreux secteurs sont soumis à la conformité à l'accessibilité du Web, pour certains, comme le gouvernement, c'est obligatoire. La vente au détail en ligne est devenue la cible d'un nombre croissant de poursuites , les utilisateurs handicapés ont également des attentes claires , donc un besoin croissant d' accessibilité de la vitrine est en augmentation. Faire parfois la différence entre une approche « lead-to-cash » et un résultat « lead-to-lawsuit ».

Locaux

Illustrons le processus par un exemple, mais établissons d'abord quelques prémisses :

  1. L'objectif principal d'une vitrine est de permettre aux utilisateurs de commander des produits.
  2. Les éléments de l'interface doivent permettre à l'utilisateur de finaliser le paiement, y compris les utilisateurs handicapés.
  3. Les développeurs et les testeurs d'assurance qualité testent souvent en prétendant qu'un utilisateur peut passer avec succès du point A à B ou Z sur l'interface. Les mêmes personnes devraient également vérifier que les utilisateurs handicapés sont capables d'accéder aux mêmes points.
  4. Passer avec succès du point A à B ou Z dans un test, tout en imitant une Persona handicapée, se traduira par un certain nombre de critères d'accessibilité respectés avec succès.

Avant d'entrer dans ce qu'est une Persona , clarifions l' empathie . Cela ressemble à quelque chose de facile à faire, nous l'avons entendu à plusieurs reprises : "se mettre à la place de quelqu'un d'autre", à quel point cela pourrait-il être difficile ? Eh bien, il s'avère que les gens ont différents niveaux d'empathie et sont généralement influencés par leurs propres expériences de vie… ce n'est donc pas si facile.

La sympathie n'est pas l'empathie

De plus, différentes perceptions de ce que signifie l'empathie compliquent les choses, j'ai entendu de nombreuses définitions spontanées : il s'agit d'avoir un grand cœur, d'être tout sentimental à propos de quelque chose, d'être un philanthrope, ou de lire les émotions "entre les lignes"… oui, je suppose que ça pourrait très bien être tout cela selon le contexte de la conversation, mais tout de même, tout ce qui précède est plus proche de la sympathie que de l'empathie. Maintenant, quand on parle d' accessibilité du Web , l'empathie est heureusement une question très pragmatique. Par exemple, une vitrine en ligne est accessible ou non. En d'autres termes, « à moitié accessible » ne convient pas si un voyage critique n'est pas réussi. Comme cela ne ferait pas l'affaire d'un magasin physique. Soit les acheteurs handicapés peuvent ou ne peuvent pas entrer et faire leurs courses.

Indépendamment de ce que l'on « ressent » à propos du fait, nos bonnes intentions, nos pensées et nos émotions investies dans la réflexion sur les utilisateurs qui ne peuvent pas utiliser la vitrine ne la rendront pas plus accessible. C'est de la sympathie. C'est bien. C'est la motivation. Ça aide. Il sensibilise. Mais cela ne rend pas les sites Web accessibles.

Mon histoire habituelle pour "induire" les gens à l'empathie est la suivante, ajoutons d'abord une atmosphère détendue et faisons comme si nous étions dans un restaurant ou un bar, entourés de famille, d'amis ou de passants occasionnels, généralement le contexte dans lequel je raconte cette histoire :

Imaginons que vous (un utilisateur non handicapé) achetiez en ligne un produit simple, comme disons… une écharpe jaune pour femme, et que tout à coup votre souris d'ordinateur s'arrête de fonctionner — sa batterie est épuisée — et vous devez terminer le paiement en utilisant uniquement le clavier .

Résistance à l'empathie

Bien sûr, il y a toujours des résistances à cet exercice d'empathie, et c'est normal, nous sommes placés hors de notre zone de confort. Alors j'entends des choses comme : "et si j'utilise un ordinateur portable qui a un tapis de souris intégré"... convenons que ce n'est pas le sujet. Cela peut sembler absurde de devoir sympathiser avec quelque chose d'aussi banal que d'avoir une souris, mais c'est pertinent pour l'ensemble du processus.

Je dois souligner un facteur générationnel dans ces publics occasionnels de mes histoires; gardons à l'esprit que les utilisateurs qui possédaient un ordinateur au milieu des années 80 peuvent se rappeler comment se déplacer sur l'écran avec un clavier, à l'époque les souris à boule commençaient seulement à être introduites et ce n'est qu'à la fin des années 90 que les souris optiques sont devenues disponible dans le commerce, mais les utilisateurs qui sont nés au cours de ces décennies peuvent être pris au dépourvu en envisageant un scénario avec clavier uniquement. Comme je l'ai dit, pas si facile à comprendre.

Quoi qu'il en soit, une fois que l'exemple est assimilé et que les gens commencent à lancer des théories et à se souvenir ou à comprendre comment se déplacer sur l'écran en utilisant uniquement le clavier , alors nous aurons une idée, un plan, une feuille de route - un voyage - sur la façon de terminer la caisse .

Ok, une fois ce parcours clavier assimilé, rajoutons de la complexité : Imaginons que vous ayez acheté cet article plusieurs fois (obtenez des foulards jaunes pour tout le monde) et que maintenant vous connaissez le processus par cœur, sachez que c'est « tellement bien » que vous pouvez le faire sans souris, si bien que vous pouvez le faire « les yeux fermés »… vraiment ? … essayons ça : navigation au clavier + yeux fermés .

Personnes handicapées

Avant de fermer les yeux , définissons ce qu'est une Persona ; Dans le contexte de la conception de l'expérience utilisateur (UX), les « personas » sont des utilisateurs archétypiques dont les objectifs et les caractéristiques représentent les besoins et les limites d'un groupe plus large d'utilisateurs. Oui, mettre des visages sur les utilisateurs aide au processus d'empathie, en recherchant des "personnages pour l'accessibilité" sur Google, nous pouvons trouver de nombreux personnages facilement disponibles à utiliser, mais alors oui, plus de lecture… des grillons et des tumbleweeds à nouveau.

Cela dit, pour faire suite à la narration décontractée trop simplifiée au bar, et puisque cet article commence à devenir long (manquant le point de ne pas avoir à lire autant), simplifions simplement dans un court paragraphe quelques personnages qui peuvent être facilement émulé par les utilisateurs sans handicap. Entrez Jane & John , venant d'un article précédent , ils m'ont déjà aidé lors de la définition des perspectives et des attentes de la fondation d'accessibilité.

  • Jane : utilisatrice droitière, qui s'est récemment cassé la main droite, doit utiliser la navigation au clavier uniquement, s'appuie sur sa vue pour savoir où elle se trouve sur l'écran et pour accéder à l'élément suivant dans une interface utilisateur.
  • John : utilisateur aveugle, utilise la navigation au clavier uniquement, s'appuie sur la vocalisation d'un lecteur d'écran pour savoir où il en est et pour accéder à l'élément suivant dans une interface utilisateur.

Il existe de nombreuses façons pour un utilisateur de naviguer dans une vitrine, mais il y a toujours des chemins plus courants, ceux où la vitrine rapporte réellement de l'argent sont les parcours critiques de l'utilisateur . La navigation au clavier uniquement ne fait pas exception à cela, alors mettons-nous d'accord sur un parcours moyen super simple basé sur le produit d'une histoire sur Storefront Accessibility, une écharpe jaune pour femme .

Parcours utilisateur critique

Cas d'utilisation de test : Jane cherche à acheter une écharpe jaune pour elle-même. D'autre part, John veut acheter la même écharpe pour sa petite amie. Pour clarifier davantage, Jane & John , ne sont pas liés, ils ne se connaissent pas.

Pour les deux, Jane et John , le voyage critique pour acheter une écharpe jaune pour femme ressemblera à ceci :

Tab jusqu'au champ de recherche > tapez « Écharpe jaune femme » > Tab jusqu'au premier produit (en prétendant qu'il s'agit de l'écharpe jaune) > Lancez le processus de commande.

Émuler ou simuler ?

Nous y arrivons, merci d'avoir lu jusqu'ici. La différence entre simulation et émulation est subtile. Puisqu'ils incluent tous les deux le mot "imitation", restons-en à ce concept. Pour l'exemple suivant, nous allons utiliser un logiciel d'émulation, appelons-le donc émulation, mais sachez que je veux vraiment dire imitation.

Maintenant, l'imitation est la clé de l'empathie, et nous devons le faire aussi près que possible de la façon dont Jane et John navigueront vers cette écharpe jaune dans une devanture de magasin. Nous savons que les deux utiliseront la navigation au clavier uniquement, ce qui nous laisse les touches suivantes pour terminer le paiement.

Interactions clavier

  • LANGUETTE
  • MAJ+TAB
  • ESPACE
  • ENTRER
  • Touches directionnelles.

Ok, c'est là que j'ose le public du bar et vous, le lecteur - je plaisante - je vous invite gentiment à choisir une ou plusieurs vitrines en ligne sur le Web. Mais le plus important, celui où vous pouvez trouver une écharpe jaune pour femme et essayer d'aller aussi loin que possible dans le processus de paiement en imitant Jane & John . Cela dit, vous n'êtes pas "en fait" obligé d'acheter l'écharpe à chaque fois, pas si vous ne le souhaitez pas.

Émuler Jane

Suivez le parcours utilisateur critique en utilisant uniquement les touches du clavier que Jane utiliserait.

Imitant John

Activez l' extension ChromeVox et — enfin ! — fermez les yeux , puis suivez le parcours critique de l'utilisateur en écoutant ce que la vocalisation vous dit et en utilisant uniquement les touches du clavier que John utiliserait.

Problèmes courants

Lorsque vous comparez votre expérience d'émulation à travers différents types d'accessibilité de vitrine, vous pouvez rencontrer des problèmes tels que : l'impossibilité de passer à l'élément logique suivant de la page en atterrissant sur des éléments aléatoires, l'impossibilité de tabuler à partir de n'importe quel point vers l'avant (piège du clavier) , incapable d'entendre une description significative du produit, comme sa couleur ou son prix. Malheureusement, cela est très courant et indique le manque d'accessibilité Web sur un site Web particulier.

Conformité aux critères

Clarification des termes : les critères sont au pluriel ; critère est singulier.

Maintenant, si vous avez réussi à terminer le processus de paiement en émulant Jane & John , alors cette vitrine est conforme aux critères WCAG 2.0 suivants.

Tableau montrant 16 critères pour l'émulation réussie de Jane et John (Clavier, Pas d'interruption du clavier, Blocages de contournement, Ordre de mise au point, Navigation cohérente, Mise au point visible, Contenu non textuel, Informations et relations, Titre de la page, Objectif du lien, Langues de la page, sur Focus, Identification des erreurs, Analyse, En-tête et étiquettes, Prévention des erreurs). Les 6 premiers critères sont pour Jane et John, et les 10 restants sont uniquement pour John.

Remarquez comment la plupart des critères sont de niveau A avec seulement quelques niveaux AA. À mon avis, ceux ci-dessus sont les critères les plus importants à respecter "pour les débutants". Ils ont jeté les bases pour créer une expérience utilisateur plus riche. Par exemple, ajouter plus de critères de niveau AA ou brancher d'autres technologies d'assistance comme les afficheurs braille. Considérons-les comme la partie la plus difficile, ou indépendante des critères « plus simples », comme ceux concernant l'utilisation de la couleur, la taille du texte, la vidéo et l'audio.

Eh bien, c'est là que l'histoire du bar se termine. Que vous ayez pu ou non terminer l'émulation en tant que Jane & John . Même si vous venez d'essayer un peu, cela mérite un toast. Comme vous l'avez peut-être déjà compris, en fermant les yeux , vous avez commencé à « voir » où se situent les problèmes d'accessibilité de la vitrine. Alors bravo à ça ! avec tout ce que vous buvez.

En conclusion

  1. Nous pouvons valider l'accessibilité de la devanture en « marchant le pas » avec empathie.
  2. Lors de la planification, du développement et du test d'une vitrine en ligne, tout effort dans le processus pour supprimer les bogues liés aux 16 critères énoncés ci-dessus facilitera le paiement pour les utilisateurs handicapés.
  3. Un développeur Web doit s'assurer qu'un parcours utilisateur critique accessible fonctionne réellement avant de le confier au testeur QA.
  4. Le meilleur outil de validation est l'empathie.
  5. Parfois, en fermant les yeux, nous pouvons « voir » où se situe le problème.
  6. Les acheteurs handicapés devraient pouvoir acheter en ligne comme ils le font dans les magasins physiques.
  7. Personne n'est à l'abri d'un handicap pendant toute une vie, dans le meilleur des cas : nous vieillissons tous.
  8. L'accessibilité Web doit être considérée comme une opportunité commerciale dans toute stratégie de prospection avant qu'elle ne devienne un scénario de poursuite en justice .