UX et Accessibilité : un duo de choc !

UX et Accessibilité : un duo de choc !

UX et Accessibilité : un duo de choc !

 

L’UX design s’intéresse à l’optimisation de l’expérience utilisateur. L’accessibilité numérique aux personnes porteuses de handicaps en fait partie.

Ce sujet peu abordé dans les publications spécialisées vaut le coup qu’on s’y attarde parce que les innovations apporté permettent plus d’accessibilité… à un plus large public !

Qu’est-ce que l’accessibilité numérique

Dans le cadre de la Web Initiative Accessibility (WAI), le World Wide Web Consortium (W3C) définit l’accessibilité numérique ainsi :

« L’accessibilité du Web signifie que les personnes en situation de handicap peuvent utiliser le Web. Plus précisément, qu’elles peuvent percevoir, comprendre, naviguer et interagir avec le Web, et qu’elles peuvent contribuer sur le Web. L’accessibilité du Web bénéficie aussi à d’autres, notamment les personnes âgées dont les capacités changent avec l’âge. »

En découle le Web Content Accessibility Guidelines (WCAG), un guide d’accessibilité du web qui s’articule autour de:

  1. Principes généraux
  2. Règles
  3. Critères de succès
  4. Techniques suffisantes et techniques recommandées

Mais avant d’aller plus loin, qu’en est-il de l’accessibilité en France ?

UX et Accessibilité : un duo de choc !
UX et Accessibilité : un duo de choc !

Réglementation et RGAA

Les personnes porteuses de handicaps représentent  10 et 20 % de la population française (INSEE) et le nombre de seniors susceptibles de perdre certaines capacités avec l’âge est en augmentation.

La loi du 11 février 2005, “Pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées” impose, l’article 47 sur l’accessibilité numérique des services publique. (HANDIRECT)

Cette loi a donné lieu à la rédaction du Référentiel Général d’Accessibilité pour les Administrations (RGAA) qui en est à sa 3e version. Ce texte reprend les 12 règles définies dans le WCAG, les critères de succès et les techniques.

Jusqu’en au 25 juillet 2019, l’obligation de suivre le référentiel ne concernait que les supports numériques des services publiques et des sociétés affiliés. Elle s’étand maintenant aux entreprises de plus de 250 millions de chiffre d’affaires qui devront progressivement adapter leurs sites web et applications.

Handirect, média spécialisé du handicap n’écarte pas la possibilité que de nouvelles lois ou décrets ne l’étendent à toutes les entreprises après 2021.

 

UX et Accessibilité : un duo de choc !
UX et Accessibilité : un duo de choc !

QUELS SONT LES BESOINS ?

Les besoins varient en fonction des handicaps. Pour adapter l’UX aux problématiques de ces différents utilisateurs, il faut comprendre les difficultés qu’ils rencontrent sur une interface numérique.

HANDICAP MOTEUR

Il recouvre l’ensemble des troubles pouvant entraîner une atteinte partielle ou totale de la motricité, notamment des membres supérieurs et/ou inférieurs (difficultés pour se déplacer, conserver ou changer une position, prendre et manipuler, effectuer certains gestes).

Ces personnes peuvent avoir des difficultés à naviguer rapidement, manipuler une souris. Parfois, elles naviguent exclusivement avec un clavier.

HANDICAP VISUEL

Il concerne les personnes aveugles, mais aussi, dans la majorité des cas, les personnes malvoyantes.

Elles ont besoin repérer les curseurs navigation, les zones cliquable, les champs de formulaires. Elles souvent besoin d’une assistance vocale pour lire les contenus textuels et traduire les contenus visuels. Parfois, elles naviguent exclusivement avec un clavier

 HANDICAP AUDITIF

C’est la perte auditive totale est rare, la plupart des déficients auditifs possèdent « des restes auditifs » pour lesquels les prothèses auditives apportent une réelle amplification. Selon les cas, ce handicap s’accompagne ou non, d’une difficulté à oraliser.

Ces personnes ont besoin que les contenus audio leur soit transcrit visuellement : musique, piste sonore des vidéos, mais aussi alertes sonores.

HANDICAP MENTAL OU INTELLECTUEL

C’est une difficulté à comprendre et une limitation dans la rapidité des fonctions mentales sur le plan de la compréhension, des connaissances et de la cognition.

Ces personnes peuvent avoir besoin que les contenus soit rapidement compréhensible ou leurs soit explicité. Certains troubles cognitifs demandent des aménagements spécifiques.

MALADIES INVALIDANTES

Toutes les maladies respiratoires, digestives, parasitaires, infectieuse (diabète, hémophilie, sida, cancer, hyperthyroïdie…). Elles peuvent être momentanées, permanentes ou évolutives.

Certaines maladies peuvent engendrer des déficits moteurs ou/et cognitifs. Ils peuvent être chroniques, ponctuels, de plus ou moins longue durée.

Cette liste est loin d’être exhaustive, mais permet de comprendre les recommandations du W3C.

LE WCAG

Selon le WCAG, l’accessibilité des contenus web se base sur 4 grands principes :

  • Perceptible
  • Utilisable
  • Compréhensible
  • Robuste

De ces principes ont découlé 12 règles.

Images

Donner à chaque image porteuse d’information une alternative textuelle pertinente et une description détaillée si nécessaire. Lier les légendes à leurs images. Remplacer les images textes par du texte stylé lorsque c’est possible.

Cadres

Donner à chaque cadre en ligne un titre pertinent.

Couleurs

Ne pas donner l’information uniquement par la couleur et utiliser des contrastes de couleurs suffisamment élevés.

Multimédia

Donner si nécessaire à chaque média temporel une transcription textuelle, des sous-titres synchronisés et une audiodescription synchronisée pertinents. Donner à chaque média non temporel une alternative textuelle. Rendre possible le contrôle de la consultation de chaque média temporel et non-temporel au clavier et s’assurer de leur compatibilité avec les technologies d’assistance.

Tableaux

Donner à chaque tableau de données complexe, un résumé et un titre pertinent, identifier clairement les cellules d’en-tête, utiliser un mécanisme pertinent pour lier les cellules de données aux cellules d’en-tête. Pour chaque tableau de mise en forme, veiller à sa bonne linéarisation.

Liens

Donner des intitulés de lien explicites, grâce à des informations de contexte notamment, et utiliser le titre de lien le moins possible.

Scripts

Donner si nécessaire à chaque script une alternative. Rendre possible le contrôle de chaque code script au moins par le clavier et la souris et s’assurer de leur compatibilité avec les technologies d’assistance.

Éléments Obligatoires

Vérifier que chaque page web a un code source valide selon le type de document, un titre pertinent et une indication de langue par défaut. Vérifier que les balises ne sont pas utilisées uniquement à des fins de présentation, que les changements de langues et de direction de sens de lecture sont indiqués.

Structuration de l’information

Utiliser des titres, des listes, des abréviations et des citations pour structurer l’information. S’assurer que la structure du document est cohérente.

Présentation de l’information perceptible

Utiliser des feuilles de styles pour contrôler la présentation de l’information. Vérifier l’effet de l’agrandissement des tailles des caractères sur la lisibilité. S’assurer que les liens sont correctement identifiables, que la prise de focus est signalée, que l’interlignage est suffisant et donner la possibilité à l’utilisateur de contrôler la justification des textes. S’assurer que les textes cachés sont correctement restitués et que l’information n’est pas donnée uniquement par la forme ou la position d’un élément.

Formulaires

Associer pour chaque formulaire chacun de ses champs à son étiquette, grouper les champs dans des blocs d’informations de même nature, structurer les listes de choix de manière pertinente, donner à chaque bouton un intitulé explicite. Vérifier la présence d’aide à la saisie, s’assurer que le contrôle de saisie est accessible et que l’utilisateur peut contrôler les données à caractère financier, juridique ou personnel.

Navigation

Faciliter la navigation dans un ensemble de pages par au moins deux systèmes de navigation différents (menu de navigation, plan du site ou moteur de recherche), un fil d’Ariane et l’indication de la page active dans le menu de navigation. Identifier les groupes de liens importants et la zone de contenu et donner la possibilité de les éviter par des liens de navigation interne. S’assurer que l’ordre de tabulation est cohérent et que la page ne comporte pas de piège au clavier.

Consultation

Vérifier que l’utilisateur a le contrôle des procédés de rafraîchissement, des changements brusques de luminosité, des ouvertures de nouvelles fenêtres et des contenus en mouvement ou clignotants. Indiquer lorsqu’un contenu s’ouvre dans une nouvelle fenêtre et donner des informations relatives à la consultation des fichiers en téléchargement. Ne pas faire dépendre l’accomplissement d’une tâche d’une limite de temps sauf si elle est essentielle et s’assurer que les données saisies sont récupérées après une interruption de session authentifiée. S’assurer que les expressions inhabituelles et le jargon sont explicités. Proposer des versions accessibles ou rendre accessibles les documents en téléchargement.

 

SEO, UX : CE QUE LES NORMES D’ACCESSIBILITÉ APPORTENT À TOUS

En plus d’augmenter l’autonomie des porteurs de handicaps, l’attention faite à l’accessibilité numérique apporte d’autres avantages :

Nommer explicitement les images, tableaux et autres éléments jouent positivement sur votre SEO.

L’effort de structuration et d’explicitation que demande cette démarche joue également dans le référencement naturel. Gardons à l’esprit que le nouvel algorithme de Google s’attarde sur le contexte.

L’accessibilité numérique bénéficie aussi à d’autres personnes. L’utilisation des sous-titres pour accéder à un contenu vidéo dans un espace public en est un bel exemple.

Et des des exemples, nous en avons d’autres à vous proposer chez Aristys 😉.

 

 

Article mis en forme par Joan
Aristys

 

Références

https://references.modernisation.gouv.fr/rgaa-accessibilite/

https://www.handirect.fr/handicap-et-accessibilite-numerique/

https://www.handirect.fr/accessibilite-des-sites-web-des-grandes-entreprises/

https://www.handicap-info.fr/definition-du-handicap/

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s