Skip links

WCAG 2.1 : comment rendre votre site accessible à tous les utilisateurs ?

Dès 2025, les marques seront concernées par une directive de mise en conformité des contenus web pour permettre leur accès à tous les utilisateurs.

Récemment nous vous avions annoncé, sur notre page LinkedIn et par email, l’évolution de notre solution pour permettre son usage par tous les utilisateurs. Avec cet article, nous souhaitons vous donner les cartes en main pour vous aider, vous aussi, à avancer vers cette mise en conformité !

L’accessibilité des contenus web, qu’est-ce que c’est ?

Selon Access42, la société spécialisée dans l’accessibilité numérique :

L’accessibilité numérique est un droit fondamental. C’est la
possibilité pour toutes et tous d’utiliser les
outils informatiques, quelle que soit leur façon d’y accéder.

Développer des contenus web accessibles, c’est participer à rendre le web inclusif. Ce qui va aider une partie des utilisateurs en leur permettant de naviguer sur votre site, de prendre des informations ou encore d’acheter vos produits. Que ce soit grâce à l’utilisation de seulement quelques touches sur le clavier pour parcourir la page, un lecteur d’écran pour entendre les informations clés, des sous-titres pour comprendre les contenus audio…

Les acteurs concernés

Depuis le 23 septembre 2020, tous les sites nouvellement créés ont déjà l’obligation de rendre accessibles leurs contenus web à tous les utilisateurs.

Pour les sites qui existaient avant cette date, l’obligation concerne déjà les organismes publics, les acteurs du secteur privé doté d’une délégation de service public, les entreprises privées à but non lucratif, mais aussi les entreprises privées générant plus de 250 millions d’euros de chiffre d’affaires en France. Si vous faites partie des acteurs mentionnés, nous vous conseillons de mettre en place vos actions au plus vite !

Ce que dit le cadre légal

Concrètement, si vous faites partie des acteurs cités ci-dessus, vous devez dès maintenant pallier aux manquements vis-à-vis de la législation française.

Votre entreprise doit proposer un plan pluriannuel (de 3 ans maximum) qui se décline en plans annuels. Ces plans doivent comporter de véritables actions pour transformer vos contenus web en contenus inclusifs.

La deuxième obligation que vous avez est de mentionner sur votre site votre conformité ou non au Référentiel Général d’Accessibilité pour les Administrations (RGAA). Sachant que les utilisateurs doivent pouvoir indiquer à cet endroit tout manquement à ces règles !

Mais que se passe-t-il si vous n’êtes pas en conformité ? Le décret de 2019 mentionne une possibilité de sanction administrative de 20 000€ (par site non conforme) renouvelée chaque année, jusqu’à ce que vous ayez répondu aux manquements. Dès que l’entreprise concernée est informée du risque de sanction, elle dispose de 3 mois (prolongeable de 2 mois sous demande) pour justifier sa non-conformité. A l’issue de ce délai, l’entreprise est soit sanctionnée, soit dispose d’un délai de 3 mois pour se mettre en conformité.

Dès 2025, la nouvelle directive européenne « produits et services » rendra valable cette obligation au e-commerce, aux services de médias audiovisuels, au transport aérien et ferroviaire, mais aussi au secteur bancaire. La bonne nouvelle pour vous, c’est que vous avez suffisamment de temps pour transformer vos contenus actuels sans risquer de sanctions, mais ne tardez pas trop !

Quelques conseils pour vous mettre en conformité

Pour vérifier le niveau d’accessibilité actuel de votre site, vous pouvez commencer par effectuer le test rapide proposé par Access42, la société spécialisée dans l’accessibilité numérique.

Il vous suffit de vous poser les questions suivantes :

  • Est-il possible d’utiliser tous les éléments cliquables de votre site via le clavier ?
  • Y-a-t-il suffisamment de contraste entre le fond et le texte ?
  • Les liens des documents téléchargeables sont-ils distinguables des liens de changement de page ?
  • Tous les éléments en mouvement peuvent-ils être arrêtés et redémarrés ?
  • Les vidéos et autres éléments audios sont-ils accessibles sans le son ?
  • Les pages de votre site sont-elles structurées de balises HTML ?

Est-il possible d’utiliser tous les éléments cliquables de votre site via le clavier ?

Dans le cas où un utilisateur ne peut pas utiliser sa souris, il est nécessaire que la navigation et l’accès aux différents éléments cliquables puisse se faire entièrement via le clavier.

Alors essayez de naviguer vous-même sur votre site en utilisant la touche Tab pour passer d’un élément à un autre et Shift+Tab pour revenir en arrière. La touche Entrée doit permettre la sélection des éléments cliquables et la touche Echap évite à l’utilisateur de rester bloqué dans la page. Enfin les flèches gauche et droite du clavier doivent vous aider à modifier les éléments d’un formulaire.

Est-ce le cas ? Sinon, vous connaissez les éléments à améliorer en priorité !

Clavier

Y-a-t-il suffisamment de contraste entre le fond et le texte ?

Pour vérifier simplement cette étape, vous pouvez par exemple utiliser Contrast Ratio. Cet outil est simple d’utilisation, il vous suffit de noter le code de la couleur que vous utilisez en arrière plan (ou laisser blanc si c’est le cas) et celui de la couleur du texte. Un score vous est alors attribué comme sur l’image ci-dessous.

Contrast Ratio

©Contrast Ratio

En passant votre curseur sur le score, un message plus précis vous indique si ce contraste est suffisant pour l’accessibilité de votre contenu et à quel niveau officiel (entre A, AA et AAA) il répond.

Pour ceux qui obtiennent un score insuffisant, l’outil Color Safe vous propose des couleurs de texte adaptées en fonction de la couleur de l’arrière-plan, de la police utilisée et du niveau d’accessibilité souhaité !

Color Safe

©Color Safe

Les liens des documents téléchargeables sont-ils bien indiqués ?

Vous le savez, un lien peut permettre d’accéder à une autre page ou de télécharger un fichier. Afin de laisser le choix à l’utilisateur de télécharger ou non votre fichier, il est primordial de l’informer de la nature du lien.

Concrètement, s’il s’agit d’un lien de téléchargement, le format du document et son poids doivent directement être mentionnés dans le lien. Ce qui est généralement indiqué entre parenthèses, par exemple : «Nom du document (Format, poids)» !

Cela permettra aux utilisateurs dotés d’un lecteur d’écran d’entendre les informations contenues dans ce lien et d’y accéder seulement s’ils le souhaitent.

Tous les éléments en mouvement peuvent-ils être arrêtés et redémarrés ?

Depuis quelque temps, la tendance est au mouvement sur les sites pour apporter du dynamisme et de la modernité.

Certaines animations peuvent être très pratiques pour orienter la lecture de l’utilisateur, lui faire comprendre l’essentiel en quelques secondes, lui faciliter le visionnage d’un contenu vidéo… Si vous faites partie des adeptes de la tendance et que votre site comporte des vidéos à lecture automatique ou des animations d’images, il se peut que votre site ne soit pas accessible au plus grand nombre !

Pour qu’il le soit, il est essentiel de ne pas abuser de ces éléments en mouvement et de veiller à ce qu’ils puissent être arrêtés et redémarrés simplement via une touche du clavier.

Les vidéos et autres éléments audio sont-ils compréhensibles sans le son ?

Pour que vos supports audio soient consultables par un maximum d’utilisateurs, il est recommandé de les accompagner d’une version écrite ou de sous-titres.

N’oubliez pas que vous avez généralement la possibilité d’activer ou de désactiver les sous-titres directement depuis le lecteur vidéo.

Voici un exemple concret avec la vidéo de notre Webinar sur les tendances de consommation. Dans la barre de lecture se trouve l’icône des sous-titres pouvant être activés en appuyant sur la touche C ou en se déplaçant avec Tab et en validant avec la touche Entrée.

webinar tendances de consommation

Les pages de votre site sont-elles structurées de balises HTML ?

Cette question est très importante pour répondre aux besoins de tous les utilisateurs ! En effet, vos titres, sous-titres et textes sont visuellement reconnaissables et facilitent la navigation. Toutefois, les utilisateurs qui ne peuvent pas les voir ne pourront pas se faire une idée de la structure de vos pages sans l’usage de balises HTML <h>, balises propres aux titres.

Parmi ces balises de titres, on distingue les titres de premier niveau (<h1>) pour les titres principaux, les titres de second niveau (<h2>) pour les sous-titres et ainsi de suite. Cette pratique permet la restitution vocale de votre structure de page par un lecteur d’écran.

En effet, le lecteur d’écran peut lire le code HTML et donc les textes encadrés des balises correspondantes. Ainsi, l’utilisateur sera en mesure de décider si le contenu l’intéresse ou non. De plus, les lecteurs d’écran simplifient la navigation puisqu’ils permettent à l’internaute de passer d’un titre à un autre grâce à un raccourci clavier.

Balises

La prochaine étape

Vous l’aurez compris, progressivement la loi impose à de plus en plus d’acteurs présents sur le web de proposer des contenus accessibles par toutes et tous sous peine de sanction. Même si les acteurs du e-commerce ont encore un peu de temps devant eux pour préparer les transformations digitales que cela nécessite, il est plus que primordial de commencer la marche vers un web inclusif. Puisque tous les utilisateurs, quelles que soient leurs manières d’accéder aux contenus web, doivent pouvoir en profiter.

Voyez-le comme une opportunité. Vous facilitez l’accès aux contenus ainsi que l’achat de plus de consommateurs et vous augmentez votre trafic ainsi que vos ventes ! 

Pour aller plus loin, notez que certaines sociétés sont spécialisées dans le domaine. Donc n’hésitez pas à faire appel à leur aide si vous préférez être accompagnés dans ces démarches, avoir la certitude de respecter le cadre légal ou de couvrir les besoins de tous les utilisateurs !

CONTACTEZ-NOUS