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.

Questions fréquentes

Ma page est-elle accessible ?

Entrez l'adresse de la page : l'outil lit son HTML et signale, un par un, les obstacles que rencontrent les personnes qui utilisent un lecteur d'écran, le clavier ou un écran agrandi. Vous obtenez une note de A à F.

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 indique que les bases visibles dans le code sont en place. Le reste demande un essai humain, au clavier et avec un lecteur d'écran.

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

Les vraies couleurs viennent des feuilles de style, des images et des scripts. Seul un navigateur les connaît toutes. L'outil mesure les couleurs écrites directement dans la page. Pour le reste, testez vos paires avec l'outil de contraste.

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

Elle doit en avoir un vide, alt="", qui dit aux lecteurs d'écran de l'ignorer. Ce qui pose problème, c'est l'absence totale de l'attribut alt, que l'outil signale.