Aujourd’hui, nous vivons dans un monde dans lequel le numérique occupe une place de plus en plus grande dans nos vies. Démarches administratives, loisirs, accès à l’information… il n’est pas rare d’être dirigé vers le digital pour aller plus rapidement et mener à bien notre objectif. Pour le commun des mortels, la tâche est facile, mais pour certaines personnes présentant un handicap, l’expérience peut s’avérer difficile, voire impossible dans certains cas.

C’est pourquoi chaque site et chaque application doit s’intéresser de près à l’accessibilité afin de permettre à tous de le visiter et/ou de l’utiliser.

L’accessibilité ne se limite pas à rendre l’information disponible uniquement pour les personnes ayant un handicap ; elle vise également à la rendre accessible à tous, indépendamment de leurs capacités ou de leur situation. En concevant votre application en tenant compte de l’accessibilité, vous privilégiez la simplicité et la perception, en évitant d’exclure les personnes handicapées ou celles qui utilisent leurs appareils de manière différente.

Quels sont les thèmes d’accessibilité à aborder ?

Travaillant au maximum ses OS (système d’exploitation) autour de l’accessibilité, Apple distingue 5 catégories d’accessibilité :

• Parole : Si vous présentez un trouble de la parole ou si vous préférez la communication non verbale […]
• Vision : Si vous êtes aveugle, que vous avez une vue déficiente ou que vous préférez simplement un texte plus grand […]
• Audition : […] pour améliorer les sons que vous entendez et vous aider à garder le contact si vous n’entendez pas.
• Mobilité : […] pour créer une gestuelle personnalisée ou contrôler vos appareils de la manière qui vous convient le mieux.
• Cognition : Si vous avez besoin d’aide pour garder votre concentration ou pour simplifier des tâches […]

Certes, il ne s’agit que d’exemples, mais ils permettent d’avoir une base sur laquelle travailler :

• Parole : Y a-t-il des fonctionnalités nécessitant forcément de parler sur votre site ou votre application ? Y a-t-il des alternatives ?
• Vision : Les textes et images expriment-ils le bon message ? Y a-t-il une description pour les lecteurs d’écran ? Le texte est-il assez grand et contraste assez bon ?
• Audition : Votre site ou votre application a-t-il besoin du son pour fonctionner ? Y a-t-il une alternative ?
• Mobilité : Y a-t-il qu’une seule façon d’effectuer une action ?
• Cognition : Votre site ou votre app peut-elle être encore plus simplifiée ?

C’est bien beau tout ça, mais comment pouvez-vous le mettre en place ?

Utilisez les référentiels et guidelines

WCAG

Les WCAG (Web Content Accessibility Guidelines, en français : Directives pour l’Accessibilité du Contenu Web) ont été créées par le W3C, le World Wide Web Consortium et dictent les règles à suivre sur le web, quel que soit le développeur, quel que soit le site web, dans le but de normaliser internet et permettent à tous d’accéder au web.

RGAA

Le RGAA (Référentiel général d’amélioration de l’accessibilité) se base sur les WCAG et propose des tests (avec de très nombreux critères) pour garantir la conformité et l’accessibilité des services. Créé au départ pour les services de l’État français, il est à présent accessible à tous.

Les guidelines focus apps

Apple et les Human Interface Guidelines

Développant en interne iOS, iPadOS, macOS, watchOS, tvOS et à présent visionOS, Apple a créé ses systèmes de mise en page autour d’un mot d’ordre : garder une unité entre toutes les apps présentes sur l’AppStore.

Grâce à ces guidelines, les apps gagnent en expérience utilisateur et tendent à bénéficier des mêmes actions, offrant ainsi plus de facilités d’utilisation aux utilisateurs.

Google et Material Design

Du côté de Google, se trouve Material Design, son design system open-source, qui facilite la création d’applications grâce à l’utilisation de composants.

Tous deux permettent de concevoir une application qui soit utilisable par tous les utilisateurs.

Comment travailler l’accessibilité de son site web ?

Plusieurs améliorations simples peuvent être intégrées dès le développement du site ou après mise en ligne.

Textes alternatifs pour les images

Même si cela permet également un meilleur référencement, les textes alternatifs des images permettent aux personnes ayant des problèmes de vue de savoir de quoi traite une image grâce à sa description.

NDLR : WordPress conseille de remplir pour chaque image le texte alternatif de l’image, mais de le laisser vide si elle est purement décorative.

Sous-titrage et transcription

À intégrer principalement sur les vidéos, le sous-titrage et la transcription profitent à deux types d’utilisateurs : les personnes sourdes et celles qui ne souhaitant ou ne pouvant pas activer le son.

D’un premier abord fastidieux à faire (il faut se baser sur une vidéo), de multiples outils permettent aujourd’hui d’accélérer la création de ces sous-titres.

NDLR : Depuis qu’Instagram a intégré la possibilité d’activer les sous-titres automatiques, la fonctionnalité s’est rapidement démocratisée sur l’application mettant la vidéo en avant.

Conception adaptée aux lecteurs d’écran

Pour que les sites web et les applications mobiles soient accessibles aux lecteurs d’écran, ils doivent être structurés de manière logique et cohérente, avec des titres et des sous-titres clairement identifiés (les balises H1, h2, h3 …), des liens décrits de manière appropriée et des images accompagnées de descriptions alternatives.

NDLR : Exemple de plan pour une page web :

• H1 : titre de la page
  • H2 : Sous-titre
    • H3 : Accroche
      • H4 : intertitre
        • P : texte
  • H2 : Sous-titre
    • H3 : Accroche
      • H4 : intertitre
        • P : texte
  • …

Comme le texte alternatif d’une image, la bonne hiérarchisation du contenu permet également un meilleur référencement. Il faut donc faire d’une pierre deux coups !

Navigation clavier

En permettant aux personnes ne pouvant utiliser une souris d’utiliser votre site au clavier, leur expérience se verra améliorée. Les actions possibles sont simples :

• Tab : permet de passer à l’élément cliquable suivant
• Shift + Tab : permet de passer à l’élément cliquable précédent
• Enter : permet d’imiter le clic
• Flèches Haut et Bas : permettent de scroller sur la page
• Espace : permet de faire un saut de la hauteur de son écran sur la page
• …

NDLR : Avez-vous déjà remarqué une personne malvoyante ou aveugle naviguer sur son téléphone ? Avec VoiceOver, Apple permet aux aveugles d’utiliser leurs appareils grâce à des gestes inspirés de la navigation clavier.

Couleurs et contraste

Hantise des designers, les contrastes souhaités par les WCAG ne sont pas forcément intégrables en l’état, en respectant à 100 % la charte graphique des marques. C’est pourquoi il peut être intéressant de faire travailler toutes les parties prenantes sur l’identité de marque pour mettre en avant les points à améliorer.

Dans le contraste peuvent également se trouver les typographies utilisées :

• Sont-elles assez lisibles ?
• Sont-elles assez différentes ?
• Sont-elles assez grandes ou petites selon l’utilisation ?
• …

En respectant et en pensant à ces quelques points, votre site web pourra être utilisé par un maximum d’utilisateurs.

Comment rendre une app accessible ?

Même si les applications offrent une expérience qui leur est propre, il reste nécessaire de réfléchir à leur accessibilité.

Utilisation des fonctionnalités natives

Comme dit auparavant, Apple et Android travaillent au maximum pour proposer aux utilisateurs des expériences adaptées. Avec la multiplication des fonctionnalités natives (caméra, GPS, accéléromètre, identification par empreinte digitale ou reconnaissance faciale, reconnaissance de texte …), les applications peuvent se révéler novatrices et permettre à des utilisateurs de pallier un manque :

• Traduction en temps réel
• Lecture de texte
• Sécurisation d’éléments sensibles
• Loupe

Compatibilité avec les technologies d’assistance

Nouvellement annoncés, les AirPods Pro 2 d’Apple proposent tout un système axé sur la santé auditive avec des tests d’audition, la possibilité de les utiliser en tant qu’appareils auditifs et la réduction des sons forts.

Ce n’est pas la seule technologie d’assistance qui existe. En effet, il existe des appareils auditifs avec Bluetooth, qui permet aux malentendants de tout de même d’utiliser smartphones et autres objets compatibles, comme avec des écouteurs.

Mais la liste reste encore longue :

• Assistants à domicile (Alexa, HomePod…)
• Appareils alternatifs : stylet, clavier, souris, manettes…
• …

En incluant des fonctionnalités d’accessibilité, votre application sera ainsi mieux perçue par les utilisateurs en ayant besoin (must-have) mais bien perçue par ceux en ayant moins besoin (nice-to-have).

Test d’accessibilité

Chez O’Matic, nous nous intéressons de prêt à l’accessibilité, car nous croyons en une meilleure expérience numérique (mais pas que) pour tous.

Travailler l’accessibilité peut sembler compliqué, puisqu’il est nécessaire d’avoir une vision d’ensemble. C’est pourquoi nous avons construit un audit en plusieurs niveaux permettant de faire le point sur un site ou une application d’après plusieurs critères, du parcours utilisateur et l’ergonomie jusqu’aux critères RGAA et WCAG.

Vous pouvez réserver votre audit en suivant ce lien !

---

En fin de compte, l’accessibilité numérique est non seulement une question de responsabilité, mais aussi une opportunité commerciale pour les entreprises qui cherchent à atteindre un public plus large et à offrir une meilleure expérience utilisateur.

En quelques étapes, il est facile d’ajouter de l’accessibilité où l’on croit qu’elle est inutile, mais se révèle être en fait nécessaire. (Google aimera bien que vous y pensiez pour votre référencement).