Rendre le texte lisible
Renforcez le contraste du texte principal, renoncez aux polices trop petites et vérifiez que la page tient bon quand on zoome.
Guides
Guides pratiques
La plupart des améliorations d'accessibilité ne demandent pas de développeur. Il suffit de savoir ce qui gêne les gens et de pouvoir le vérifier sur sa propre page. Vous trouverez ici des guides pour les situations que rencontre presque tout petit site, du texte trop pâle au formulaire impossible à remplir sans souris.
Chaque étiquette de champ et chaque description d'image est une petite correction qui, pour quelqu'un, ouvre tout le site.
Comment lire cette rubrique : les guides restent généraux et ne dépendent d'aucun outil de création ni d'aucun système de gestion de contenu. Le nom des réglages varie d'un outil à l'autre, alors consultez la documentation du vôtre ; le principe des étapes, lui, reste le même.
Guides
Les chantiers par lesquels commencer quand votre site est déjà en ligne et que vous ne voulez pas tout refaire.
Décrire les images
Donnez à chaque image porteuse d'information une courte description et laissez vide le texte alternatif des images décoratives pour que le lecteur d'écran les ignore.
Décrire les photos (en russe)
Structurer les titres
Un seul titre principal par page, les sections au niveau inférieur, les sous-sections encore en dessous. On choisit un niveau de titre pour son sens, pas pour la taille des lettres.
Rétablir un focus visible
Si l'on ne voit pas où l'on se trouve en naviguant avec la touche Tab, rétablissez le contour de sélection ou rendez-le plus visible.
Sous-titrer vos vidéos
Commencez par les vidéos qui portent l'essentiel. Les sous-titres aident les personnes sourdes ou malentendantes, mais aussi toutes celles qui regardent sans le son.
Catalogue d'articles pour les lecteurs francophones
Cette rubrique accueillera peu à peu des articles originaux de Wpget, écrits spécialement pour la version française du guide.
Le catalogue est encore vide. Les nouveaux articles seront ajoutés ici au fur et à mesure.
Les sujets que nous prévoyons d'aborder
- Pourquoi « cliquez ici » ne suffit pas : rédiger des liens qui ont du sens hors contexte
- Le « facile à lire et à comprendre » : quand le proposer sur un petit site
- Rendre un menu déroulant utilisable entièrement au clavier
- Publier des documents téléchargeables lisibles par tous plutôt que des scans
Règles éditoriales
- Les articles de ce catalogue sont rédigés séparément pour chaque version linguistique et ne sont pas des traductions.
- Certains articles renvoient vers des sites tiers, y compris des services de jeux vidéo ; nous ne contrôlons ni leur contenu, ni leurs prix, ni leurs conditions.
- Nous ne réalisons pas de sites sur commande et ne publions ni publicité pour des agences, des hébergeurs ou des services, ni classements, ni prix, ni avis.
Comment concevoir un formulaire de contact clair
Ne gardez que les champs utiles
Demandez-vous sans quelle information vous ne pourriez vraiment pas répondre. Chaque champ superflu est une occasion de plus de se tromper et une raison de plus d'abandonner.
Étiquetez chaque champ
Chaque champ doit avoir une étiquette visible, associée à lui dans le code. Le texte gris affiché dans le champ ne compte pas comme étiquette : il disparaît pendant la saisie et la personne oublie ce qu'on lui demandait.
Signalez les champs obligatoires en toutes lettres
Écrivez « obligatoire » à côté de l'étiquette ou expliquez le symbole utilisé avant le formulaire. Une couleur ou une icône seule, sans explication, n'est pas comprise par tout le monde.
Exemple fictif : « Adresse e-mail (obligatoire) » est plus clair qu'un astérisque rouge dont le sens n'est expliqué nulle part.
Indiquez le format à l'avance
Si un champ attend une donnée sous une forme précise, dites-le dans l'étiquette ou juste en dessous, avant la saisie. Le mieux reste d'accepter plusieurs écritures plutôt que de faire deviner la bonne.
Rendez les erreurs compréhensibles
Un message d'erreur doit dire ce qui ne va pas et comment le corriger, et s'afficher près du champ concerné. Un simple cadre rouge sans texte n'explique rien à qui ne distingue pas les couleurs ou ne voit pas l'écran.
Testez le formulaire au clavier
Parcourez tous les champs avec la touche Tab, remplissez-les et envoyez le formulaire sans toucher à la souris. L'ordre de passage doit suivre l'ordre affiché à l'écran, et le focus doit rester visible en permanence.
Confirmez l'envoi
Après l'envoi, affichez un message clair indiquant que le message a bien été reçu et ce qui va se passer ensuite. Ne le faites pas disparaître au bout de quelques secondes : la personne peut avoir besoin de temps pour le lire.
À lire aussi
- Outils
Comment tester votre site vous-même : zoom du navigateur, clavier, mode de contraste élevé, lecteur d'écran intégré, vérification des couleurs et validateur de code.
- Comparatifs
Niveaux de conformité A, AA et AAA ; texte alternatif, légende et transcription ; sous-titres, transcription et langue des signes, présentés en tableaux comparatifs.
- Dépannage
Que faire si le focus est invisible, si le texte déborde au zoom, si un bouton n'a pas d'intitulé, si les erreurs de formulaire sont obscures ou si une vidéo n'a pas de sous-titres.
- Risques
Les pièges de l'accessibilité : captcha infranchissable, messages qui disparaissent, clignotements, délais trop courts, scans au lieu de texte et « surcouches » miracles.
- Glossaire
Le vocabulaire de l'accessibilité : WCAG, GOST R 52872-2019, contraste, texte alternatif, focus, lecteur d'écran, sous-titres et langage clair.
Sources
- W3C — recommandations WCAG 2.2
- GOST R 52872-2019
- Contenus éditoriaux du guide Wpget
Les informations sont présentées de manière générale à la date de rédaction. Les recommandations, les navigateurs et les habitudes des lecteurs évoluent peu à peu : en cas de doute, reportez-vous aux textes de référence, à savoir les recommandations WCAG et la norme russe GOST R 52872-2019 en vigueur.