Comment construire des mondes numériques inclusifs grâce à un design accessible

Le design accessible vise à créer des sites web utilisables par tous — quel que soit leur âge, leur situation ou leur handicap. L’objectif du design accessible est de prévenir et d’éliminer tous les obstacles qui empêchent les personnes en situation de handicap d’accéder au web et de l’utiliser.

Récemment, les organismes de réglementation, dont la Commission pour l’égalité et les droits de l’homme (EHRC) au Royaume-Uni, les organismes équivalents dans l’UE et le Department of Justice (DOJ) ont accru leur attention sur l’accessibilité web et encouragé toutes les entreprises à faire de même. Cela maximise les chances pour chacun de pouvoir utiliser et accéder au contenu numérique — en particulier pour les personnes ayant un handicap visuel, auditif ou cognitif. Et cela peut vous aider à respecter les directives universelles d’accessibilité définies dans les Web Content Accessibility Guidelines (WCAG). 

Ci-dessous, nous explorerons ce que comprend le design accessible, les principes du design accessible, comment créer et mettre en œuvre ces principes, et comment maintenir un site accessible même lorsque votre site — et les directives d’accessibilité — évoluent.

Icône de globe à côté du texte disant "Plus de 96 % des pages web les plus consultées au monde ne sont pas accessibles."

Les fondamentaux du design accessible

Les sites web inaccessibles sont encore trop courants sur le marché actuel. Plus de 96 % des pages d’accueil les plus consultées au monde ne sont pas accessibles(opens in a new tab). En d’autres termes, cela signifie que seulement 4 % des sites les plus populaires sont accessibles aux personnes en situation de handicap. Pour les entreprises, cela laisse un marché immense et en pleine croissance largement sous-desservi. En augmentant l’accessibilité, vous pouvez élargir votre audience et développer votre marque. Plus important encore, vous stimulez l’innovation et aidez tous les utilisateurs à interagir avec votre site.

Différence entre design accessible et design inclusif

Il est important de noter que le design accessible est différent du design inclusif, la principale différence résidant dans leurs objectifs.

Le design accessible vise à offrir une expérience qui ne discrimine pas les personnes en situation de handicap. L’approche se concentre davantage sur l’obtention de résultats concrets ; par exemple, fournir une interface conviviale pour une personne malvoyante ou malentendante.

À l’instar du design accessible, le design inclusif vise à offrir une bonne expérience utilisateur. Cependant, le design inclusif va plus loin en créant un bon design pour tout le monde — pas seulement pour les utilisateurs en situation de handicap.

Les quatre principes du design accessible

Publiés par le World Wide Web Consortium (W3C)(opens in a new tab), quatre principes de conception web créent une expérience utilisateur accessible. Chaque principe représente un ensemble de directives définies dans les WCAG à suivre pour améliorer l’accessibilité, l’utilisabilité et la lisibilité.

Les quatre principes sont :

• Perceptible : Les utilisateurs peuvent-ils facilement identifier les informations et les relations ? Les utilisateurs doivent pouvoir percevoir l’information ; rien ne doit être invisible pour tous les sens.

• Utilisable : L’utilisateur peut-il interagir facilement avec le contenu ? Votre site ne doit pas comporter d’actions qu’un utilisateur ne peut pas effectuer. Par exemple, les fonctionnalités accessibles à la souris doivent aussi l’être au clavier.

• Compréhensible : L’utilisateur peut-il comprendre le contenu présenté ? Par exemple, les créateurs de contenu (influenceurs ou créateurs multimédias) doivent utiliser un langage clair et simple pour les légendes ou descriptions. De même, les rédacteurs doivent veiller à la lisibilité du contenu et éviter un langage complexe.

• Robuste : Le site est-il suffisamment robuste pour fonctionner avec diverses technologies, y compris les technologies d’assistance comme les lecteurs d’écran ?

En somme, les principes POUR ci-dessus contribuent à créer un design web accessible qui répond aux besoins de la communauté en situation de handicap tout en instaurant une culture d’accessibilité en entreprise.

Qui bénéficie du design accessible ?

Le design accessible profite à tous — pas seulement aux personnes en situation de handicap. S’il est vrai que le design accessible permet à des personnes ayant différents handicaps d’accéder à un site et de s’y déplacer, tous les utilisateurs bénéficient de l’accessibilité.

Par exemple, les sous-titres permettent aux personnes sourdes ou malentendantes de regarder des vidéos, ou aux personnes non handicapées de regarder dans un environnement bruyant. De même, la synthèse vocale lit le contenu web aux personnes aveugles, daltoniennes ou malvoyantes, mais est aussi utile à tout utilisateur qui n’est pas devant son écran ou appareil.

Pour les organisations, le design accessible signifie une application et une audience plus larges pour vos offres numériques. De plus, cela peut aider à réduire le risque de réclamations juridiques liées à l’accessibilité.

Image d’une boussole entourée de cinq normes d’accessibilité : WCAG, Section 508, ADA, ARIA et EN 301 549.

Cinq lois et normes d’accessibilité à connaître

Fournir un site web accessible est aussi une obligation légale. Des lois telles que l’Americans with Disabilities Act (ADA), la Section 508, ARIA et d’autres exigent que les entreprises publiques et privées respectent les normes d’accessibilité web. Le non-respect peut entraîner des actions en justice qui peuvent être très préjudiciables pour votre entreprise.

Ci-dessous, nous allons explorer les cinq principales normes d’accessibilité que les organisations doivent suivre.

• WCAG (Web Content Accessibility Guidelines) : La dernière version des WCAG (2.2) est considérée comme la référence mondiale pour un design accessible et universel, y compris aux États-Unis, au Canada, au Royaume-Uni, en Australie et au Japon. Les WCAG sont divisées en trois niveaux de conformité (A, AA et AAA) ; un contenu numérique conforme aux critères de succès des niveaux A et AA des WCAG 2.2 est généralement considéré comme accessible.

• Americans with Disabilities Act (ADA) : L’ ADA est une loi américaine sur les droits civiques qui interdit la discrimination à l’égard des personnes en situation de handicap. Le titre III de la loi concerne spécifiquement les lieux publics, que le DOJ considère inclure les sites web. Pour être conforme à l’ADA, les organisations doivent s’assurer que les personnes en situation de handicap peuvent facilement accéder à leur site web et le parcourir. Le non-respect de la loi peut entraîner des poursuites judiciaires.

• EN 301 549 : Similaire à la Section 508, EN 301 549(opens in a new tab) est une loi européenne sur l’accessibilité qui exige que les sites web, applications mobiles et logiciels soient accessibles à tous les utilisateurs, y compris ceux en situation de handicap. La loi s’applique spécifiquement aux organismes du secteur public en Europe et aux entreprises privées qui vendent dans le secteur public européen.

• ARIA (Accessible Rich Internet Applications) : Également connu sous le nom de WAI-ARIA(opens in a new tab), ARIA est un ensemble de rôles et d’attributs pouvant être ajoutés au code HTML. Les directives ARIA ont été établies par le W3C comme norme technique pour rendre les parties inaccessibles du web plus accessibles aux utilisateurs de technologies d’assistance. Par exemple, les anciennes versions du code HTML n’incluaient pas de balises pour décrire des éléments web comme les menus ou les barres de progression. Cela les rendait inaccessibles à certains utilisateurs. ARIA résout ce problème grâce à des rôles comme “menu” ou “image de curseur” qui décrivent les éléments ajoutés au code HTML sémantique.

Ensemble, ces directives permettent de concilier exigences légales et considérations éthiques pour l’inclusion. En suivant ces normes, les créateurs de contenu numérique peuvent concevoir une interface plus accessible, ce qui profite à tous.

Exemples concrets de design accessible

Lorsque vous concevez un site web accessible, il est important de prendre en compte de nombreux types de handicaps, notamment visuels, auditifs, moteurs, cognitifs ou une combinaison de ceux-ci. Voici quelques exemples de conception adaptés à ces situations :

• Navigation au clavier : Pour les utilisateurs à mobilité réduite ou utilisant un lecteur d’écran, la navigation au clavier permet de parcourir un site. Par exemple, les utilisateurs souhaitant prendre rendez-vous ou remplir un formulaire peuvent le faire via des raccourcis clavier ou des technologies d’assistance. 

• Texte alternatif (alt text) : Abréviation de texte alternatif, l’alt text sert à décrire les images et autres contenus multimédias sur une page web. Par exemple, les personnes aveugles ou malvoyantes peuvent comprendre des images de vêtements ou d’aliments lors d’achats ou de commandes en ligne, ce qui les aide à prendre des décisions d’achat. 

• Titres et balises d’en-tête : Utiliser les bons titres et balises d’en-tête (H1, H2, H3) facilite la navigation pour les utilisateurs de lecteurs d’écran. Par exemple, ils peuvent suivre facilement le fil d’un article de blog ou d’une actualité sans confusion.

Intégrer le design accessible dans l’UX

Comme mentionné plus haut, le design web accessible élargit la portée de votre site, ouvrant la porte à une large audience. Cependant, il existe des éléments clés à inclure dans la conception pour améliorer l’expérience utilisateur globale — même pour les personnes sans handicap. Nous verrons ci-dessous comment intégrer l’accessibilité dans un design UX.

Composants d’un design UX accessible

• Navigation et structure : Tous les utilisateurs ne naviguent pas à la souris, il est donc important qu’un site propose des fonctionnalités de navigation supplémentaires comme des raccourcis clavier ou des commandes vocales. De plus, la structure de votre contenu doit être claire et facile à suivre. Une façon d’atteindre ces deux objectifs est de construire une architecture de l’information et d’y associer le contenu.

• Design visuel fort : Les éléments visuels de votre site influencent fortement l’accessibilité. Bien utilisés, ils aident les utilisateurs à naviguer sur une page et à accomplir des tâches. Pour améliorer votre design visuel, assurez-vous d’avoir :
  -Un contraste de couleurs approprié (un vérificateur de contraste de couleurs peut vous aider)
  -Texte et images adaptables
  -Texte alternatif précis sur les images et vidéos
  -Polices claires et lisibles
  -Distractions (popups, défilement, vidéos en lecture, animations, etc.) réduites au minimum
  -Utilisation appropriée des couleurs de fond

• Éléments interactifs : Les éléments interactifs incluent les liens, boutons, formulaires et animations — tous doivent être accessibles. Assurez-vous que chaque élément soit facilement identifiable pour les utilisateurs. Par exemple, changez l’apparence des liens ou boutons lors du survol de la souris. 

• Design auditif : Assurez-vous que les éléments auditifs de votre site, comme les vidéos, extraits sonores ou musiques, soient accessibles aux personnes ayant un handicap auditif. L’ajout de sous-titres, d’options de synthèse vocale et d’indicateurs visuels permet à ces utilisateurs d’interagir avec le contenu audio.

• Compatible avec les technologies d’assistance : La compatibilité avec les lecteurs d’écran doit être prise en compte tout au long du processus de conception. Environ 2,5 milliards de personnes dépendent des technologies d’assistance(opens in a new tab), ce qui signifie que votre site doit être utilisable par ces technologies. Un outil de vérification de l’accessibilité du site web peut vous aider, mais il est aussi conseillé de tester avec de vrais utilisateurs de technologies d’assistance pour obtenir des retours.

Étapes pratiques pour garantir accessibilité et inclusion

Maintenant que vous connaissez les composantes du design accessible, voyons les bonnes pratiques pour concevoir des sites accessibles et inclusifs.

1. Réaliser un audit d’accessibilité

La première étape pour créer un site accessible est de résoudre les problèmes d’accessibilité existants. Par exemple, l’ audit expert d’AudioEye est réalisé par notre équipe d’experts pour tester les problèmes courants comme un mauvais contraste de couleurs ou l’absence de texte alternatif. Nous complétons nos tests d’accessibilité avec notre suite de tests automatisés pour identifier et corriger rapidement près de 400 problèmes d’accessibilité.

2. Adopter une culture de l’accessibilité

Rappelez-vous, l’accessibilité est un processus continu. Gardez à l’esprit les utilisateurs en situation de handicap à chaque création de page, mise à jour, nouveau contenu ou lancement de produit numérique. Cela peut vous aider à éviter les problèmes courants d’accessibilité et à réduire le temps nécessaire pour les corriger par la suite.

3. Commencer avec de bonnes bases

Ne laissez pas l’accessibilité être une réflexion après coup dans le processus de conception. Elle doit plutôt être intégrée à vos processus existants. Cela garantit que designers, développeurs, chefs de projet et rédacteurs pensent à l’accessibilité lors de la création de contenu numérique. Non seulement cela vous aide à créer un design accessible dès le départ, mais cela vous évite aussi de devoir corriger des problèmes une fois le contenu en ligne.