Guide d’Accessibilité Web pour les Designers (6 Conseils Clés)

En tant que concepteur de site web, tu joues un rôle significatif dans l’accessibilité d’un site web et son inclusivité. De nombreux éléments de conception, de la typographie aux médias, peuvent créer des obstacles pour les personnes en situation de handicap. Avec tant de points à aborder, cela peut sembler être une tâche impossible.

Heureusement, il existe de nombreux guides disponibles pour concevoir un site web accessible à tous. En prêtant une attention particulière à quelques domaines clés, tu devrais pouvoir intégrer l’accessibilité dans ton processus de conception sans interrompre ton rythme.

Dans ce guide, nous allons te présenter le concept d’accessibilité web et son importance. Ensuite, nous aborderons six domaines clés à prendre en compte lors de la conception d’un site web accessible. Commençons !

Une Introduction À L’Accessibilité Web

Accessibilité web signifie que tous les aspects d’un site web sont utilisables par les personnes en situation de handicap. Sans cela, une grande partie des informations sur internet serait inaccessible à un large pourcentage de la population. Pour les propriétaires d’entreprises en ligne, cela équivaudrait également à perdre des ventes potentielles.

Depuis 2019, près de 60% de la population des États-Unis ayant des handicaps vivait dans un foyer avec accès à internet. Cela représente beaucoup de personnes qui dépendent d’un design accessible pour utiliser pleinement le web. Les personnes handicapées ont également tendance à adopter la technologie à des taux plus faibles, ce qui signifie qu’elles peuvent ne pas avoir le choix de l’appareil à utiliser lors de l’accès à un site web.

Le World Wide Web Consortium (W3C) a développé les Directives pour l’accessibilité des contenus Web (WCAG) pour fournir un ensemble de normes aux développeurs, designers et autres responsables de la création et de la maintenance des contenus sur le web.

Les directives d’accessibilité sont organisées en quatre principes, parfois désignés par l’acronyme POUR :

1. Perceptible : Les composants du site doivent être présentés de manière à ce que les utilisateurs puissent les percevoir, quelle que soit leur incapacité.
2. Utilisable : La navigation et l’opération ne doivent pas nécessiter d’actions d’entrée qu’un utilisateur ne peut pas effectuer.
3. Compréhensible : Les utilisateurs doivent comprendre comment utiliser et naviguer sur un site web ainsi que son contenu.
4. Robuste : Le contenu doit être compatible avec les technologies d’assistance actuelles et futures.

Ces principes peuvent sembler écrasants et même quelque peu vagues. Cependant, il existe des mesures concrètes que tu peux prendre pour garantir que ton site web soit accessible à tous.

Guide d’Accessibilité Web pour les Concepteurs (6 Conseils Clés)

Ayant abordé combien l’accessibilité web est vitale, examinons six domaines à considérer lors de la conception d’un site web accessible.

1. Rendez Les Éléments De Design Visuel Lisibles

La typographie est un domaine amusant pour montrer votre flair créatif, mais le but principal du texte de ton site web est de transmettre des informations. Il y a quelques directives à prendre en compte lorsque tu travailles avec la typographie.

Tout d’abord, tu voudras penser au contraste entre le texte et l’arrière-plan. Le contraste est exprimé sous forme de ratio, et selon les directives WCAG, le contraste minimum est de 4,5:1 pour le texte normal et de 3:1 pour le texte en gros caractères.

Il existe plusieurs outils que tu peux utiliser pour tester des combinaisons de couleurs. Le Contrôleur de Contraste de WebAIM en est un.

La hauteur de ligne et l’espacement des lettres jouent également un rôle en matière d’accessibilité. Pour maintenir la lisibilité du texte, le W3C fournit les directives suivantes:

• La hauteur de ligne doit être au moins 1,5 fois la taille de la police.
• L’espacement entre les paragraphes doit être deux fois la taille de la police.
• L’espacement entre les lettres doit être au moins 0,12 fois la taille de la police.
• L’espacement des mots doit être au moins 0,16 fois la taille de la police.

Les graphiques sont une autre manière de présenter beaucoup d’informations dans un format facile à comprendre. Cependant, si tu ne différencies les éléments que par la couleur, tu pourrais léser de nombreuses personnes. En effet, il y a environ 3 millions de personnes daltoniennes dans le monde qui pourraient avoir des difficultés avec ton contenu.

Pour être sûr que les éléments visuels soient compréhensibles, envisage d’utiliser des motifs ainsi que des couleurs dans tes graphiques. Lors de la sélection des designs, nous recommandons de choisir des modèles suffisamment différents les uns des autres. Par exemple, des lignes ou des points sont facilement discernables, tandis que des lignes de différentes épaisseurs peuvent ne pas l’être.

2. Organise Le Contenu Pour Une Compréhension Facile

Peu importe le type de site web que tu conçois, il y a probablement beaucoup de texte. Tu peux améliorer l’accessibilité en structurant le contenu de manière à ce qu’il soit facile à parcourir et à comprendre.

Tout d’abord, la plupart des utilisateurs apprécieront que tu divises ton texte en courts paragraphes. Les gens ne lisent souvent pas en profondeur sur le web, et il est plus facile de parcourir rapidement des sections plus courtes.

Les titres sont également cruciaux pour la scannabilité. Chaque titre doit décrire précisément le contenu qui se trouve en dessous et suivre une hiérarchie logique. Cela signifie utiliser d’abord les titres plus grands et progressivement plus petits au fur et à mesure que tu couvres des informations plus spécifiques.

Utiliser un balisage approprié pour vos titres peut faciliter la lecture et la navigation de votre contenu par les lecteurs d’écran. En Langage de Balisage Hypertexte (HTML), tu utiliseras les balises <h1> jusqu’à <h6> pour créer des titres hiérarchiques afin de structurer ton texte.

Lors de l’ajout de liens à ton contenu, assure-toi que le texte d’ancrage est suffisamment descriptif pour que les lecteurs sachent où le clic les mènera. De plus, il est judicieux de mentionner si le lien s’ouvrira dans une nouvelle fenêtre. Une fenêtre qui s’ouvre de manière inattendue peut poser des problèmes pour les lecteurs d’écran et désorienter l’utilisateur.

Tu devrais également permettre à tes utilisateurs de naviguer à travers le contenu sans utiliser la molette de défilement ou appuyer plusieurs fois sur une touche fléchée. Cela peut être aussi simple que d’inclure une table des matières au début d’un article de blog. Tu peux aussi ajouter un bouton qui va directement au contenu principal de la page.

Ensuite, nous explorerons quelques moyens de rendre l’interaction avec ton site web plus facile.

3. Gardez les Éléments de l’Interface Utilisateur (UI) Intuitifs et Indépendants des Appareils

Les éléments de l’Interface Utilisateur (UI) sont tout ce sur un site web avec lequel les visiteurs doivent interagir pour naviguer, et ils jouent un rôle majeur dans l’expérience utilisateur globale (UX). Les éléments UI peuvent inclure des barres de défilement, des menus déroulants et des notifications.

Pour qu’un site web soit considéré comme accessible, les personnes utilisant différents appareils doivent pouvoir interagir avec succès avec ces éléments de l’interface utilisateur. Cela signifie que la conception indépendante des appareils est cruciale.

Par exemple, certaines personnes ne peuvent utiliser que des claviers. Pour leur permettre de naviguer sur une page web, tu peux inclure des indicateurs de focus pour mettre en évidence les boutons, les liens et les champs de texte lorsque l’utilisateur navigue à travers la page avec la touche Tab.

Tout élément interactif sur ton site web doit avoir un indicateur de focus correspondant. L’apparence peut varier d’un navigateur à l’autre, mais ils se manifestent généralement par un contour bleu ou blanc selon la couleur de fond.

Lors de l’ajout d’indicateurs de focus, tu devras définir l’ordre de tabulation. Cet ordre devrait être similaire à la manière dont tu lis : de haut en bas et de gauche à droite. Tu peux tester cela en naviguant par tabulation sur ton site.

Essaie de conserver une ordre cohérent pour la navigation et les autres menus sur l’ensemble du site web. Ces éléments doivent également apparaître à peu près aux mêmes endroits sur chaque page car cela les rend plus faciles à mémoriser et plus rapides à utiliser.

Les zones tactiles sont les surfaces qu’un utilisateur touche lorsqu’il utilise un appareil à écran tactile. Lorsque tu définis les zones tactiles, tu veux t’assurer qu’elles sont suffisamment grandes pour être facilement tapées par n’importe qui. Par exemple, les personnes atteintes de troubles neuromusculaires peuvent manquer de contrôle moteur fin nécessaire pour interagir avec une petite cible.

Cependant, tu ne veux pas non plus créer des cibles si grandes qu’elles chevauchent les éléments à proximité. Appuyer sur un bouton alors que tu visais un autre peut frustrer n’importe qui.

Certains utilisateurs comptent beaucoup sur les raccourcis clavier. Bien que tu puisses définir des raccourcis pour ton site web, cela pourrait ne pas être la meilleure solution. Les raccourcis clavier ne sont pas standardisés sur le web, et ceux que tu créeras pourraient entrer en conflit avec l’appareil utilisé par quelqu’un. Si tu décides d’ajouter des raccourcis personnalisés, assure-toi de le clarifier et de fournir des directives pour leur utilisation.

Il existe certains types d’interactions qui ne sont pas disponibles sur chaque appareil. Par exemple, alors que pincer pour zoomer est pratique pour les téléphones mobiles, c’est impossible sur un ordinateur sans écran tactile. Assure-toi que le contenu n’est pas verrouillé derrière des actions que tes utilisateurs ne peuvent pas réaliser. Fournis plusieurs moyens d’accéder à tes informations.

L’UX est un domaine très impliqué de la conception web avec de nombreux éléments en mouvement. Par conséquent, tu pourrais envisager d’ajouter une section à ton guide de style pour aider à maintenir la cohérence de tous les éléments de l’interface utilisateur sur ton site web.

4. Rendre Les Contrôles De Saisie Conviviaux

Contrôles d’entrée sont un sous-ensemble d’éléments de l’interface utilisateur destinés à recevoir des entrées de la part de l’utilisateur. Les exemples incluent les champs de texte, les cases à cocher et les boutons radio.

Les formulaires peuvent être difficiles à concevoir en tenant compte de l’accessibilité, mais il existe quelques directives à suivre. Tu peux commencer par étiqueter chaque champ de ton formulaire. Tu pourrais également inclure un texte d’exemple dans le champ lui-même.

Lors de la mise en page des formulaires, nous te suggérons d’utiliser une structure verticale et de placer chaque champ sur sa propre ligne. Cela facilite la navigation dans le formulaire pour les utilisateurs qui utilisent uniquement un clavier. À cet égard, assure-toi que des indicateurs de focus sont placés tout au long du formulaire.

Tu pourrais diviser les longs formulaires en plusieurs sections car ils peuvent être accablants. Tu pourrais également ajouter une barre de progression pour que les gens sachent où ils en sont dans le processus ; cela est susceptible d’être apprécié par tes utilisateurs.

Enfin, assure-toi de fournir des messages d’erreur qui sont clairs et faciles à comprendre. Si possible, ne vide pas entièrement le formulaire lorsqu’une erreur est commise. C’est une bonne idée d’inclure des instructions sur comment corriger l’erreur également.

5. Propose Plusieurs Manières De Profiter Des Médias

Les médias peuvent enrichir beaucoup un site web, mais il y a des problèmes d’accessibilité dont il faut tenir compte. Heureusement, tu peux t’assurer que tout média que tu utilises soit apprécié par tout le monde.

Tout d’abord, certains types de médias sont à éviter complètement. Les animations clignotantes ou les pop-ups peuvent potentiellement déclencher des crises chez certaines personnes. Tu pourrais également vouloir éviter le texte défilant ou le contenu animé qui ne peut pas être mis en pause. Il peut être difficile, voire impossible, pour certains utilisateurs de le comprendre.

Si tu ressens le besoin d’inclure du défilement ou de l’animation, il existe des moyens de rendre ces éléments plus accessibles. Assure-toi que le texte se déplace assez lentement pour que les visiteurs puissent le lire facilement. De plus, rends possible la mise en pause du contenu et sois clair sur la manière de le faire.

Lorsque tu crées du contenu vidéo pour ton site web, tu peux inclure un sous-titrage pour les sourds et malentendants. Tu devrais également ajouter une transcription textuelle du contenu de la vidéo pour ceux qui utilisent un lecteur d’écran.

Les visiteurs qui utilisent des lecteurs d’écran peuvent également parfois avoir des difficultés avec les images sur un site . Pour rendre possible pour ces personnes de voir ce qui se passe dans une image, tu peux inclure un texte alternatif.

Le texte alternatif est une description destinée à apparaître lorsqu’une image ne se charge pas. Cependant, les lecteurs d’écran prononcent également ce texte, de sorte que les personnes ayant des déficiences visuelles ne manquent rien.

Lorsque tu rédiges du texte alternatif, tu dois être aussi descriptif que possible. Tu peux baser ta description sur ce qui est présenté dans l’image et le contexte du contenu environnant. De plus, il n’est pas nécessaire d’inclure les mots « Image de… » au début de ton texte alternatif, car le lecteur d’écran les ajoutera automatiquement.

6. Réalisez des Recherches et des Tests Utilisateurs

La recherche utilisateur et les tests ne sont probablement pas aussi excitants pour toi que le processus de conception, mais ils sont cruciaux pour maîtriser l’accessibilité. Il est préférable de réaliser la recherche utilisateur tôt dans le processus pour comprendre qui sont tes utilisateurs et ce qu’ils attendent de toi. Tu peux réaliser des tests tout au long du processus de conception pour t’aider à rester dans la bonne direction.

Une recherche approfondie garantit qu’aucun de tes utilisateurs ne sera laissé pour compte et t’aidera à développer un plan pour concevoir ton site web. Tu pourrais utiliser des groupes de discussion ou des sondages pour déterminer ce dont les utilisateurs ont besoin sur ton site web et comment ils prévoient de l’utiliser.

Tu voudras probablement faire des tests tout au long du processus de création du site. Tu pourrais essayer le test A/B au stade du wireframing, quand il est encore temps de pivoter. Une fois ton site en ligne, tu pourrais observer les gens utilisant ton site web et demander leurs impressions alors qu’ils accomplissent des tâches spécifiques.

Lors de la recherche et des tests, il est préférable de rassembler un groupe diversifié de participants. Y compris ceux de toutes les capacités te donne une meilleure chance de concevoir un site qui fonctionne pour tout le monde.

Tu peux aussi effectuer des tests toi-même, comme essayer de naviguer sur ton site en utilisant uniquement ton clavier. Pour d’autres éléments d’accessibilité, tu pourrais essayer un plugin comme WP Accessibility.

Ce plugin est gratuit à utiliser. Il peut t’aider à corriger une variété de problèmes d’accessibilité.

Rendons L’Accessibilité Standard

Se concentrer sur l’accessibilité pendant le processus de conception peut aboutir à un site web accessible à tous. Bien que cela puisse sembler beaucoup à gérer, l’effort supplémentaire en vaut vraiment la peine.

Garde les points suivants en tête lorsque tu conçois ton site web :

1. Rends les éléments visuels du design lisibles.
2. Organise le contenu web pour une compréhension facile.
3. Garde les éléments de l’interface utilisateur (UI) intuitifs et indépendants du dispositif.
4. Rends les contrôles de saisie conviviaux.
5. Inclut plusieurs façons de profiter des médias.
6. Réalise des recherches utilisateurs et des tests d’accessibilité.

Construire un site web accessible est beaucoup plus simple avec le bon hébergeur à tes côtés. L’hébergement Shared Unlimited de DreamHost peut t’assurer de bien commencer avec un site rapide et fiable !