Fermer

septembre 3, 2019

Études de cas d'accessibilité


Il est essentiel de mettre en œuvre l'accessibilité correctement dès le début. Dans ces études de cas, nous pouvons apprendre comment d'autres entreprises ont réussi (ou non) et comment nous pouvons mieux le faire nous-mêmes.

Case The Case for Accessibility

Selon les recherches autorisées, environ 18% de la population mondiale a un handicap qui entrave l’accès au contenu numérique, les personnes âgées représentant environ 50% de ces personnes. [1] Ces 18% doivent se battre à travers des interactions numériques qui peuvent les frustrer et les isoler. [2]

Ces chiffres nous indiquent donc qu'une partie importante de la population dépend de l'accessibilité. Toutefois, si cela ne suffit pas à encourager votre client, votre chef ou votre chef de projet à respecter les règles d'accessibilité, faites-leur savoir à quel point une opportunité leur manque.

L'implémentation de l'accessibilité augmente le trafic et améliore le classement des moteurs de recherche. [1] Legal & General Group ou L & G en ont été les témoins directs. Quelques heures après la mise en œuvre de correctifs d'accessibilité basés sur un audit d'accessibilité, ils ont constaté une augmentation de 25% du trafic généré par les moteurs de recherche. Il a rapidement augmenté pour atteindre 50% et leur taux de conversion a doublé au cours des trois premiers mois. En termes de retour sur investissement, l’investissement réalisé dans l’accessibilité de leur site a permis un retour sur investissement de 100% en seulement un an. [1] Auparavant, j’étais spécialiste du marketing numérique et je n’ai jamais entendu parler de quelque chose d'aussi simple que celui-ci qui puisse donner de tels résultats.

De plus, vous n'avez pas vraiment le choix. Surtout si vous êtes grand dans votre secteur. Target a appris sa leçon à la dure: ils n'ont accepté de rendre leur site accessible qu'après avoir déboursé environ 10 millions de dollars pour régler un litige en classe devant la Fédération nationale des aveugles. [3]

Mais l'accessibilité Web ne consiste pas uniquement à éviter les poursuites ou à favoriser l'inclusion, il faut également faire une analyse de rentabilisation. Le marché mondial des personnes handicapées est évalué à 6 000 milliards de dollars. [4] Réfléchissez donc à deux fois si vous considérez que l'accessibilité n'est pas une priorité.

Déficience de la mobilité Étude de cas

Nous sommes nombreux à penser que l'accessibilité est une règle et que les meilleures pratiques doivent être respectées lors de la conception et du développement d'une interface. Eh bien, comme pour les interfaces mobiles, les meilleurs résultats sont obtenus lorsque vous pensez à l'accessibilité dès le premier jour en incluant les utilisateurs qui incluent des personnes handicapées.

Un excellent exemple est CityMaas Assist . CityMaas Assist a pour mission de fournir des informations sur les déplacements urbains principalement aux personnes ayant «des capacités et des handicaps divers» grâce à des fonctionnalités conçues pour répondre aux besoins de leurs utilisateurs cibles. [2]

L'équipe de conception a commencé par collecter des informations sur les différents obstacles que rencontrent généralement les utilisateurs lors de leurs déplacements en ville. Leurs designers ont voyagé toute une après-midi avec leur fondateur (qui est attaché en fauteuil roulant et incapable d'utiliser ses bras), utilisant différents types de transport pour comprendre les points douloureux qu'il rencontre et les fonctionnalités qui pourraient aider à les surmonter. [2]

Avec cette information en main, les concepteurs ont été en mesure de créer une personne utilisateur à laquelle ils peuvent se rapporter pour mener à bien le processus de conception UX et UI. [2]

Les caractéristiques essentielles de ce processus sont les suivantes: [2]

  1. La possibilité de planifier son voyage de a à z, y compris les informations à connaître concernant ses besoins.
  2. Réservez et payez tous vos billets à l'avance une application
  3. Vérification de la disponibilité d'un accès en fauteuil roulant tout au long du voyage
  4. Appel à l'aide depuis n'importe quel point de l'application

En termes d'exigences de conception, l'équipe a pris en compte les considérations suivantes: [2]

 Source : City Aide - Étude de cas UX / UI

  1. Choisir “FS Me”, une police de caractères spécialement conçue pour améliorer la lisibilité.
  2. Choisir une palette de couleurs composée d'un vert vif (boutons / CTA), d'un bleu vif pour les CTA importantes et un gris bleu foncé pour le fond. C'était parce que:
        

    • Le jaune affecte les autistes
    • Les couleurs orange et rouge sont interdites aux daltoniens
    • Nécessité de maintenir un contraste élevé
    •     

  3. Garder une mise en page propre et concise en minimisant les informations affichées à l'écran (pour ne pas submerger les utilisateurs sensibles à un flux important d'informations)
  4. Simplifier les instructions sur l'écran de navigation, mais aussi agrandir instructions les plus importantes
  5. Ajoutez un bouton SOS bleu clair visible sur tous les écrans de l'application dans le coin supérieur droit (visible mais ne gênant pas)
  6. À l'aide d'une iconographie facile à comprendre, accompagnée de sa description textuelle, éviter la confusion
  7. Les boutons étaient beaucoup plus volumineux que les 44 * 44pt recommandés dans les Human Interface Guidelines de Apple

. Même s'il s'agit d'une application spécialement conçue pour les personnes handicapées, elle nous donne un aperçu de la manière d'inclure des Les utilisateurs dans notre conception ont pensé et procédé depuis le premier jour.

Déficience auditive Study Étude de cas

Nous pourrions penser que la façon dont nous pouvons adapter les besoins des personnes ayant une déficience auditive est Cependant, certains détails peuvent faire une différence et les empêcher de profiter pleinement d'un produit ou d'un service.

Par exemple, bien sûr, Netflix offre le sous-titrage codé, mais il doit tenir compte non seulement du sous-titrage codé pour le dialogue. mais aussi pour les sons environnants. [5]

Une autre fonctionnalité simple qui fait toute la différence est la possibilité d'utiliser les produits Apple Mono Audio (lecture des canaux audio gauche et droit via celui de votre choix). ) ou en ajustant la balance audio dans les deux oreilles. Cela permet aux personnes ayant une déficience auditive de ne pas rater une expérience de base comme écouter ou même pratiquer de la musique comme tout le monde. C’est simple mais ce n’est pas une petite particularité. N'oubliez pas à quel point c'était frustrant de constater que l'un des écouteurs de votre casque ne fonctionnait pas? Eh bien, imaginez avoir à vous en occuper pour la vie! [6]

Déficience visuelle Étude de cas

Selon une étude, 30,4% des personnes handicapées perdent tellement de temps lorsqu'elles utilisent une plate-forme Web. Cela pourrait s’expliquer par le fait qu’il n’existe pas de texte alternatif (ALT) pour les images ou que, dans certains cas, la conception de la page puisse amener le lecteur d’écran à donner un retour erroné à l’utilisateur, ce qui le poussera à cliquer sur le mauvais lien. [7]

Un cas intéressant que j'ai rencontré est celui de BBC iPlayer. Cela montre que même si vous avez «tous les ingrédients traditionnels [best practices and guidelines] d’une page accessible en place», cela ne signifie pas pour autant que son accessibilité est optimisée pour un utilisateur de lecteur d’écran. [8]

Par exemple: [8]

  • Les liens de navigation tels que «catégories», «chaînes» et «A à Z» sont situés en bas de la page. Les utilisateurs de lecteurs d'écran doivent donc parcourir toute la page avant de pouvoir savoir où ils doivent aller. chercher le contenu qu'ils veulent.

 Source: L'accessibilité a son origine avec UX: une étude de cas sur BBC iPlayer

  • Les liens ont été lus deux fois parce que la vignette et l'en-tête avaient des liens distincts redirigés vers le même programme. Cela créait de la confusion chez les utilisateurs de lecteurs d'écran.
  • Lorsque les utilisateurs ayant accès au clavier cliquaient pour la première fois sur le lien "catégories", un panneau contenant seulement quatre éléments était affiché et ils devaient cliquer à nouveau pour voir la liste complète. Comment sauraient-ils? Ceci entraînait simplement que les utilisateurs abandonnent ALTOGETHER pour utiliser la plate-forme.

Les consignes d'accessibilité ont donc été respectées lors de l'élaboration du site Web, mais l'accessibilité n'a pas été réellement prise en compte lors de la conception. [8]

Comme le dit Henny Swan (l'auteur de cette étude de cas): «Une partie du problème est que les normes et les directives ont tendance à se concentrer davantage sur le code que sur la conception, plus sur le résultat que sur le résultat , plus sur la conformité que l'expérience. En tant que tel, des pages conformes sur le plan technique pourraient être créées de manière à ne pas être les plus utilisables par les utilisateurs handicapés. ” [8]

Ce fut une grande leçon pour l'équipe de la BBC dont nous pouvons également tirer des leçons. [19659006] Ce qu’ils ont ensuite fait a été de reconsidérer tout leur cadre de conception. Au lieu de fonder leurs efforts en matière d'accessibilité sur des normes et des directives, ils ont utilisé ces normes pour informer leur cadre de conception nouvellement conceptualisé de l'intérieur. [8]

Ce nouveau cadre de conception reposait sur quatre principes UX: donner aux utilisateurs le choix, leur donner le contrôle, concevoir avec la familiarité et prioriser les fonctionnalités qui ajoutent de la valeur. [8]

Cela signifie qu'il ne faut pas supposer de quelle manière l'utilisateur souhaite accéder à certains contenus ou fonctionnalités, que ce soit en termes de navigation ou de compréhension. [8]

Cela signifie également que les schémas visuels et le langage utilisé doivent être familiers. Bien entendu, les concepteurs ne doivent pas restreindre leur créativité, mais ils doivent également conserver un certain équilibre entre le nouveau et l'ancien pour ne pas dérouter les utilisateurs, car ils s'appuient sur des modèles de conception connus pour parcourir les pages et accéder aux fonctions. Il en va de même pour la formulation – un étiquetage cohérent doit également être utilisé pour les titres, les boutons, les liens de navigation et le texte de remplacement. [8]

Enfin, nous devons garder à l’esprit que les caractéristiques que nous considérons petites pour les utilisateurs non handicapés peuvent avoir un impact considérable sur l’expérience de l’utilisateur qui a un handicap. Vous pouvez penser directement aux sous-titres codés, mais d’autres fonctionnalités ont le même impact.

Par exemple, l’ajout d’une page de favoris sur la plate-forme BBC iPlayer peut sembler être un «avantage appréciable» pour les utilisateurs non handicapés, mais cela a fait une énorme différence pour les utilisateurs handicapés. Il s'agissait même de la fonctionnalité la plus demandée par ce groupe d'utilisateurs, car elle leur permettait d'accéder à leur contenu favori sans les tracas habituels qu'ils devaient résoudre à chaque fois. [8]

Pour aller encore plus loin dans ce à quoi ressemblent de superbes fonctionnalités, parlons une seconde du texte alternatif automatique de Facebook. [9]

C'est un excellent témoignage de la contribution potentielle de l'intelligence artificielle à l'accessibilité.

Auparavant, les utilisateurs de lecteurs d'écran sur les médias sociaux n'entendaient le mot «photo» ou «vidéo» que lorsqu'ils est tombé sur eux dans leur fil d'actualité. [9]

C'est assez réducteur (pour le moins qu'on puisse dire) comme expérience de média social, parce que c'est presque tout ce que nous partageons tout au long de la journée sur les médias sociaux.

Mais maintenant, Facebook a implémenté un objet. technologie de reconnaissance (technique de vision par ordinateur permettant d'identifier des objets dans des images et des vidéos), afin que les utilisateurs de lecteurs d'écran sur un périphérique iOS entendent le message suivant: «L'image peut contenir trois personnes souriantes à l'extérieur.» [9] Cela leur permet de participer. dans la conversation!

Déficience cognitive – Étude de cas

Jusqu'à présent, nous avons eu des déficiences sensorielles et physiques, mais l'expérience de l'utilisateur peut être aussi compliquée pour les personnes ayant une déficience cognitive que pour les autres déficiences.

Parmi les problèmes rencontrés par les utilisateurs ayant des déficiences cognitives, on peut citer:
– Incapacité de se souvenir des mots de passe si l'utilisateur a une déficience de la mémoire à court terme [10]
– Incompréhension des instructions lorsqu'un langage inconnu ou compliqué est utilisé. Ceci est commun aux personnes ayant un handicap lié au langage et à la communication [10]
– Difficulté à se concentrer sur des tâches lorsqu'une page est pleine d'éléments gênants ou qui interrompt les popups / notifications [10]

Bien que je sois venu Parmi beaucoup de bonnes pratiques et de directives visant à créer des plates-formes accessibles pour les personnes ayant une déficience cognitive, je suis en fait un peu déçu car je ne pouvais pas trouver un véritable exemple de conception de l'accessibilité dès le premier jour pour les personnes ayant une déficience intellectuelle.

vous rencontrez un cas intéressant, partagez-le avec nous dans les commentaires.

Cependant, j'ai pu trouver une étude réalisée par l'Institut sur les handicaps qui a montré ce que les personnes ayant une déficience cognitive accordaient en priorité à l'accès. instructions: [11]

  1. Utilisez des images, des icônes et des symboles avec du texte
  2. Utilisez un texte clair et simple
  3. Utilisez une navigation et un design cohérents sur chaque page
  4. Utilisez des en-têtes, des titres et invite
  5. Les lecteurs d'écran de support. Utilisez des balises de texte alternatives
  6. Utilisez des polices plus grandes – polices d'au moins 12 ou 14
  7. Mise en page simple et épurée
  8. Conservez les espaces: utilisez des marges larges
  9. Personnalisez votre site Web et donnez le contrôle de: taille du texte , positionnement de la navigation (droite, gauche), contraste, gros caractères, son
  10. Utilisez les touches exit, home, aide, page suivante boutons sur chaque page
  11. Utilisez des polices sans empattement, telles que Arial, Verdana, Helvetica, Tahoma
  12. Définissez des boutons de navigation clairs, volumineux et cohérents
  13. Utilisez des listes numérotées plutôt que des puces
  14. Agrandissement des polices pris en charge pour les navigateurs Web
  15. Utilisation de la couleur pour le contraste
  16. Contrôle du niveau de lecture à l'aide d'outils automatisés
  17. Don pas juste justifier le texte; utilisez des marges droites à bords déchiquetés
  18. Utilisez des majuscules et des minuscules. MAJUSCULES
  19. Fournissez des sous-titres vocaux (fichiers audio) pour le texte
  20. Fournissez des sons / commentaires lorsque les mots sont lus à voix haute
  21. Utilisez des méthodes de navigation ( c.-à-d. «annuler» ou «bouton précédent» pour aider l'utilisateur à récupérer après une perte)
  22. Donner des informations sur les actions d'un utilisateur (par exemple, confirmer les choix corrects, alerter les utilisateurs des erreurs ou des erreurs possibles)

Enfin, je souhaite à nouveau passer en revue Certaines fonctionnalités intégrées fournies par Apple, parce qu'elles font vraiment un excellent travail, consistent à créer des fonctionnalités simples permettant aux utilisateurs présentant des déficiences d'avoir une expérience presque similaire de l'utilisation de leurs produits en tant qu'utilisateurs non handicapés:

  • Les personnes ayant une déficience cognitive trouvent qu'il est plus facile d'apprendre à utiliser l'audition que la lecture. La synthèse vocale lit à haute voix tout ce que vous mettez en surbrillance dans 42 langues, dans la voix et le débit qui conviennent aux préférences de l'utilisateur, puis Speak Screen lit l'intégralité du contenu d'une page à l'utilisateur. [6]
  • Les arrière-plans plus sombres aident les utilisateurs présentant des déficiences cognitives à se focaliser. Ainsi, lorsqu'ils activent le mode Dark sous Mac OS, le texte devient blanc et l'arrière-plan devient sombre en mode intégré. des applications telles que les applications Calendrier et Mail. [6] En fait, je l’utilise simplement parce que c’est beaucoup mieux à mon avis
  • Parfois, nous rencontrons cette fonctionnalité par accident et nous trouvons cela ennuyeux lorsque c’est le cas et que nous n’essayons pas de chercher un mot. Mais pour de nombreux utilisateurs ayant des difficultés d’apprentissage, la fonction Dictionary est utile car ils peuvent y accéder depuis n’importe où sur leur ordinateur sans perturber leur expérience de lecture. [6]
  • Pour certaines personnes, l'expérience du Web est écrasante – même les personnes sans déficience de la mise au point trouvent Internet accablant. À l'aide de Safari Reader les utilisateurs peuvent se concentrer sur le contenu qu'ils souhaitent en supprimant les publicités, les boutons et les barres de navigation. [6]

? Conclusion

Je pense que nous pouvons tous convenir que développer une véritable accessibilité pour les utilisateurs handicapés ne consiste pas uniquement à suivre les directives, mais aussi à s'appuyer sur un cadre de conception qui responsabilise tous les utilisateurs, quel que soit leur état.

signifie que l'accessibilité consiste également à permettre aux utilisateurs d'accéder aux fonctionnalités et au contenu de la manière qu'ils jugent appropriée, tout en maintenant leurs options ouvertes.

Car, à l'origine de tout, la technologie consiste à donner plus de contrôle aux personnes, sans les restreindre Nos hypothèses préconçues sur ce qui est juste pour eux et ignorant les autres options possibles qu’ils pourraient préférer.

La bonne nouvelle, c’est que la technologie est un cadeau qui continue de nous être donné – à nous tous si nous l’utilisons correctement. Il peut réduire l'écart entre différents niveaux au lieu de le renforcer.

P.S. Je n'ai pas mentionné les incapacités neurologiques, parce que, lorsque nous parlons des incapacités sensorielles, physiques et cognitives, nous couvrons les implications de la vie avec une incapacité neurologique.


En savoir plus sur l'accessibilité

Nous avons créé un livre blanc sur l'accessibilité pour les développeurs, qui couvre tout, des lois au codage, en passant par les tests.

Téléchargez le livre blanc: Accessibilité pour les développeurs

Ajout de l'accessibilité à vos applications

Un moyen simple de s'assurer que vous créer des applications Web accessibles consiste à commencer avec des composants des bibliothèques de Kendo UI. Nos composants sont tous conformes à la plainte WCAG et vous offrent une grande fonctionnalité, des grilles et graphiques aux programmateurs et aux sélecteurs. Prenez une longueur d'avance sur l'interface utilisateur de votre application et sur la conformité en matière d'accessibilité en même temps.

En savoir plus sur: Interface utilisateur du kendo


Sources:

[1] Make-Sense – Avantages de l'accessibilité du Web – Étude de cas
[2] Jimmy Hay – Aide de CCity – Étude de cas UX / UI.
[3] Jonathon Hensley – Le coût élevé de la discrimination numérique: pourquoi les entreprises devraient-elles se soucier du Web? accessibility
[4] Initiative pour l'accessibilité du Web (WAI) du W3C – Analyse de rentabilité de l'accessibilité numérique
[5] Adina Katz – Accessibilité et facilité d'utilisation: une étude de cas avec Netflix
? [6] Apple –
emp [7] Mohammed Saleh Hassouna, Noraidah Sahari et Amirah Ismail – Accessibilité du site Web universitaire aux utilisateurs totalement aveugles
[8] Henny Swan – L'accessibilité a pour origine UX: A BBC iPlayer Étude de cas
[9] Fac Salle de presse numérique – Utiliser l'intelligence artificielle pour aider les aveugles 'Voir' Facebook
[10] Initiative pour l'accessibilité du Web du W3C (WAI) – Rendre le contenu utilisable pour les personnes ayant des troubles cognitifs et d'apprentissage ? [11] Mark G. Friedman et Diane Nelson Bryen – Recommandations en matière de conception d'accessibilité Web pour les personnes ayant une déficience cognitive





Source link