Aller au contenu
Tous les guides
Technique5 min de lecture

Comment rendre mon site accessible ? Contraste, clavier, texte alternatif

Bases de l'accessibilité web : contraste, navigation au clavier, texte alternatif, lisibilité et sites bilingues RTL. Exemple de consigne inclus.

Accessibilité signifie que des personnes malvoyantes, sans souris, avec lecteur d'écran, avec un tremblement ou simplement sur un téléphone en plein soleil peuvent utiliser votre site. Elle améliore aussi le référencement et les conversions, car un site clair est plus simple pour tous.

Inutile de maîtriser tout le WCAG pour commencer. Ces bases couvrent les problèmes les plus fréquents, et vous pouvez vérifier chacune en quelques minutes. En France, le référentiel de référence est le RGAA, obligatoire pour le secteur public et certaines grandes entreprises.

L'accessibilité commence par quatre habitudes : un bon contraste des couleurs, une utilisation complète au clavier, un texte alternatif utile pour les images et un texte lisible dans le bon sens. Elles aident les personnes en situation de handicap, et tout le monde.

Contraste et lisibilité

Un gris clair sur fond blanc paraît élégant mais devient illisible pour beaucoup. Le niveau AA du WCAG demande un ratio d'au moins 4,5 pour 1 pour le texte courant et 3 pour 1 pour le grand texte. Des vérificateurs gratuits calculent le ratio de deux couleurs.

  • Texte courant d'au moins 16 px avec un interligne confortable.
  • Ne vous reposez pas sur la couleur seule, par exemple le rouge pour les erreurs ; ajoutez une icône ou des mots.
  • Autorisez le zoom ; ne désactivez pas le pincement pour zoomer.

Clavier et focus

Appuyez sur Tab sur votre site. Atteignez-vous chaque lien, bouton et champ dans un ordre logique, et voyez-vous toujours où vous êtes ? Un contour de focus visible est indispensable. Menus, fenêtres modales et carrousels doivent aussi fonctionner avec Entrée, Espace et Échap.

Texte alternatif, libellés et structure

Toute image porteuse de sens a besoin d'une courte description de ce qu'elle montre ou fait ; les images décoratives reçoivent un alt vide pour que le lecteur d'écran les ignore. Chaque champ de formulaire a besoin d'un libellé visible, pas seulement d'un texte d'exemple. Utilisez de vrais titres dans l'ordre et des boutons explicites plutôt que « cliquez ici ».

Langues de droite à gauche

Si votre site a une version arabe ou ourdoue, réglez la direction de la page en RTL et l'attribut de langue correctement pour que le lecteur d'écran choisisse la bonne voix. Inversez la mise en page et les icônes directionnelles comme les flèches, mais gardez logos, numéros de téléphone et commandes vidéo tels quels. Choisissez une police conçue pour l'écriture concernée.

Le demander dans le chat

Avec Uttra, vous pouvez demander ces améliorations en langage courant. Une consigne :

« Améliore l'accessibilité de mon site : porte le contraste des textes au niveau WCAG AA, ajoute un contour de focus visible, mets un texte alternatif utile à chaque image, ajoute un libellé à tous les champs, fais fonctionner le menu au clavier et vérifie que la version arabe RTL est bien inversée. »

Testez ensuite vous-même avec Tab seul, à 200 % de zoom et avec un lecteur d'écran gratuit. Les outils automatiques ne détectent qu'une partie des problèmes.

Questions fréquentes

Pour le secteur public et certaines entreprises, oui, et les règles se renforcent en Europe. Vérifiez ce qui s'applique à votre activité.

Non. Ces widgets ne corrigent pas la structure de fond d'un site. Une bonne conception et un bon code font l'essentiel.

Naviguez avec Tab seul, zoomez à 200 %, vérifiez le contraste avec un outil gratuit et écoutez une page avec un lecteur d'écran.

Essayez sur votre propre projet

Décrivez ce que vous voulez avec vos mots et regardez votre site ou système se construire — puis modifiez-le en discutant.

Commencer gratuitement