Visible et lisible
Contraste, taille de police et zoom : pourquoi un texte gris pâle sur fond blanc pose problème même aux lecteurs qui ont une bonne vue.
un site pour tous : le guide de l'accessibilité
Wpget — rendre votre site agréable pour tous
Votre site est utilisé par des personnes très différentes : certaines agrandissent le texte, d'autres écoutent la page avec un lecteur d'écran, d'autres encore ne peuvent pas tenir une souris ou lisent sur leur téléphone en plein soleil. Ce guide explique ce qui gêne chacune d'elles et montre comment lever ces obstacles par vous-même : calmement, étape par étape et sans refonte coûteuse.
Un site accessible n'est pas une version à part pour des visiteurs particuliers : c'est la même page, simplement vérifiée par quelqu'un qui n'a oublié personne.
Par où commencer
Utilisable au clavier
Comment parcourir une page sans souris, où le focus doit rester visible et pourquoi aucun bouton ne doit fonctionner uniquement au clic.
Des formulaires clairs
Des champs étiquetés, des messages d'erreur explicites et un envoi sans devinette : c'est ce qui décide si l'on vous écrit ou si l'on s'en va.
Vidéo et audio
Sous-titres, transcription et langue des signes : ce qui les distingue et par où il est raisonnable de commencer pour un petit site.
Rubriques du guide
- Guides
Des guides pas à pas pour rendre le texte lisible, la page compréhensible grâce aux titres et le formulaire de contact pratique pour tous. Avec le catalogue des articles.
- 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.
- Questions
Réponses aux questions fréquentes sur le guide, les textes et les images, les formulaires, les vidéos et la façon de tester l'accessibilité de votre site sans spécialiste.
Testez votre site en cinq étapes
Parcourez la page avec la touche Tab
Lâchez la souris et appuyez sur la touche de tabulation pour aller du début à la fin de la page. Vous devez toujours voir quel élément est sélectionné et atteindre tous les liens, boutons et champs dans un ordre logique.
Doublez le zoom
Agrandissez la page deux fois dans le navigateur et faites-la défiler. Le texte ne doit ni être coupé ni chevaucher les blocs voisins, et le menu comme les boutons doivent rester en place et fonctionner.
Vérifiez le contraste
Comparez la couleur du texte principal à celle du fond avec n'importe quel outil de vérification du contraste. Au niveau AA, il faut au moins 4,5:1 pour un texte normal et 3:1 pour un texte de grande taille.
Regardez les titres
Notez les titres de la page dans l'ordre, comme une table des matières. Si cette liste suffit à comprendre le sujet de la page et où se trouve chaque chose, la structure est bonne ; s'il n'y a pas de titres ou s'ils ont été choisis pour la taille de police, mieux vaut la reprendre.
Contrôlez les étiquettes des champs
Cliquez sur l'étiquette de chaque champ : si elle est correctement associée, le curseur se place dans le champ. Vérifiez aussi que les étiquettes restent visibles en permanence et ne disparaissent pas dès que l'on commence à taper.
L'essentiel en bref
Créez-vous des sites ou réalisez-vous des audits payants ?
Non. Wpget est un guide. Nous ne créons pas de sites, ne vendons pas d'hébergement, ne prenons aucune commande et ne représentons aucune agence. Vous trouverez ici uniquement des explications pour vérifier et corriger votre site par vous-même.
Mon site est-il obligé de respecter une norme d'accessibilité ?
Cela dépend de qui le publie et de sa finalité, et nous ne donnons pas de conseil juridique. Si la question est importante pour vous, renseignez-vous auprès d'un juriste. Quelle que soit la réponse, un site accessible est plus agréable pour tous les visiteurs.
Peut-on ajouter une « version malvoyants » et ne plus y penser ?
Non. Un bouton qui agrandit la police ne corrige pas le site principal : les champs n'ont toujours pas d'étiquettes, les images pas de descriptions, et le clavier ne fonctionne pas mieux. C'est la page vue par tous qui doit être accessible.
Combien coûte la mise en accessibilité d'un site ?
Pour être honnête, beaucoup de choses demandent de l'attention plutôt que de l'argent. Décrire les images, structurer les titres, étiqueter les champs et renforcer le contraste, vous pouvez le faire vous-même. Les gros chantiers concernent surtout les sites où l'accessibilité a longtemps été oubliée.
À propos
Wpget est un guide indépendant. Il n'a aucun lien avec l'ancien site de ce domaine, dont les contenus ne sont ni conservés ni repris.
Nous écrivons pour les propriétaires et les rédacteurs de petits sites qui veulent que leurs pages puissent être utilisées par tous. Vous ne trouverez ici ni logiciels, ni outils de création de sites, ni entreprises : seulement des principes et des vérifications valables pour n'importe quel site.
À lire aussi
- Guides
Des guides pas à pas pour rendre le texte lisible, la page compréhensible grâce aux titres et le formulaire de contact pratique pour tous. Avec le catalogue des articles.
- 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.
- 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.