Un site peut fonctionner parfaitement sur le plan technique tout en restant difficile à utiliser si certains aspects essentiels de l’accessibilité ne sont pas pris en compte. Des caractères trop petits, des contrastes faibles, des boutons peu explicites ou des pages surchargées compliquent l’accès aux contenus et aux fonctionnalités pour de nombreuses personnes. C’est particulièrement le cas en présence d’une déficience visuelle, de limitations motrices ou de difficultés à traiter les informations. Mais un écran fissuré, une forte luminosité ou une utilisation à une seule main peuvent également rendre un site moins facile à utiliser.
La conception web accessible tient compte de ces situations dès la création du site. Elle consiste à présenter clairement les contenus, à rendre les éléments de commande reconnaissables et à guider les utilisateurs sans obstacles inutiles. Nombre de ces mesures améliorent également la facilité d’utilisation générale.
Ce que signifient la conception web accessible et l’accessibilité numérique
Les contenus et les fonctionnalités d’un site accessible peuvent être perçus, compris et utilisés par le plus grand nombre. L’accessibilité numérique tient compte de besoins et de situations d’utilisation différents. Les utilisateurs doivent pouvoir lire des contenus, comprendre des vidéos, remplir des formulaires et parcourir des menus, même s’ils utilisent pour cela un clavier, un lecteur d’écran, un logiciel d’agrandissement d’écran ou un autre outil d’assistance.
Les couleurs, les tailles de caractères, les espacements et la hiérarchie visuelle déterminent la facilité avec laquelle les contenus peuvent être distingués. Une structure de page logique et des éléments de commande clairement libellés sont tout aussi importants.
Créer un site accessible : l’accessibilité commence dès la planification
De nombreux problèmes apparaissent dès la phase de conception. Si une couleur de marque très claire est utilisée pour les textes, le contraste avec le fond risque de se révéler insuffisant par la suite. Si des formulaires sont conçus sans libellés de champs visibles, ce problème devra être corrigé pendant le développement.
Pour créer un site accessible, il faut intégrer les exigences d’accessibilité au design dès le départ. Les couleurs peuvent être vérifiées avant leur utilisation et les éléments récurrents, comme les boutons ou les formulaires, peuvent être conçus selon des règles cohérentes. Les parcours habituels des utilisateurs doivent eux aussi être pris en compte tôt. Une personne qui souhaite lire un article, envoyer un formulaire de contact ou sélectionner un produit doit pouvoir atteindre son objectif sans étapes intermédiaires inutiles.
Bien utiliser les couleurs et les contrastes
Les couleurs contribuent à l’identité visuelle et permettent de mettre en évidence les éléments importants. Elles ne peuvent toutefois remplir leur rôle que si elles sont faciles à distinguer les unes des autres.
Un texte gris clair sur fond blanc peut sembler discret et moderne, mais il est difficile à lire pour de nombreuses personnes. Des problèmes similaires apparaissent avec les boutons colorés dont le libellé contraste à peine avec le fond.
Les contrastes ne doivent donc pas être vérifiés uniquement pour le texte courant. Les petits textes, les indications dans les formulaires, les liens, les icônes, les indicateurs de focus et les messages d’erreur doivent eux aussi rester visibles.
La couleur ne doit jamais être le seul moyen de transmettre une information. Si un champ mal rempli est uniquement signalé en rouge, les personnes présentant un trouble de la vision des couleurs risquent de ne pas percevoir cette indication. Un message d’erreur compréhensible et un symbole supplémentaire permettent d’identifier clairement le champ concerné.
Il en va de même pour les diagrammes et les graphiques. Plusieurs séries de données sont plus faciles à distinguer si les couleurs sont complétées par différents styles de lignes, des motifs ou des libellés placés directement sur les éléments.
Choisir des caractères faciles à lire
La lisibilité ne dépend pas uniquement de la taille des caractères. La police, l’interligne, la largeur du texte et le fond influencent également le confort de lecture.
Pour les longs paragraphes, les polices claires dont les caractères sont faciles à distinguer conviennent bien. Les caractères très fins peuvent rapidement devenir difficiles à lire sur les petits écrans. Les polices décoratives peuvent convenir à des titres courts, mais ne devraient pas être utilisées pour des informations longues ou des indications importantes.
Des lignes trop longues rendent plus difficile le repérage du début de la ligne suivante. À l’inverse, des lignes très courtes interrompent la lecture. Une largeur de contenu limitée permet de garder des textes lisibles et bien organisés, même sur de grands écrans.
Il faut prévoir suffisamment d’espace entre les lignes et les paragraphes. Un texte trop serré donne rapidement l’impression d’un bloc compact. Un peu d’espace blanc permet de mieux distinguer les différentes idées.
Les textes doivent aussi pouvoir être agrandis sans que des contenus soient coupés ou que des zones se chevauchent.
Structurer les pages clairement
Une structure de page claire permet de comprendre rapidement les contenus. Les visiteurs voient ainsi quelles informations vont ensemble et dans quel ordre elles doivent être lues.
Les titres doivent se distinguer visuellement du texte courant. Les différents niveaux doivent être clairement reconnaissables. L’espace au-dessus et au-dessous d’un titre indique également à quelle section il appartient.
Une multiplication des mises en évidence nuit à cette orientation. Si des titres, des aplats de couleur, de grandes images, des icônes et plusieurs boutons attirent tous l’attention en même temps, il devient difficile de savoir ce qui est vraiment important.
La proximité physique contribue aussi à établir des relations claires. Un champ de saisie doit, par exemple, être clairement associé à son libellé, tout comme une image de produit à sa description.
L’accessibilité commence par la structure de la page et va jusqu’aux petits détails, comme la bordure visible autour d’un champ de saisie sélectionné.
Construire une navigation compréhensible
La navigation doit montrer quels contenus un site propose et où se trouve la personne qui le consulte. Les intitulés doivent être compréhensibles sans que les utilisateurs aient besoin de connaître l’organisation interne de l’entreprise.
Des rubriques comme « Solutions », « Services » ou « Offre » peuvent regrouper des contenus très différents selon le site. Des termes plus précis permettent de trouver plus rapidement la bonne page. Il faut également éviter de changer de nom pour désigner une même rubrique.
La navigation principale doit rester cohérente sur l’ensemble du site. Sur les petits écrans, un menu dépliable doit rester bien visible et facile à utiliser.
Les menus déroulants ne doivent pas non plus dépendre exclusivement des mouvements de la souris. Tous les liens qu’ils contiennent doivent pouvoir être atteints par un autre moyen.
Rendre les liens et les boutons faciles à comprendre
Les utilisateurs doivent pouvoir identifier immédiatement les éléments cliquables. Un lien qui ressemble exactement au texte courant passe facilement inaperçu. À l’inverse, un texte présenté comme un bouton mais dépourvu de fonction crée de fausses attentes.
La présentation des liens doit permettre de les distinguer clairement du reste du texte. La couleur peut y contribuer, mais elle ne doit pas être le seul signe distinctif. Le soulignement est particulièrement utile dans les textes longs.
Le libellé doit expliquer où mène le lien. « Cliquez ici » apporte peu d’informations en dehors de la phrase qui l’entoure. Des formulations comme « Comparer les offres d’hébergement » ou « Ouvrir le formulaire de contact » sont plus précises et restent compréhensibles lorsqu’un lecteur d’écran énonce séparément les liens d’une page.
Les boutons doivent indiquer l’action qu’ils déclenchent. Dans un formulaire, « Envoyer le message » est plus explicite que « Continuer ». Lors d’une commande, il doit être clair si un choix est simplement enregistré ou si la commande est passée.
La taille des éléments de commande compte également. Les icônes très petites ou les liens trop rapprochés sont difficiles à sélectionner sur un écran tactile.
Rendre la navigation au clavier visible
Tout le monde n’utilise pas les sites avec une souris ou un écran tactile. Certaines personnes se servent de la touche Tabulation pour passer d’un lien, d’un bouton ou d’un champ de formulaire à l’autre.
Le focus clavier indique alors quel élément est sélectionné. Si cet indicateur est supprimé pour des raisons esthétiques ou s’il est à peine visible, les utilisateurs perdent un repère important.
L’ordre dans lequel les éléments reçoivent le focus doit aussi suivre la structure visible de la page. Les boîtes de dialogue et les menus dépliables nécessitent également une gestion logique du focus.
Une vérification simple consiste à parcourir l’ensemble du site sans souris. Cela permet de voir rapidement si les fonctions importantes sont accessibles et si le focus reste identifiable à tout moment.
Concevoir des formulaires clairs
Les formulaires sont souvent une source particulière de difficultés. Même de petites ambiguïtés peuvent empêcher les utilisateurs de comprendre quelles informations sont attendues.
Chaque champ de saisie doit avoir un libellé visible. Un texte indicatif à l’intérieur du champ ne suffit pas, car il disparaît dès que la saisie commence.
Les indications supplémentaires doivent figurer directement à côté du champ concerné. Si un format de date précis ou une longueur minimale de mot de passe est exigé, cette information doit être visible avant la saisie.
Les champs obligatoires doivent être clairement signalés. Pour les formulaires longs, un regroupement en sections thématiques facilite la compréhension.
Les messages d’erreur doivent être aussi précis que possible. « Saisie non valide » ne dit pas ce qu’il faut corriger. Un message comme « Veuillez saisir l’adresse e-mail au format name@your-example-domain.com » apporte une aide concrète.
Après une erreur, les informations déjà correctement saisies doivent être conservées. Si les utilisateurs doivent remplir à nouveau tout le formulaire, ils risquent davantage d’abandonner.
Utiliser les images et les icônes à bon escient
Les images peuvent expliquer un contenu, créer une ambiance ou attirer l’attention sur un sujet. Toutes n’ont toutefois pas la même fonction.
Les images purement décoratives n’ont pas besoin d’une description détaillée. En revanche, celles qui transmettent des informations importantes doivent aussi être compréhensibles pour les personnes qui ne peuvent pas les voir. Pour cela, un texte alternatif adapté est ajouté lors de la réalisation technique. Il faut donc déterminer dès la conception quelles images sont informatives et lesquelles sont uniquement décoratives.
Il vaut mieux éviter d’intégrer du texte directement dans une image. Il y est plus difficile à agrandir, ne peut pas être lu facilement par les lecteurs d’écran et risque d’être à peine lisible sur les petits écrans.
Les icônes permettent de gagner de la place, mais leur sens n’est pas toujours évident. Pour les fonctions importantes, un libellé supplémentaire est donc utile. L’état d’une icône doit lui aussi être clairement identifiable.
Maîtriser les mouvements et les animations
Les animations peuvent rendre les transitions plus compréhensibles ou signaler un changement. Trop de mouvements détournent toutefois l’attention du contenu principal.
Les vidéos qui démarrent automatiquement et les carrousels qui défilent peuvent être particulièrement gênants. Les utilisateurs doivent disposer d’un moyen bien visible de les mettre en pause.
Les contenus qui clignotent rapidement ou scintillent fortement sont à éviter. Les mouvements importants en arrière-plan peuvent eux aussi compliquer la lecture ou provoquer un inconfort physique.
Il n’est pas nécessaire de supprimer toutes les animations. Des transitions brèves et discrètes peuvent être utiles. L’essentiel est que les informations restent compréhensibles sans mouvement.
Vérifier les contenus sur différentes tailles d’écran
Le responsive design permet à un site de fonctionner sur les ordinateurs de bureau, les tablettes et les smartphones. Pour l’accessibilité, il faut également vérifier le comportement des contenus lorsqu’ils sont fortement agrandis.
La navigation, les tableaux, les boîtes de dialogue et les formulaires doivent s’adapter à l’espace disponible. Les textes ne doivent pas être coupés, les boutons ne doivent pas se chevaucher et les fonctions importantes doivent rester accessibles.
Les largeurs et les hauteurs fixes causent souvent des problèmes. Des conteneurs flexibles et suffisamment d’espace pour les textes longs offrent une solution plus robuste. C’est également important pour les sites multilingues, car un même libellé peut être beaucoup plus long dans une autre langue.
Rendre les médias accessibles
Les vidéos et les contenus audio doivent être compréhensibles même lorsque les utilisateurs ne peuvent pas entendre le son. Les propos tenus dans les vidéos doivent donc être accompagnés de sous-titres. Les sous-titres générés automatiquement peuvent servir de point de départ, mais ils doivent être vérifiés et corrigés si nécessaire.
Les sous-titres doivent être faciles à lire et bien se détacher de l’image. Des informations comme les changements de personne qui parle ou les sons pertinents peuvent également être ajoutées lorsqu’elles sont nécessaires à la compréhension.
Pour les contenus audio, une version écrite est utile. Elle permet aussi d’effectuer rapidement des recherches dans le contenu ou de le lire dans un environnement bruyant.
Si une vidéo transmet des informations importantes uniquement par l’image, une transcription des paroles ne suffit pas. Dans ce cas, une description supplémentaire de l’action visible peut être nécessaire.
Utiliser un système de design pour les composants accessibles
Un système de design aide à concevoir les éléments récurrents, comme les boutons, les formulaires et la navigation, selon des règles cohérentes.
Il peut notamment définir les couleurs, les dimensions minimales, les espacements et les états de focus. Ainsi, des fonctions identiques conservent la même apparence d’une page à l’autre et les problèmes d’accessibilité déjà résolus ne réapparaissent pas à chaque nouveau composant.
Un système de design ne remplace toutefois pas les vérifications. Même les composants standardisés doivent continuer à être testés après des modifications.
Tester l’accessibilité et la maintenir dans la durée
Pour tester l’accessibilité d’un site, il est possible de commencer par des outils de vérification automatisés. Ils peuvent mesurer les contrastes de couleurs, signaler des libellés manquants et repérer des erreurs techniques. Ils ne suffisent toutefois pas à une évaluation complète.
Un outil peut, par exemple, constater qu’une image possède un texte alternatif. Mais c’est à une personne de juger si ce texte décrit correctement son contenu. De même, une navigation illogique ou un message d’erreur ambigu ne peuvent être détectés automatiquement que de façon limitée.
Un site doit donc aussi être vérifié manuellement. Ces contrôles comprennent notamment l’utilisation au clavier, l’agrandissement de l’affichage, les tests sur différentes tailles d’écran et, pour les fonctions importantes, l’utilisation d’un lecteur d’écran. Les tests avec des personnes ayant des capacités et des besoins différents sont particulièrement instructifs.
Comme les sites évoluent constamment, l’accessibilité ne doit pas être vérifiée une seule fois avant la publication. De nouvelles images, de nouveaux textes, formulaires, extensions ou fonctions externes peuvent ensuite créer de nouveaux obstacles. Il est donc utile de définir des règles claires pour la conception, la rédaction et le développement, et de vérifier régulièrement les contenus nouveaux ou modifiés.
Les retours des visiteurs peuvent également aider à repérer des problèmes jusque-là inaperçus. Un moyen de contact facile à trouver doit être prévu à cet effet.
FAQ : Questions fréquentes sur la conception web accessible et les sites accessibles
Quelle est la différence entre l’accessibilité et la facilité d’utilisation ?
L’accessibilité vise à permettre l’utilisation des sites par des personnes ayant différentes capacités physiques, sensorielles ou cognitives. La facilité d’utilisation décrit plus généralement à quel point un site est simple et compréhensible à utiliser. Ces deux domaines se recoupent souvent, mais ne sont pas identiques.
Chaque image d’un site doit-elle avoir un texte alternatif ?
Non. Les images qui transmettent des informations importantes doivent avoir un texte alternatif adapté. Les images purement décoratives doivent, en revanche, être intégrées de façon à pouvoir être ignorées par les lecteurs d’écran. C’est la finalité de l’image qui détermine si un texte alternatif est nécessaire.
Comment vérifier si mon site est accessible ?
Les outils de vérification automatisés peuvent notamment détecter des problèmes de contraste, de libellés ou d’éléments techniques. Des tests manuels sont également importants, par exemple une utilisation uniquement au clavier, un fort agrandissement de l’affichage et des tests avec un lecteur d’écran.
Les vidéos d’un site accessible doivent-elles avoir des sous-titres ?
Les propos tenus dans les vidéos doivent être disponibles sous forme de sous-titres. Si des informations importantes sont transmises uniquement par l’image, une description supplémentaire de l’action visible peut aussi être nécessaire.
Pourquoi faut-il vérifier régulièrement l’accessibilité ?
Les sites évoluent constamment. De nouveaux contenus, images, formulaires, extensions ou fonctions externes peuvent créer de nouveaux obstacles. Il faut donc vérifier l’accessibilité non seulement avant la publication, mais aussi après les modifications ultérieures.
Un design web accessible doit-il être sobre ?
L’accessibilité n’impose aucun style visuel particulier. Les couleurs, les images et les animations peuvent toujours être utilisées. Elles doivent toutefois être intégrées de manière à préserver la lisibilité des contenus et l’utilisation des fonctions.
Un design épuré peut faciliter l’orientation, mais il n’est pas toujours nécessaire. Même des mises en page plus complexes peuvent être accessibles si leur structure reste clairement reconnaissable.
Un contraste de couleurs élevé suffit-il ?
Un contraste suffisant améliore la lisibilité, mais ne couvre qu’une partie de l’accessibilité. Un site peut présenter des contrastes élevés tout en restant difficile à utiliser, par exemple à cause de menus peu clairs, d’indicateurs de focus manquants ou de champs de formulaire mal libellés. Les différents éléments de conception doivent donc être examinés ensemble.
Les grands caractères sont-ils toujours plus faciles à lire ?
Une taille de caractères plus grande peut aider, mais ne résout pas tous les problèmes. Des lignes très longues, un interligne réduit ou des contrastes faibles compliquent la lecture, même avec de grands caractères. Il est aussi important que les utilisateurs puissent agrandir eux-mêmes le texte sans perturber la mise en page.
Une extension peut-elle rendre un site accessible ?
Une extension peut ajouter certaines fonctions, comme le réglage des couleurs ou de la taille des caractères. Elle ne permet généralement pas de corriger les problèmes fondamentaux de structure, de navigation ou de formulaires. L’accessibilité doit être prise en compte directement dans le design, le contenu et la réalisation technique.
Pourquoi la navigation au clavier est-elle importante ?
Certaines personnes ne peuvent pas utiliser de souris ou parcourent les sites plus rapidement avec le clavier. Elles passent d’un élément interactif à l’autre avec la touche Tabulation. Si certaines fonctions sont inaccessibles ou si le focus est invisible, elles ne peuvent utiliser le site que de manière limitée.
Quels avantages un site accessible offre-t-il aussi aux personnes sans limitations permanentes ?
Des textes clairs, une navigation compréhensible et des éléments de commande suffisamment grands facilitent l’utilisation pour de nombreuses personnes. C’est le cas, par exemple, en plein soleil, avec une connexion Internet lente, un petit écran de smartphone ou une blessure temporaire. Un site bien accessible est généralement aussi plus facile à utiliser.
La conception web accessible améliore l’utilisation pour tous
La conception web accessible commence par les choix de design du quotidien. Des textes faciles à lire, des boutons reconnaissables, des formulaires compréhensibles et une navigation claire aident les personnes à utiliser les contenus de façon autonome.
De nombreux problèmes peuvent être évités en vérifiant tôt les couleurs, les composants et les parcours utilisateurs. Des tests ultérieurs restent toutefois nécessaires, car tous les obstacles ne sont pas visibles dans une maquette statique.
Un site n’a pas besoin d’être sobre ni uniforme pour autant. Son design ne doit toutefois pas prendre le pas sur la clarté. Un bon design se reconnaît aussi à la possibilité d’atteindre son objectif sans obstacles inutiles.
Sujets similaires
La Generative Engine Optimization (GEO) désigne l’ensemble des mesures qui rendent un site récupérable, citable et vérifiable pour les systèmes...
Un site simple d’une seule page peut coûter environ 500 à 3 000 euros. Pour un petit site d’entreprise comptant de cinq à dix sous-pages, compt...
L’hébergement web durable désigne une gestion des sites web et de l’infrastructure nécessaire à leur fonctionnement aussi respectueuse de l’...
