Fermer

novembre 30, 2020

Tisser l'accessibilité Web à la convivialité


À propos de l'auteur

Créateur de produits @ Wix • Codeur • Addict de chaussures de course
En savoir plus sur
Uri

Dans cet article, Uri Paz explique comment un site conforme aux directives d'accessibilité peut encore présenter des problèmes d'utilisabilité lors de tests avec de vrais utilisateurs. Découvrez comment le tissage des meilleures pratiques d'accessibilité avec des tests d'utilisabilité peut aider autant de personnes que possible à utiliser pleinement votre site.

En adoptant officiellement les normes d'accessibilité du Web, vous pouvez donner accès aux personnes malvoyantes sans les impliquer dans le développement du produit. cycle de vie, mais cela signifie-t-il que le produit final est utilisable? Dans cet article, j'aborderai brièvement les déficiences visuelles, ainsi que le lien entre les normes d'accessibilité Web et les principes d'utilisabilité. Je vais également partager mes principaux points à retenir d'un test d'utilisabilité que j'ai effectué avec des participants malvoyants et aveugles.

Qu'est-ce que la déficience visuelle?

Le terme déficience visuelle fait référence aux personnes qui peuvent voir mais qui ont une diminution de l'acuité visuelle ou du champ visuel. La déficience visuelle affecte la capacité à effectuer des activités quotidiennes, telles que la lecture, la marche, la conduite automobile et les activités sociales, qui deviennent toutes difficiles (et parfois même impossibles). Il existe une gamme de déficiences visuelles qui varient d'une perte de vision légère à grave dans un ou les deux yeux.

En voici quelques exemples:

  • Central Scotoma
    Perte de vision dans le champ visuel central.
 Capture d'écran d'une papeterie en ligne avec un grand cercle noir au centre et le reste de l'écran est un peu flou pour montrer l'impact du scotome central
Funkify Disability Simulator avec «Peripheral Pierre» activé. ( Grand aperçu )
  • Tunnel Vision
    Perte de vision dans le champ visuel périphérique.
 Capture d'écran d'une papeterie en ligne avec seulement une petite partie du site visible, pour montrer l'impact of tunnel vision
Funkify Disability Simulator avec "Tunnel Toby" activé. ( Grand aperçu )
  • Hémianopie
    Perte de vision dans la moitié du champ visuel.
 Capture d'écran d'une papeterie en ligne avec seulement la moitié de l'écran visible, pour montrer l'impact de l'hémianopie [19659020] NoCoffee Vision Simulator </a> avec «Side (hemianopia)» activé. (<a href= Grand aperçu )
  • Cécité
    Ce terme n'est utilisé que pour la perte totale ou presque complète de la vision.

Warp & Weft

Le tissage est une méthode de production textile dans laquelle la chaîne longitudinale et la trame transversale se réunissent pour former un tissu. Comme dans le tissage, la création d'une expérience utilisateur pour les personnes malvoyantes repose sur l'imbrication de deux composants: l'accessibilité et la convivialité.

 Schéma montrant la structure des fils de chaîne (vertical) et de trame (horizontal) dans un tissage
( Grand aperçu )

Warp – Accessibilité

L'accessibilité Web signifie que les sites Web, les applications Web et les technologies sont conçus et développés pour que les personnes handicapées puissent les utiliser. Plus spécifiquement, les gens peuvent: percevoir, comprendre, naviguer et interagir avec le Web et y contribuer.

Il existe une gamme de handicaps qui peuvent avoir un impact sur la façon dont les gens accèdent au Web, notamment auditifs, cognitifs, neurologiques, physiques, de la parole, et visuel.

«La puissance du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, est un aspect essentiel ».

– Tim Berners-Lee, inventeur du World Wide Web

Afin d'assurer l'universalité du Web et de permettre l'accès à tous, comme l'a noté Berners-Lee , il existe un large éventail de normes d'accessibilité du Web (accompagnées d'une myriade d'acronymes).

Concentrons-nous sur ces trois éléments clés:

  • Web Content Accessibility Guidelines (WCAG)
    Define how content (such as text text , images, formulaires) doivent être créés de façon à être accessibles grâce à l'utilisation du son, à la navigation sans souris, à la compatibilité avec les technologies d'assistance, etc.
 Capture d'écran de la documentation 2.1 des directives d'accessibilité du contenu Web avec les principales sections mises en évidence , y compris le principe, la ligne directrice et le critère de succès
WCAG 2.1 a 13 lignes directrices qui sont organisées en 4 principes: perceptible, exploitable, compréhensible et robuste. Pour chaque ligne directrice, il existe des critères de succès testables qui se situent à trois niveaux: A, AA et AAA. ( Grand aperçu )

Le respect des directives d'accessibilité du Web est technique et nécessite un haut niveau d'expertise. Bien que vous puissiez utiliser ces directives pour créer un produit plus accessible, cela signifie-t-il que le produit est également facile à utiliser?

Alors que j'ai testé des participants malvoyants et aveugles sur un produit qui était accessible conformément aux directives, j'ai rencontré ce qui suit cas:

  • Les participants malvoyants ne pouvaient pas lire une police de grande taille parce que son poids était trop mince.
  • Les participants aveugles n'ont pas pu réserver une réservation dans un restaurant parce que la navigation entre les dates était trop difficile à comprendre. [19659040] Les participants malvoyants n'ont pas pu trouver leur caisse parce qu'elle s'ouvrait ailleurs sur l'écran qui était hors de leur champ visuel.

En d'autres termes, l'adoption formelle des directives d'accessibilité du Web peut certainement conduire à la conformité, mais pas nécessairement à la convivialité . Ceci est également reconnu dans la documentation du W3C où il y a une référence explicite au fait que l'utilisabilité doit toujours être prise en compte:

«Pourtant, lorsque les concepteurs, les développeurs et les chefs de projet considèrent l'accessibilité comme une liste de contrôle pour répondre à ces normes, l'accent est mis uniquement sur les aspects techniques de l'accessibilité. En conséquence, l'aspect de l'interaction humaine est souvent perdu et l'accessibilité n'est pas atteinte. »

J'aime particulièrement la description illustrée de Bruce Lawson dans l'introduction du livre Web Accessibility: Web Standards and Regulatory Compliance :

«Je ne voudrais pas que vous pensiez que rendre vos sites accessibles est juste une question de suivre une recette; pour créer un pudding d'accessibilité nourrissant, ajoutez une partie de CSS, une partie de code valide, une pincée de balisage sémantique et une tasse de directives WCAG. Ce serait bien si je pouvais garantir que suivre servilement une telle recette rendrait tout beau… mais le fait ennuyeux est que les gens sont des personnes et insistent pour avoir des besoins et des capacités différents. »

Le respect des normes d'accessibilité est un objectif nécessaire. (et souvent exigé par la loi), mais il ne peut exister dans le vide.

Trame – Utilisabilité

L'utilisabilité est une mesure de la mesure dans laquelle un utilisateur spécifié dans un environnement particulier peut utiliser une interface utilisateur pour atteindre un objectif défini.

La convivialité n'est pas une science exacte qui consiste en des formules ou des réponses en noir et blanc. Au fil des années, divers modèles d'utilisabilité ont été proposés pour mesurer l'utilisabilité des systèmes logiciels. L'un des modèles a été créé par Jacob Nielsen, qui a proposé dans son livre de 1993 Ingénierie de l'utilisabilité que la convivialité n'est pas une propriété unique et unidimensionnelle d'une interface utilisateur, mais se compose de cinq attributs de base:

  1. Apprentissage
    Est-il facile pour les utilisateurs d'accomplir des tâches de base la première fois qu'ils rencontrent la conception?
  2. Efficacité
    À quelle vitesse les utilisateurs peuvent-ils effectuer des tâches et être productifs après avoir appris la conception?
  3. ] Mémorabilité
    À quelle vitesse les utilisateurs retournés peuvent-ils rétablir leur compétence, après une période de non-utilisation du dessin, sans avoir à tout réapprendre?
  4. Erreurs
    Combien d'erreurs font les utilisateurs, comment
  5. Satisfaction
    Dans quelle mesure les utilisateurs sont-ils subjectivement satisfaits de l'utilisation de la conception?

Pour s'assurer qu'un produit est utilisable, il est essentiel que ces cinq pierres angulaires sont d

Ce que j'ai appris en effectuant un test d'utilisabilité avec des participants malvoyants et aveugles

Un test d'utilisabilité est une interview structurée où les participants qui correspondent à un public cible effectuent une série de tâches. Pendant que les participants travaillent, ils décrivent verbalement leurs réactions aux interactions avec le produit. Cela permet aux observateurs de comprendre non seulement ce que font les participants dans l'interface, mais aussi pourquoi ils le font.

Quand j'ai effectué mon premier test d'utilisabilité avec des participants malvoyants et aveugles sur un produit conforme à la normes d'accessibilité, je n'ai pas pu trouver trop d'informations sur la conduite de ces types de sessions. Alors, j'ai pensé partager quelques points saillants du processus. Celles-ci sont divisées en trois parties:

  1. Avant la session
  2. Pendant la session
  3. Après la session
 Un participant malvoyant examine une interface utilisateur agrandie pendant qu'un modérateur regarde de côté
Nous avons eu 5 séances: 2 avec des participants malvoyants et 3 avec des participants aveugles. ( Grand aperçu )

1. Avant la session

Définition du but du test

Ceci est un point de départ pour un test d'utilisabilité. L'objectif du test doit être clair, spécifique, réalisable et pertinent. La façon dont nous avons défini l'objectif est de collaborer avec une équipe multidisciplinaire: concepteurs, chefs de produit, développeurs, rédacteurs de contenu et assurance qualité – chaque rôle apporte une perspective et une expertise différentes.

Creating Tasks

Depuis les participants malvoyants et aveugles peut prendre plus de temps pour terminer les tâches en raison de la façon dont ils naviguent sur le site, nous avons hiérarchisé les tâches en fonction de ce qui est le plus important pour nous, mais cela ne signifie pas que les tâches complexes doivent être compromises.

Setting A Schedule:

L'établissement de notre calendrier pour les sessions d'utilisation nous a obligé à prendre en compte une série de problèmes, en particulier compte tenu de la complexité de notre produit et des limitations physiques des participants. Cela comprenait:

  • Temps pour accompagner le participant lors de l'entrée et de la sortie du laboratoire (nous avons affecté un membre du personnel pour accompagner chacun des participants).
  • Temps pour configurer et organiser les paramètres de technologie d'assistance pour chacun des participants, en fonction de leurs capacités et s'ils ont apporté leur propre équipement.
  • Un temps pendant lequel les participants peuvent naviguer confortablement dans l'interface.
  • Temps de débriefing avec le personnel après chaque session.

Nous avons fixé une heure pour chaque session et 45 minutes entre les sessions, ce qui était stressant et nous obligeait à nous précipiter (il est préférable de prendre une heure entre les sessions).

Recrutement des participants

La sélection des participants dont les antécédents et les capacités représentent le public cible est un élément crucial du processus de test. . Dans notre cas, nous recherchions des candidats malvoyants et aveugles qui ont déjà acheté des produits en ligne.

Les sources pour trouver des participants peuvent varier, comme les centres d'apprentissage de l'information et de la technologie pour les personnes malvoyantes dans les hôpitaux, les collèges et les universités.

Dans notre cas, ma femme, ophtalmologiste de profession, m'a référée à l'exploitant du Centre d'information pour les malvoyants et les aveugles de l'hôpital où elle travaille. Pour ma plus grande joie, j'ai rencontré quelqu'un qui était heureux de m'aider et m'a référé à un groupe de candidats pertinents.

Afin de préparer les candidats, nous avons discuté de ce qui suit:

  • La nature du test, y compris qu'il y aura être des gens qui les regardent et un enregistrement de la session.
  • Leur expérience d'achat en ligne. Achètent-ils principalement sur un ordinateur ou un mobile? Quel est leur navigateur préféré? Quelles technologies d'assistance utilisent-ils? De plus, dans les cas où le test est effectué dans un pays non anglophone, demandez-leur le niveau de compétence linguistique lorsque l'interface est en anglais.
  • Que chaque participant recevra une prime (il est important de s'assurer que l'incitation est également accessible).
  • Si les candidats pouvaient apporter leur équipement avec eux.

Dans l'ensemble, la réactivité était élevée et la plupart des candidats ont exprimé le désir d'y assister.

Mise en place du poste de test

Les candidats qui ont confirmé que leur participation avait différentes manières d'interagir avec le Web. Certains consomment des informations en personnalisant les paramètres des polices, du contraste des couleurs, de l'agrandissement de l'écran ou en écoutant un lecteur d'écran, tandis que d'autres nécessitaient une combinaison de quelques éléments.

La plupart des participants n'étant pas intéressés à apporter de l'équipement avec eux (principalement en raison de difficultés à le transporter ou à avoir un ordinateur de bureau), nous avons dû nous en occuper nous-mêmes. Une fois que nous avons trouvé un membre du personnel qui comprenait comment configurer la technologie d'assistance, la configuration ou l'ajustement entre les sessions n'a pas pris longtemps.

Nous avons configuré divers navigateurs et technologies d'assistance, notamment NVDA, JAWS et ZoomText. [19659008] De plus, la caméra et le microphone doivent être ajustés aux besoins des participants malvoyants, qui doivent se rapprocher de l'écran et l'afficher sous différents angles.

Il est nécessaire de vérifier avant de commencer que le laboratoire est physiquement accessible car bien. Par exemple, qu'il n'y a pas d'escalier à l'entrée, il y a des toilettes accessibles, l'accès aux transports en commun et une place pour un chien guide pour s'asseoir.

Sending A Non-Disclosure Agreement (NDA)

Comme tout autre Dans le cas où vous souhaitez obtenir un consentement éclairé, vous pouvez envoyer la NDA en ligne à l'aide d'un PDF accessible.

Conduite d'une session d'essai à sec

Une semaine avant la session d'utilisation, nous avons effectué une analyse à sec avec un participant malvoyant afin pour éviter des difficultés inattendues. Par exemple, nous avons vu que l'outil de partage d'écran que nous utilisions était en conflit avec l'une des technologies d'assistance. De plus, la course à sec nous a aidés à avoir une meilleure idée du calendrier. Par exemple, la présentation du modérateur a été trop longue, nous n'avons donc pas pu vérifier certaines des tâches planifiées. En outre, cela nous a aidés à affiner le plan de test dans les cas où certaines tâches n'étaient pas claires, plus difficiles que prévu ou trop faciles. Tout aussi important, la course à sec a permis aux modérateurs de s'entraîner avec un «vrai» participant, et de se préparer mentalement à ce type de test d'utilisabilité.

2. Pendant la session

Modérateur

Le modérateur est une clé importante pour que ce type de test d'utilisabilité se déroule sans problème. Jared M. Spool a écrit un jour:

«Les meilleurs modérateurs de test d'utilisabilité ont beaucoup en commun avec un chef d'orchestre. Ils gardent le participant confortable et sans stress. Le modérateur essaie de faire oublier au participant qu'il est dans un environnement étranger avec une bande d'étrangers qui regardent intensément tout ce qu'il fait. Ils assurent la transmission des informations à l'équipe de conception, en particulier les nouvelles difficiles. Et ils font tout cela avec un flair organisé et de la patience, s'assurant que chaque aspect de l'expérience de l'utilisateur est exploré. »

Modération avec plusieurs personnalités: 3 rôles pour faciliter les tests d'utilisabilité

Dans un test avec participants malvoyants et aveugles, le chef d'orchestre doit se comporter avec encore plus de sensibilité. Par exemple, pendant les sessions où un lecteur d'écran a été utilisé – ce qui affecte la concentration des observateurs – il est important de demander aux participants de parler haut et fort, afin que nous puissions comprendre leur processus et comment ils comprennent les tâches.

Observers

] Nous avons invité des personnes compétentes de différents départements afin qu'elles soient directement exposées aux participants et aient une meilleure chance d'absorber les informations clés. Après tout, obtenir un rapport sur les résultats n'offre pas les mêmes avantages que de voir l'expérience des participants de première main.

Pendant le test, il est important d'être attentif et d'écouter le participant – même si le lecteur d'écran est distrayant.

 Trois personnes observant à distance la session d'utilisation depuis une salle de conférence
La beauté de l'accessibilité est qu'elle couvre un large éventail de rôles. Ici, vous pouvez voir un concepteur de produit, un développeur front-end et un analyste observant l'une des sessions. Au total, nous avons eu 12 observateurs. ( Grand aperçu )

3. Après la session

Rédaction d'un rapport

Après les sessions, nous avons rédigé un rapport avec nos idées tirées du test:

Certaines des idées étaient liées à des bogues que nous devions corriger. Par exemple, les participants aveugles ne trouvaient pas toujours un bouton particulier dans la boîte de dialogue Liste des éléments de NVDA, ou parfois ils ne recevaient pas de confirmation dans le lecteur d'écran après avoir cliqué sur le bouton "J'aime".

Certaines des informations étaient liées au contenu. Par exemple, certains participants aveugles n'ont pas remarqué qu'ils remplissaient le mauvais formulaire ou voulaient numériser une page entière rapidement, mais les chaînes des étiquettes aria étaient trop longues.

Certaines des informations étaient liées aux éléments visuels. Par exemple, les participants malvoyants qui utilisent un logiciel d'agrandissement ne comprenaient pas comment procéder lorsque l'action suivante apparaissait dans une zone différente de l'écran. D'autres fois, ils n'ont pas remarqué l'icône modale «fermer» – même si sa couleur était très contrastée.

En fin de compte, nous avons trouvé 65 problèmes qui affectent plusieurs services de l'entreprise.

De plus, notre rapport incluait des moments heureux des sessions. Par exemple, certains participants ont noté que l'utilisation d'une icône à côté d'un lien les aide car ils n'ont pas à lire le texte. D'autres ont aimé le contraste du texte de l'espace réservé, et certains ont mentionné que le zoom d'image fonctionnait très bien.

«Rien pour nous sans nous»

Le 26 juillet 2020, le monde a célébré le 30e anniversaire de la signature de l'American Disability Act (ADA). Cela a ouvert des portes qui ont été fermées trop longtemps pour les personnes handicapées, comme la participation à des activités quotidiennes de base comme voyager en bus, aller à l'école, assister à des films, visiter des musées, etc.

Tous les événements marquant cette signature historique ont été annulés. ou déplacé en ligne en raison de la propagation du coronavirus.

L'un des événements en ligne était le Virtual Crip Camp mettant en vedette des orateurs pionniers de la communauté des personnes handicapées. Dans l'invitation à cet événement, il y a un bus vert avec le slogan « Rien pour nous sans nous »:

 Un bus vert clair avec la phrase «Rien pour nous sans nous» sur le côté souligné en rouge. Des symboles de paix de couleur rouge sont situés à l'arrière et à l'avant du bus. Une béquille et diverses mains noires levées en poings et doigts d'amour sortent des fenêtres. Une rampe pour fauteuil roulant est visible avec la porte latérale grande ouverte. Le texte lit «Crip Camp: The Official Virtual Experience» en caractères gras noirs
The Invitation for the Virtual Crip Camp (Bien sûr, il est lié à la documentation de Netflix .) ( Large preview )

«Rien pour nous sans nous» exprime l'idée qu'une décision doit être prise avec la participation directe des personnes les plus touchées. Le slogan a été utilisé par les militants handicapés au cours des années 1990 et constitue un point de connexion entre divers mouvements de défense des droits des personnes handicapées à travers le monde. L'utilisation généralisée du slogan (et dans les réseaux sociaux utilisant le hashtag #NothingAboutUsWithoutUs ), reflète le désir des personnes handicapées de participer à l'élaboration des décisions qui affectent leur vie personnelle.

Le même ADN est commune avec l'approche User-Centered Design dont la philosophie est que le produit doit s'adapter à l'utilisateur – et non pas obliger l'utilisateur à s'adapter au produit. Dans le cadre de l'approche User-Centered Design il existe une collaboration avec les utilisateurs à travers une variété de techniques appliquées à différents stades du cycle de vie du développement du produit. Le test d'utilisabilité est l'une de ces techniques.

La vraie magie du test d'utilisabilité n'est pas le rapport de données après le test, mais le changement de perspective des membres de l'équipe qui regardent le participant en temps réel et absorbent ce que ces participants dire, penser, faire et ressentir. En conséquence, ils développeront de l'empathie et comprendront, refléteront et partageront mieux les besoins et les motivations d'une autre personne.

Dans le cas des participants handicapés, cette empathie est essentielle pour de nombreuses raisons – elle mobilise les observateurs, crée motivation pour le changement et sensibilise à l'expérience des personnes handicapées.

Bien que les outils automatisés qui proposent de rendre les sites Web accessibles puissent, au mieux, nous montrer à quel point notre site répond aux directives des WCAG, ils ne reflètent pas clairement son utilisation le site Web est destiné aux personnes handicapées. En ce qui concerne une approche mécaniste de l'accessibilité, mon collègue Neil Osman, ingénieur en accessibilité chez Wix qui est malvoyant, utilise souvent l'expression suivante:

"On peut mettre du rouge à lèvres sur un cochon, mais c'est toujours un cochon." [19659044] Faire un produit utilisable n'est pas seulement la capacité de s'appuyer sur une liste de normes d'accessibilité. Afin de créer des solutions pour les personnes handicapées, nous devons y être directement exposés.

Clause de non-responsabilité : Les informations fournies ici ne constituent pas et ne sont pas destinées à constituer des conseils juridiques; au lieu de cela, toutes les informations, contenus et matériels sont uniquement à des fins d'information générale. Les informations contenues dans ce document peuvent ne pas constituer les informations légales ou autres les plus récentes.


Crédits: Jeremy Hoover, Udi Gindi, Bat-El Sebbag, Nir Horesh, Neil Osman, Alon Fridman Waisbard, Shira Fogel et Zivan Krisher a contribué à cet article.

 Smashing Editorial (ra, il)




Source link