Accessibilité d’un site web : obligations et bonnes pratiques

Pourquoi l’accessibilité vous concerne

L’accessibilité numérique consiste à concevoir un site pour qu’il soit utilisable par des personnes en situation de handicap, de façon permanente ou temporaire : vue faible, daltonisme, surdité, difficulté à utiliser une souris, troubles de l’attention. Elle profite en réalité à tout le monde : textes lisibles, boutons assez grands, formulaires clairs.

Elle a aussi un intérêt direct pour votre activité : un formulaire de réservation utilisable au clavier ou un contraste suffisant sur un téléphone, ce sont des clients qui vont au bout de leur démarche. Et un site bien structuré pour les lecteurs d’écran l’est aussi pour Google.

Ce que dit la loi, selon où vous êtes

Le détail des obligations (qui exactement, quelles exceptions, quelle déclaration publier) dépend de votre secteur et de votre taille. Pour la France, les informations officielles de l’administration et un conseil juridique permettent de le préciser ; pour l’Ontario, le gouvernement provincial publie des guides sur l’AODA. Si vous vendez en ligne aux Antilles ou en Hexagone, l’European Accessibility Act vous concerne très probablement : voir aussi boutique en ligne aux Antilles.

Les règles de référence partout dans le monde s’appuient sur les WCAG, les règles pour l’accessibilité des contenus web publiées par le W3C. Viser le niveau AA, c’est répondre à l’essentiel des attentes.

Les WCAG en quatre principes

Les WCAG sont organisées autour de quatre principes, chacun décliné en critères de niveau A (minimum), AA (niveau visé en général) et AAA (le plus exigeant).

Perceptible

L’information peut être perçue autrement que par un seul sens : texte alternatif pour les images, sous-titres pour les vidéos, contraste suffisant.

Utilisable

Tout se fait au clavier, sans piège, avec un ordre de navigation logique et assez de temps pour agir.

Compréhensible

Textes clairs, langue déclarée, formulaires avec des libellés et des messages d’erreur explicites, comportement prévisible.

Robuste

Le code est propre et compatible avec les technologies d’assistance, comme les lecteurs d’écran.

La liste de vérification pratique

Voici les points à contrôler en priorité. Beaucoup se règlent dès la conception, presque sans surcoût, alors qu’ils coûtent cher à corriger après coup.

• Contraste suffisant entre le texte et le fond, y compris sur les boutons et les textes posés sur des photos.
• Textes alternatifs sur les images qui portent une information ; texte alternatif vide pour les images décoratives.
• Titres hiérarchisés (un seul titre principal par page, puis des sous-titres dans l’ordre).
• Navigation au clavier complète, avec un contour visible sur l’élément actif.
• Formulaires avec un libellé lié à chaque champ et des messages d’erreur qui disent quoi corriger.
• Pas d’information portée par la couleur seule (« les champs en rouge sont obligatoires »).
• Texte agrandissable sans casser la mise en page, et lisible sur téléphone sans zoomer.
• Vidéos sous-titrées, pas de lecture automatique avec le son.
• Liens explicites (« Voir nos tarifs » plutôt que « cliquez ici »).
• Langue de la page déclarée, et changements de langue signalés sur un site bilingue.

Comment tester

1. 01
   Le test du clavier

   Débranchez la souris et parcourez votre site avec la touche Tab : pouvez-vous tout atteindre, voir où vous êtes, remplir le formulaire ?

2. 02
   Les outils automatiques

   Des extensions gratuites pour navigateur repèrent les problèmes de contraste, d’images sans texte alternatif ou de titres mal ordonnés. Elles détectent une partie des problèmes seulement.

3. 03
   Le lecteur d’écran

   VoiceOver sur iPhone et Mac, TalkBack sur Android, NVDA sur Windows : quelques minutes d’essai suffisent pour mesurer les difficultés.

4. 04
   L’audit

   Pour une obligation légale, un audit par un spécialiste selon le référentiel applicable donne une mesure fiable.

Boutiques, réservations et espaces clients

Les obligations visent surtout l’e-commerce et les services en ligne : c’est donc sur les parcours qui mènent à un achat ou à un contrat qu’il faut être le plus rigoureux.

• Fiches produits : photos avec texte alternatif, prix et options lisibles par un lecteur d’écran, choix de taille ou de couleur utilisable au clavier.
• Panier et paiement : chaque étape annoncée clairement, erreurs expliquées, temps suffisant pour remplir les champs.
• Vérifications anti-robot : les images à déchiffrer bloquent une partie des personnes ; préférez des solutions invisibles ou accessibles.
• Prise de rendez-vous : un calendrier utilisable au clavier et lisible par un lecteur d’écran, ou une alternative simple (liste de créneaux).
• Espace client et application : mêmes règles que le site, y compris pour les tableaux de bord, les graphiques (avec une version texte des chiffres) et les notifications.
• Documents : factures et catalogues PDF structurés, ou disponibles aussi en page web.

Pour une application web ou une application mobile, ces exigences se traitent dès la maquette : il est bien plus simple de choisir des composants accessibles au départ que de les remplacer une fois l’application en service.

Les erreurs les plus fréquentes

• Du texte gris clair sur fond blanc, ou du texte blanc sur une photo claire.
• Des boutons faits d’une simple icône, sans texte ni libellé caché.
• Des menus et fenêtres qui ne s’ouvrent qu’au survol de la souris.
• Des formulaires dont les champs n’ont qu’un texte indicatif qui disparaît à la saisie.
• Des carrousels qui défilent tout seuls, sans bouton pause.
• Des « surcouches d’accessibilité » ajoutées par un script : elles ne corrigent pas le code du site et ne remplacent pas une conception accessible.

Chaque site que nous concevons est pensé téléphone d’abord, puis vérifié sur tous les formats, et ces points se prévoient dès la maquette. Pour un site existant qui pose problème, une refonte permet de repartir sur de bonnes bases ; pour un nouveau projet, voyez nos sites vitrines, à partir de 2 500 €, et nos boutiques en ligne.