Outil gratuit

Accessibilité d'une page

Les personnes qui naviguent avec un lecteur d'écran, au clavier ou avec un écran agrandi butent toujours sur les mêmes obstacles. Nous lisons votre page et vous les montrons, un par un.

Essayer avec physalisdesign.com, quebec.ca

Pour qui, au juste ?

Environ une personne sur cinq vit avec une incapacité, et bien plus en vivent une passagère : un bras dans le plâtre, des yeux fatigués, un téléphone en plein soleil. Un site accessible, c'est tout simplement un site qui fonctionne pour plus de monde.

01

Lecteur d'écran

Les personnes aveugles ou malvoyantes écoutent la page. Il leur faut des textes alternatifs, des étiquettes, des titres et des liens qui disent où ils mènent.

02

Clavier seulement

Les personnes qui ne peuvent pas utiliser une souris avancent avec la touche Tab. Chaque bouton doit être atteignable, dans un ordre logique, et bien visible quand il a le focus.

03

Zoom et contraste

Beaucoup de gens grossissent le texte ou peinent à lire du gris pâle sur blanc. La page doit rester lisible à 200 % et garder assez de contraste.

Tester vous-même en cinq minutes

  1. Rangez la souris. Appuyez sur Tab plusieurs fois : voyez-vous toujours où vous êtes, et atteignez-vous le menu, les formulaires et chaque bouton ?
  2. Zoomez à 200 %. Ctrl et + (Cmd et + sur Mac) : le texte reste-t-il lisible sans défiler de côté ?
  3. Écoutez-la. NVDA est gratuit sur Windows ; VoiceOver est intégré aux Mac et aux iPhone. Écoutez votre page d'accueil deux minutes.
  4. Remplissez votre formulaire de contact avec le lecteur d'écran : chaque champ dit-il ce qu'il attend ?

Questions fréquentes

Une bonne note veut-elle dire que mon site est accessible ?

Non. Une vérification automatique repère environ le tiers des problèmes. Une bonne note veut dire que les bases visibles dans le code sont en place ; l'essai humain ci-dessus couvre le reste.

Pourquoi le contraste n'est-il vérifié qu'en partie ?

Les couleurs réelles viennent des feuilles de style, des images et des scripts, et seul un navigateur les connaît toutes. Nous mesurons les couleurs écrites directement dans la page ; pour le reste, testez vos paires avec l'outil Contraste des couleurs.

Une image décorative doit-elle avoir un texte alternatif ?

Un texte alternatif vide : alt="". Il dit au lecteur d'écran de l'ignorer. Ce qui pose problème, c'est l'absence complète de l'attribut alt.