Qu’est-ce qu’un site Web ac­ces­sible ?

L’ac­ces­si­bi­lité sur le Web vise à garantir que les uti­li­sa­teurs pré­sen­tant des li­mi­ta­tions ou des besoins variés puissent utiliser les offres en ligne de manière autonome et sans res­tric­tion. L’objectif d’un site Web ac­ces­sible est ainsi d’éviter l’exclusion de certains groupes de personnes sur Internet, par exemple des personnes en situation de handicap physique ou cognitif.

Qu’est-ce que l’ac­ces­si­bi­lité sur le Web ?

L’ac­ces­si­bi­lité sur le Web vise à permettre à tous les groupes de personnes de par­ti­ci­per de manière équitable aux contenus en ligne. Cela signifie que chacun peut utiliser une offre Web dans les mêmes con­di­tions, sans être exclu de certains contenus ou médias en raison de li­mi­ta­tions. Dans une logique de numérique inclusif, les sites Web ac­ces­sibles cons­ti­tuent un facteur essentiel dont les en­tre­prises doivent avoir plei­ne­ment cons­cience. Par ailleurs, un site Internet ac­ces­sible a également un impact positif sur le ré­fé­ren­ce­ment naturel.

Les barrières cor­res­pon­dent à des obstacles qui entravent ou empêchent l’uti­li­sa­tion équitable des offres nu­mé­riques. Si la sen­si­bi­li­sa­tion à l’ac­ces­si­bi­lité dans l’espace public a nettement progressé ces dernières années, des barrières con­ti­nuent d’ap­pa­raître sur Internet, souvent de manière in­vo­lon­taire, à la suite de choix tech­niques, gra­phiques ou édi­to­riaux. Des études et retours d’ex­pé­rience montrent que les éléments in­te­rac­tifs, tels que les for­mu­laires d’ins­crip­tion ou les mé­ca­nismes de sécurité, peuvent poser des dif­fi­cul­tés par­ti­cu­lières. Certains CAPTCHA, reposant sur des ca­rac­tères déformés ou des tâches visuelles, com­pli­quent fortement l’accès aux contenus pour les personnes ayant des dé­fi­ciences visuelles et vont ainsi à l’encontre des exigences actuelles en matière d’ac­ces­si­bi­lité sur le Web.

Quelles normes s’ap­pli­quent aux sites Web ac­ces­sibles ?

La norme la plus im­por­tante pour la création d’un site Web ac­ces­sible repose sur les WCAG (Web Content Ac­ces­si­bi­lity Gui­de­lines) et, plus pré­ci­sé­ment, sur les WCAG 2.2. Il s’agit de re­com­man­da­tions publiées par le W3C, qui cons­ti­tuent aujourd’hui la référence in­ter­na­tio­nale la plus récente en matière de site Internet ac­ces­sible. Les WCAG 2.2 accordent une im­por­tance par­ti­cu­lière à une uti­li­sa­bi­lité améliorée, à un guidage plus clair de la na­vi­ga­tion au clavier et de la gestion du focus, ainsi qu’à une in­te­rac­tion optimisée sur les appareils mobiles. Ces évo­lu­tions reflètent les nouveaux usages du Web et répondent à des barrières qui n’avaient jusqu’à présent été que par­tiel­le­ment prises en compte.

Parmi les prin­ci­paux critères de con­for­mité des WCAG 2.2 figurent :

• Le focus clavier : les éléments in­te­rac­tifs doivent être clai­re­ment iden­ti­fiables lors de la na­vi­ga­tion au clavier.
• La taille des éléments de commande : les zones cli­quables et tactiles doivent être suf­fi­sam­ment grandes afin d’éviter les erreurs de ma­ni­pu­la­tion.
• Les al­ter­na­tives aux glisser-déposer : les fonc­tion­na­li­tés ne doivent pas dépendre ex­clu­si­ve­ment du drag-and-drop.
• La saisie d’in­for­ma­tions sim­pli­fiée : les in­for­ma­tions ne doivent pas devoir être saisies plusieurs fois par l’uti­li­sa­teur.
• L’au­then­ti­fi­ca­tion ac­ces­sible : les pro­cé­dures de connexion ne doivent pas reposer sur des tâches cog­ni­tives complexes.

Les WCAG 2.2 cons­ti­tuent ainsi une référence centrale pour le dé­ve­lop­pe­ment Web moderne. Elles servent de base technique aux exigences légales en vigueur, notamment au titre de la directive (UE) 2019/882 ap­pli­cable à partir du 28 juin 2025.

La per­cep­tion

De nombreux sites Web intègrent des pu­bli­ci­tés clig­no­tantes, des sections de com­men­taires affichées dans une très petite taille de police et, parfois, une musique de fond destinée à souligner l’ambiance ou le thème de la page. Selon la nature et le degré du handicap, certains visiteurs de votre site Web ne per­çoi­vent toutefois pas ces éléments, ou seulement de manière partielle.

Les personnes aveugles, par exemple, naviguent sur Internet sans repères visuels. À la place, un lecteur d’écran restitue le contenu du site Web. Les in­for­ma­tions tex­tuelles sont trans­mises aux tech­no­lo­gies d’as­sis­tance utilisées. Une plage Braille peut ainsi convertir les textes en braille, per­met­tant à la personne de percevoir le site Web par le toucher. Un outil de synthèse vocale restitue quant à lui les contenus sous forme audio, de sorte que les uti­li­sa­teurs s’appuient sur l’ouïe pour traiter les in­for­ma­tions. Dans ce contexte, une musique de fond peut devenir par­ti­cu­liè­re­ment gênante.

Les personnes pré­sen­tant une dé­fi­cience visuelle moins marquée, parmi les­quelles figurent de nombreux seniors, per­çoi­vent le contenu du site Web vi­suel­le­ment, mais ont souvent besoin d’un affichage fortement agrandi. Les personnes dal­to­niennes, en revanche, ne dis­tin­guent pas les aver­tis­se­ments signalés uni­que­ment par la couleur. Les personnes sourdes, quant à elles, ne peuvent pas accéder aux in­for­ma­tions diffusées ex­clu­si­ve­ment par des fichiers audio, ni à une grande partie des contenus vidéo sans al­ter­na­tives adaptées.

La com­pré­hen­sion

Les très jeunes uti­li­sa­teurs, les seniors ou les personnes pré­sen­tant des troubles cognitifs ont parfois des dif­fi­cul­tés à com­prendre un texte rempli de termes tech­niques modernes ou d’abré­via­tions non ex­pli­quées. De même, lorsque le site Web présente des contenus liés sur le plan thé­ma­tique à des endroits très éloignés, il devient difficile pour beaucoup de personnes d’en saisir le lien.

L’in­te­rac­tion et la na­vi­ga­tion

De plus en plus de personnes con­sul­tant les sites Web sur smart­phone, il devient par­ti­cu­liè­re­ment frustrant de ne pas pouvoir sé­lec­tion­ner les liens avec précision du bout du doigt. Si un site Web n’est pas optimisé pour les appareils mobiles et que des liens, affichés dans une petite taille de police, sont très rap­pro­chés, l’uti­li­sa­tion devient également difficile pour les personnes âgées ayant les mains qui tremblent.

Pour les personnes en situation de handicap moteur, de nombreux outils existent afin de faciliter l’uti­li­sa­tion de l’or­di­na­teur. Certaines tech­no­lo­gies en­re­gistrent les mou­ve­ments des yeux, tandis que d’autres reposent sur une uti­li­sa­tion au clavier. Un site Web ac­ces­sible doit donc être conçu de manière à pouvoir être in­ter­prété par ces tech­no­lo­gies d’as­sis­tance. Si un site Internet ac­ces­sible ne peut pas être parcouru de cette façon, les uti­li­sa­teurs qui en dépendent se voient de fait exclus d’une partie ou de la totalité de l’offre.

Lorsqu’il s’agit de remplir un for­mu­laire, par exemple pour s’inscrire à une news­let­ter, des erreurs sur­vien­nent fré­quem­ment. Le mot de passe ne respecte pas les critères requis ou la date de naissance ne cor­res­pond pas au format attendu. Il est donc essentiel de fournir des in­di­ca­tions claires et com­pré­hen­sibles pour corriger les erreurs. L’in­te­rac­tion avec un site Web comprend aussi la na­vi­ga­tion. Les personnes utilisant des appareils à petit écran ou un fort niveau de zoom dépendent de parcours de na­vi­ga­tion adaptés et d’une structure claire pour pouvoir utiliser un site Internet ac­ces­sible sans dif­fi­culté.

Les saisies

Les sections de com­men­taires per­met­tent aux uti­li­sa­teurs de donner leur avis. Elles peuvent y exprimer leur opinion sur un produit ou des contenus, ou échanger avec d’autres personnes. Les personnes mal­voyantes utilisent souvent une loupe d’écran. Les éléments ap­pa­rais­sent alors nettement plus grands et la distance entre la colonne de lecture et le champ de saisie augmente. Disposez donc vi­suel­le­ment les éléments à proximité les uns des autres afin de faciliter les échanges.

Quels avantages offre le Webdesign ac­ces­sible ?

Réduire les barrières en ligne améliore l’ergonomie de votre site Web et peut, par con­sé­quent, avoir un effet positif sur votre clas­se­ment sur Google. Concevoir un site Web ac­ces­sible re­pré­sente donc aussi un avantage éco­no­mique et ne nécessite gé­né­ra­le­ment qu’un effort sup­plé­men­taire limité. De plus, ces sites Web s’ins­cri­vent dans le respect des exigences eu­ro­péennes, notamment celles issues de la directive eu­ro­péenne sur l’ac­ces­si­bi­lité (European Ac­ces­si­bi­lity Act, EAA). Pour les en­tre­prises, un autre avantage majeur réside dans le fait qu’un site Internet conçu de manière inclusive permet de toucher un public plus large, en offrant l’accès aux contenus à davantage d’uti­li­sa­teurs que des sites qui ne tiennent pas compte de ces exigences.

Comment concevoir un site Web ac­ces­sible ?

Pour créer un site Internet ac­ces­sible, il est essentiel d’accorder une attention par­ti­cu­lière à la structure de l’in­for­ma­tion ainsi qu’aux dif­fé­rents com­po­sants visuels du site Web.

Étape 1 : garantir une structure d’in­for­ma­tion claire

Struc­tu­rez votre site Web de manière cohérente et utilisez un langage convivial pour les uti­li­sa­teurs. Vous fa­ci­li­te­rez ainsi la com­pré­hen­sion des contenus, tout en amé­lio­rant votre vi­si­bi­lité sur Google, les moteurs de recherche tenant compte de la li­si­bi­lité des textes. Afin de maintenir de bonnes per­for­mances en SEO et de proposer une ar­chi­tec­ture de site Web claire et com­pré­hen­sible, veillez aux points suivants :

Étape 2 : créer des repères visuels

Si vous pouvez agrandir les polices ou en modifier les couleurs, cela aide les personnes mal­voyantes ou dal­to­niennes à mieux iden­ti­fier les contenus d’un site Internet ac­ces­sible. Le contenu doit bien se détacher du fond afin d’être le plus lisible possible. Mettez en évidence les éléments in­te­rac­tifs à l’aide de boutons ou d’un marquage coloré. Par exemple, lorsqu’un lien change de couleur si les uti­li­sa­teurs y naviguent au clavier, le survolent avec la souris ou cliquent dessus. Toutefois, en com­plé­ment des couleurs, utilisez im­pé­ra­ti­ve­ment d’autres signaux, comme des numéros ou des as­té­risques, pour trans­mettre l’in­for­ma­tion.

Close

Les personnes qui souffrent de crises d’épilepsie sont à risque lorsqu’un site Web ac­ces­sible contient des gra­phiques ou des vidéos clig­no­tant plus de trois fois par seconde. De plus, des scien­ti­fiques ont constaté que des motifs en grille aux contours nets et à fort contraste peuvent dé­clen­cher des crises chez les personnes atteintes d’épilepsie pho­to­sen­sible.

Étape 3 : présenter les in­for­ma­tions de manière variée

Intégrez la con­cep­tion d’un site Web ac­ces­sible dans votre travail quotidien. Qu’il s’agisse de ré­fé­ren­ce­ment, de relations presse ou de la pré­sen­ta­tion de nouvelles offres, de nouveaux contenus sont publiés en per­ma­nence. Facilitez l’uti­li­sa­bi­lité pour les visiteurs en adaptant les in­for­ma­tions à leurs besoins et en ren­for­çant du­ra­ble­ment l’ac­ces­si­bi­lité de votre site Internet.

Un élément central d’un site Web ac­ces­sible, qui joue un rôle important pour le ré­fé­ren­ce­ment, concerne l’at­tri­bu­tion de textes al­ter­na­tifs pour les images. Les robots d’ex­plo­ra­tion et les lecteurs d’écran ne peuvent pas in­ter­pré­ter le contenu visuel des images, tout comme les personnes aveugles. Les textes al­ter­na­tifs servent donc à décrire le contenu des images. Par ailleurs, les visiteurs disposant d’une connexion Internet de faible qualité, pour lesquels les images se chargent lentement ou pas du tout, bé­né­fi­cient eux aussi de ces des­crip­tions.

Trans­crip­tions et sous-titres

Une démarche plus ap­pro­fon­die consiste à créer ra­pi­de­ment et de manière continue des trans­crip­tions et des sous-titres. Ces éléments per­met­tent de rendre les in­for­ma­tions issues des contenus audio ac­ces­sibles aux personnes sourdes. La trans­crip­tion, qui restitue par écrit les paroles ainsi que les sons et les bruits, doit être placée si possible à proximité immédiate du contenu audio concerné, par exemple via un bouton renvoyant vers le document.

Les sous-titres amé­lio­rent con­si­dé­ra­ble­ment la com­pré­hen­sion des vidéos Web pour les personnes sourdes. Les uti­li­sa­teurs qui ne sou­hai­tent pas activer le son, par exemple pour ne pas déranger leur entourage, profitent également de cette fonc­tion­na­lité. Les personnes pré­sen­tant des troubles cognitifs ou des troubles du com­por­te­ment comme le TDAH, tout comme les personnes ma­len­ten­dantes, as­si­mi­lent mieux les in­for­ma­tions trans­mises par vidéo lorsqu’elles peuvent neu­tra­li­ser les bruits de fond à l’aide des réglages du lecteur.

Au­dio­des­crip­tion

Les personnes mal­voyantes ou aveugles per­çoi­vent les stimuli visuels de manière limitée, voire pas du tout. Afin de leur permettre de com­prendre des contenus vidéo, ceux-ci doivent être enrichis d’une piste audio sup­plé­men­taire. Cette piste fournit des ex­pli­ca­tions sur les éléments visuels, tels que les paysages ou les personnes, et décrit briè­ve­ment les actions visibles. Ces des­crip­tions doivent être placées dans les pauses de dialogue et de son de l’en­re­gis­tre­ment audio d’origine, afin d’éviter tout che­vau­che­ment entre les pistes.

Langage facile

Le langage facile présente les contenus de manière vo­lon­tai­re­ment simple. Il aide les personnes ayant des handicaps cognitifs à mieux com­prendre des sujets complexes. Cette forme de langage évite notamment le con­di­tion­nel, les synonymes et les for­mu­la­tions négatives. Les phrases sont courtes et expriment chacune une seule idée. Les personnes pré­sen­tant des li­mi­ta­tions cog­ni­tives disposent du même droit à l’in­for­ma­tion que tous les autres uti­li­sa­teurs. À ce titre, de nombreux quo­ti­diens proposent désormais, sur leurs pla­te­formes en ligne, des versions de leurs articles en langage facile, il­lus­trant de bonnes pratiques en matière de sites Web ac­ces­sibles. Les or­ga­nismes publics recourent de plus en plus au langage facile pour leurs contenus in­for­ma­tifs.

Une approche moins con­traig­nante est le langage simplifié, qui cor­res­pond ap­proxi­ma­ti­ve­ment à un niveau de langue A2 ou B1.

Étape 4 : rendre le site Web com­pa­tible

Les lecteurs d’écran et autres tech­no­lo­gies d’as­sis­tance rendent l’ac­ces­si­bi­lité sur le Web réel­le­ment possible pour de nom­breuses personnes. Ces pro­grammes par­cou­rent les documents Web in­té­gra­le­ment, de gauche à droite et de haut en bas. Ils fonc­tion­nent de manière stric­te­ment linéaire : vous devriez donc séparer la mise en page et le design, sans quoi les lecteurs d’écran in­ter­pré­te­ront la page de manière in­cor­recte. Con­tri­buez à permettre aux uti­li­sa­teurs de naviguer ef­fi­ca­ce­ment sur votre site en res­pec­tant les règles de base ex­pli­quées ci-dessous.

Liens de na­vi­ga­tion d’évitement (skip links) et autres rac­cour­cis

Les lecteurs d’écran trans­met­tent les in­for­ma­tions tex­tuelles à des logiciels de synthèse vocale et à des plages Braille. Pour ce faire, ils lisent la page de haut en bas, y compris les éléments ré­cur­rents tels que la barre de na­vi­ga­tion, les icônes ou les liens vers des pages de niveau inférieur. Afin d’éviter que ces in­for­ma­tions soient répétées inu­ti­le­ment à chaque page consultée, il est re­com­mandé d’intégrer des liens de na­vi­ga­tion d’évitement (skip links).

Les uti­li­sa­teurs qui naviguent uni­que­ment au clavier, parfois à l’aide d’un embout buccal, ren­contrent également de grandes dif­fi­cul­tés lorsqu’ils doivent parcourir un grand nombre d’éléments in­te­rac­tifs. Ces personnes bé­né­fi­cient d’un skip link placé en haut de page, aussi visible que possible :

<a href="#content">Aller au contenu principal</a>
<main id="content">
    <h1>Titre principal</h1>
    <p>Premier paragraphe</p>
</main>

Il existe aussi des skip links in­vi­sibles dans la mise en page. Dans ce cas, le lecteur d’écran transmet à l’uti­li­sa­teur le message du texte al­ter­na­tif « Aller au contenu principal » lorsque le code est structuré de la manière suivante :

<a href="#content"><img src="empty.gif" height="15" border="0" alt="Aller au contenu principal" width="5"></a>

Il est important que les skip links ap­pa­rais­sent le plus tôt possible dans le code. Placez donc le point d’ancrage au début du contenu principal :

<div id="content"></div>

Les skip links doivent être utilisés avec par­ci­mo­nie, car une ac­cu­mu­la­tion excessive réduit leur ef­fi­ca­cité et oblige les uti­li­sa­teurs à parcourir trop d’éléments. Une approche plus élégante consiste à utiliser des repères ARIA (ARIA landmarks) et à struc­tu­rer cor­rec­te­ment le document. L’uti­li­sa­tion d’éléments HTML5 est vivement re­com­man­dée.

Une autre aide consiste à proposer une table des matières au début du document, per­met­tant de rediriger les uti­li­sa­teurs vers les sections cor­res­pon­dantes au moyen de liens internes. Les lecteurs d’écran modernes annoncent alors les titres associés. En utilisant des titres ex­pli­cites et cor­rec­te­ment hié­rar­chi­sés, vous améliorez la li­si­bi­lité à la fois pour les moteurs de recherche et pour les tech­no­lo­gies d’as­sis­tance.

Tableaux de données plutôt que tableaux de mise en page

Pour concevoir des sites Web ac­ces­sibles conformes aux re­com­man­da­tions du W3C, il est pré­fé­rable d’utiliser ex­clu­si­ve­ment des tableaux de données. Les lecteurs d’écran in­ter­prè­tent ce format plus fa­ci­le­ment et peuvent restituer les in­for­ma­tions de manière per­ti­nente après con­ver­sion. Les tableaux de mise en page, en revanche, servent uni­que­ment à organiser vi­suel­le­ment le contenu et com­pli­quent souvent sa res­ti­tu­tion com­pré­hen­sible par les tech­no­lo­gies d’as­sis­tance.

Lorsque des tableaux de mise en page sont malgré tout né­ces­saires, dé­fi­nis­sez-les uni­que­ment à l’aide d’éléments simples comme TABLE, TR et TD (tableau, ligne et cellule). Utilisez ensuite des éléments de struc­tu­ra­tion afin d’organiser lo­gi­que­ment les relations entre les cellules. Dans ce cas, le lecteur d’écran in­ter­prète le tableau de mise en page comme un tableau de données. À l’inverse, retirer certains éléments de tableau de l’arbre d’ac­ces­si­bi­lité produit l’effet opposé.

Pour un site Web ac­ces­sible, appliquez, comme dans l’exemple ci-dessous, l’attribut role="none". Celui-ci doit être défini à la fois sur le tableau et sur ses éléments enfants. En cas d’im­bri­ca­tion de tableaux, chaque niveau doit être configuré de la même manière.

<table role="none">
    <tr>
        <td>
            <table role="none">
                <tr>
                    <td>
                        Exemple de texte <abbr title="par exemple">p. ex.</abbr> sur ARIA
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Site Web ac­ces­sible : checklist

Une fois la création de votre site Internet ac­ces­sible terminée, cette checklist vous permet de vérifier ra­pi­de­ment si vous avez bien pris en compte les éléments es­sen­tiels.

✓ Structure de l’in­for­ma­tion claire, cohérente et bien organisée

✓ Uti­li­sa­tion d’un langage simple et ac­ces­sible

✓ Textes al­ter­na­tifs (alt) pour les images

✓ Trans­crip­tions pour les contenus vidéo et audio

✓ Repères visuels par la couleur pour les contenus im­por­tants

✓ Con­trastes suf­fi­sam­ment élevés

✓ Com­pa­ti­bi­lité avec les lecteurs d’écran

Quels outils gratuits utiliser pour créer des sites Web ac­ces­sibles ?

Il existe une série d’outils dif­fé­rents qui peuvent vous aider à mettre en place un site Internet ac­ces­sible. Nous vous pré­sen­tons ci-dessous quelques-uns des outils les plus connus :

• Test d’ac­ces­si­bi­lité Web d’EXPERTE.com : testez l’ac­ces­si­bi­lité des sites Web des pays fran­co­phones.
• Ac­ces­si­bi­lity Checker : testez gra­tui­te­ment la con­for­mité de votre site Web aux WCAG dans les pays an­glo­phones.
• Si­teim­prove : l’Ac­ces­si­bi­lity Checker de Si­teim­prove propose un contrôle gratuit de votre site Web, qui vous est envoyé par email.

En résumé : l’ac­ces­si­bi­lité sur le Web améliore l’UX pour tous

En concevant un site Web ac­ces­sible, vous renforcez l’usabilité et améliorez du­ra­ble­ment l’ex­pé­rience uti­li­sa­teur. Les personnes naviguant sur mobile, celles en situation de handicap physique ou cognitif, les seniors ainsi que les uti­li­sa­teurs moins ex­pé­ri­men­tés s’orientent plus fa­ci­le­ment au sein des contenus. En struc­tu­rant clai­re­ment votre site Internet ac­ces­sible et en pré­sen­tant les in­for­ma­tions de manière inclusive, vous optimisez également votre vi­si­bi­lité dans les moteurs de recherche et augmentez la durée de visite. Si cette démarche implique un travail sup­plé­men­taire et des phases de test, l’in­ves­tis­se­ment est rentable : l’ac­ces­si­bi­lité sur le Web bénéficie à tous.