Qu'est-ce que l'accessibilité d'une page ?
Une page est accessible quand des personnes aux besoins très différents peuvent s'en servir : vue faible, lecteur d'écran, clavier seul, petit écran de téléphone. C'est un défaut de conception, pas un détail pour quelques personnes.
Vous allez contrôler une page avec quatre vérifications et calculer vous-même le rapport de contraste d'un texte.
À la fin de cette leçon
Remarque
Je peux vérifier qu'une page fonctionne pour des personnes aux besoins différents.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Accessibilité | le fait qu'une page serve aussi à des personnes aux besoins différents | |
| Contraste | l'écart de clarté entre le texte et le fond | |
| Texte alternatif | des mots qui remplacent une image quand on ne peut pas la voir | alt |
| Étiquette | le nom lisible d'une case à remplir | |
| Focus | l'élément choisi au clavier, souvent entouré d'un cadre | |
| Lecteur d'écran | un logiciel qui lit la page à voix haute |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Des besoins différents, une même page
Une personne à la vue faible agrandit le texte et a besoin de couleurs bien contrastées. Une personne aveugle écoute la page avec un lecteur d'écran. D'autres n'utilisent que le clavier, ou une seule main sur un téléphone.
Ces besoins peuvent aussi être provisoires : une main blessée, un écran au soleil.
Le rapport de contraste mesure la lisibilité
Le rapport de contraste compare la clarté du texte à celle du fond. Il va de 1, deux couleurs identiques, à 21, du noir sur du blanc.
La règle usuelle demande au moins 4,5 pour un texte courant. Dessous, la lecture fatigue, surtout pour une vue faible. Le gris clair sur blanc est le piège classique.
Exemple : trois couleurs sur fond blanc
| Couleur du texte | Rapport | Verdict |
|---|---|---|
| Noir, #000000 | 21 | Suffisant |
| Gris moyen, #999999 | 2,85 | Trop faible |
| Gris foncé, #222222 | 15,91 | Suffisant |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Comment le rapport se calcule
Chaque couleur a une luminance, un nombre de 0 à 1 qui dit sa clarté. Le rapport est la luminance de la couleur claire plus 0,05, divisée par celle de la sombre plus 0,05.
Pour le gris #999999, la luminance vaut 0,3185 et celle du blanc 1. Le rapport est donc 1,05 divisé par 0,3685, soit 2,85. Vous l'écrirez en Python dans le devoir.
Quatre autres vérifications simples
Chaque image qui porte un sens a un texte alternatif. Chaque case d'un formulaire a une étiquette visible, qui reste quand on tape. Un lien dit où il mène : « read more » ne le dit pas.
Enfin, le cadre du focus doit rester visible, car la personne qui utilise la touche Tab s'en sert pour savoir où elle est.
Un défaut, qui il gêne, sa correction
| Défaut | Qui est gêné | Correction |
|---|---|---|
| Image sans texte alternatif | Une personne qui écoute la page | Ajouter alt avec une courte description |
| Case sans étiquette | Une personne qui écoute, ou qui se trompe de case | Ajouter une étiquette liée à la case |
| Lien « cliquez ici » | Une personne qui parcourt les liens | Écrire ce que le lien ouvre |
| Cadre de focus supprimé | Une personne au clavier | Ne pas retirer le cadre |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une erreur fréquente
Attention
Beaucoup pensent que l'accessibilité ne concerne qu'une petite minorité. Elle sert aussi à la personne qui lit au soleil, qui a une main prise ou qui vieillit. Un bon contraste et un clavier utilisable aident tout le monde.
Deux scripts contrôlent la boutique
Le laboratoire a deux scripts de contrôle. Le premier calcule le contraste de chaque couleur de la feuille de style. Le second compte les défauts de la boutique.
Ils affichent des mots anglais : ratio, too low (trop faible), enough (suffisant), images without alt text (images sans texte alternatif). Ils ne corrigent rien.
Calculer les contrastes de la feuille de style
docker exec jupyter python3 steps/contrast.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Ce que le script de contraste affiche
| Règle de style | Rapport | Mot affiché |
|---|---|---|
| body, texte courant | 2,85 | too low |
| h1, titre | 15,91 | enough |
| a, liens | 1,89 | too low |
| .error, message d'erreur | 2,05 | too low |
| .buy, bouton | 1,59 | too low |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Compter les défauts des deux pages
docker exec jupyter python3 steps/audit.pyAffichée ici, non exécutée. Créez un compte gratuit pour appuyer sur Exécuter et la saisir dans le terminal de votre propre labo.
Ce que le contrôle a trouvé
Sur la page d'accueil, 3 images sur 4 n'ont pas de texte alternatif et 5 liens sur 6 disent seulement « click here » ou « read more ». Sur la page de paiement, 3 cases sur 4 n'ont pas d'étiquette et le message d'erreur est un simple code.
La feuille de style retire une fois le cadre du focus. Le script ne dit pas ce qu'il faut faire : c'est votre rôle.
À vous : compter les images sans alt
# Ajoutez une image sans alt dans le texte, puis relancez.
page = '<img src="a.png" alt="Logo"> <img src="b.png"> <img src="c.png" alt="">'
morceaux = page.split("<img")
sans_alt = 0
for morceau in morceaux[1:]:
balise = morceau.split(">")[0]
if 'alt="' not in balise or 'alt=""' in balise:
sans_alt = sans_alt + 1
print("images sans texte alternatif :", sans_alt)