Un site que certains ne peuvent pas lire
L’accessibilité web consiste à faire une page que tout le monde peut utiliser, même sans voir l’écran ou sans souris. Un site mal fait ferme la porte à beaucoup de gens.
Une personne aveugle écoute la page lue par un logiciel, et une autre se sert seulement du clavier. Tu vas apprendre à vérifier qu’une page leur convient.
À la fin de cette leçon
Remarque
Je peux vérifier qu’une page web est utilisable par tout le monde.
Mots clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Accessibilité | le fait qu’une page soit utilisable par tout le monde | |
| Lecteur d’écran | un logiciel qui lit la page à voix haute | |
| Texte alternatif | le texte qui décrit une image pour ceux qui ne la voient pas | alt="Une baguette" |
| Titre | une ligne qui annonce une partie de la page, de h1 à h6 | |
| Contraste | la différence de couleur entre le texte et son fond | |
| Test | une vérification qui dit si la page respecte une règle |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une page pour tous, dès le départ
Les gens utilisent le web de mille façons : sans voir, sans entendre, sans souris, avec un petit écran ou en plein soleil. Une page accessible marche dans tous ces cas.
C’est plus simple de bien la faire dès le début que de la réparer ensuite. Et ces règles aident aussi les moteurs de recherche.
Exemple travaillé : qui est aidé par quoi
| Personne | Ce qui l’aide | Règle à respecter |
|---|---|---|
| Aveugle, avec un lecteur d’écran | Un texte qui décrit chaque image | Texte alternatif |
| Sans souris | Tout joignable avec la touche Tab | Page utilisable au clavier |
| Daltonien, ou en plein soleil | Un fort écart entre texte et fond | Contraste suffisant |
| Avec un petit écran | Un texte qui s’agrandit | Page qui s’adapte au zoom |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Chaque image utile a un texte alternatif
Un lecteur d’écran ne voit pas une image. Il lit son texte alternatif, écrit dans l’attribut alt.
Le texte dit ce que l’image montre ou ce qu’elle fait. Pour une image seulement décorative, on met alt="", et le lecteur la saute.
Exemple : une image avec et sans texte alternatif
<img src="baguette.jpg" alt="Une baguette croustillante">
<img src="motif.png" alt="">
<img src="croissant.jpg">Compte les images de la page d’accueil
curl -s http://web/ | grep -c "<img"Affiché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.
Les titres forment le plan de la page
Les titres vont de h1 à h6. Le h1 est le titre de la page, et il n’y en a qu’un. Les h2 sont les grandes parties, les h3 leurs sous-parties.
Un lecteur d’écran permet de sauter de titre en titre. On ne saute jamais un niveau, par exemple de h1 à h3.
Exemple travaillé : un plan de page
| Niveau | Texte | Bien ou mal ? |
|---|---|---|
| h1 | Brightside Bakery | Bien : un seul h1 |
| h2 | Nos pains | Bien : une partie |
| h3 | Le pain au levain | Bien : une sous-partie |
| h2 | Nos horaires | Bien : on remonte |
| h4 | Le dimanche | Mal : on saute le niveau h3 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Compte les titres h1 de la page d’accueil
curl -s http://web/ | grep -c "<h1>"Affiché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.
La langue et le titre comptent
Le lecteur d’écran choisit sa voix d’après l’attribut lang de la balise html. Sans lui, il peut lire du français avec un accent étranger.
La balise title donne le nom de la page dans l’onglet. Elle doit être claire, parce que c’est la première chose que le lecteur annonce.
Cherche l’attribut lang dans la page d’accueil
curl -s http://web/ | grep -c "lang="Affiché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 montrent ces trois Runs
La page du lab n’a aucune image : le premier Run écrit 0. Elle a un seul h1 : le deuxième écrit 1.
Le troisième Run écrit 0 : aucune ligne n’a d’attribut lang. grep -c compte les lignes qui contiennent le texte cherché.
On teste à la main et par script
Un script vérifie vite ce qui se compte : images sans alt, titres dans l’ordre, présence de lang. Mais il ne sait pas si un alt est utile.
Une personne vérifie le reste : la page se parcourt avec Tab, elle reste lisible à 200 % de zoom et son contraste est suffisant.
Exemple travaillé : une liste de vérification
| Vérification | Comment | Script ou personne |
|---|---|---|
| Chaque image a un alt | Compter les img sans alt | Script |
| Les titres sont dans l’ordre | Lire les niveaux de h1 à h6 | Script |
| La page se parcourt au clavier | Appuyer sur Tab | Personne |
| Le contraste est assez fort | Un rapport d’au moins 4,5 pour 1 | Les deux |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Une erreur fréquente
Attention
Beaucoup pensent qu’un outil automatique trouve toutes les fautes. Il en trouve environ la moitié. Un script voit qu’un alt existe, mais pas s’il décrit bien l’image : il faut aussi que quelqu’un essaie la page.
Pour aller plus loin : un alt trop vague
Ajoute alt_vague(images), qui renvoie les src dont le texte alternatif est "image" ou "photo".
Pourquoi ce texte est-il presque aussi inutile qu’un alt absent ? Écris la phrase qui le remplacerait pour une photo de croissant.