Comment bien construire une page HTML pour rendre son site accessible aux non voyants

Dans ce tutoriel, nous allons voir comment bien construire une page web pour les non voyants.

Le langage HTML semble simple et facile au premier coup d’oeil. Attention, le langage HTML est plus compliqué qu’on ne le pense, nous allons voir ça ensemble.

Nous verrons l’accessibilité pour les non voyants, ainsi que les bonnes pratiques à avoir pour ces derniers.

Commençons tout de suite avec la base d’une page HTML :

<!DOCTYPE html> <!-- sert a declarer le type de document -->
<html lang="fr"> <!-- balise HTML avec la langue utilise sur cette page -->
<head> <!-- balise HEAD, inclusion de css et balise meta ou title ici -->
    <meta charset="UTF-8"> <!-- type d'encodage pour les caracteres speciaux -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- cette balise sert au responsive -->
    <title>Document</title> <!-- titre de notre page web -->
</head>
<body> <!-- body, le corp de notre page -->
    
</body>
</html>

Nous avons notre bases, nous allons faire un formulaire avec des liens, et, des images. Commençons :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - Bien coder - Your Stories Blog</title>
</head>
<body>
    <form action="#" method="POST"> <!-- balise form en method POST -->
        <label for="name">Votre Nom :</label> <!-- Label , sert a dicter aux non voyants le champs sur lequel ils sont, ils peuvent etre ajoute sur chaque input -->
        <input type="text" name="name" id="name"><br>
        <label for="pass">Mot de passe</label>
        <input type="text" name="pass" id="pass"><br>
        <input type="submit" value="VALIDER">
    </form>
</body>
</html>

Nos formulaires sont maintenant accessible à tous.
Voyons comment rendre le reste du site accessible aussi.

Les images

Concernant les images, nous pouvons ajouter l’attribut ‘alt’ qui dictera la description de l’image :

<img src="./monimage.jpg" alt="Un chat joue avec une pelotte de laine"> <!-- la dictee lira cette description -->

Les liens

Les liens de la balise ‘a’ ont aussi leur attribut.

L’attribut aria-label :

<a href="#" aria-label="Rejoindre l'accueil" title="Accueil">Retourner  l'accueil</a> <!-- aria-label sera lu par la dictee, l'attribut title sert a fournir un libelle pour le lien, utile pour le SEO

L’attribut ‘title’ est souvent utilisé, sur pas mal d’élément, je vous laisse voir ça ici https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/title

N’hésitez pas à aller voir du côté de l’attribut ‘aria-label’ aussi : https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label

N’hésitez pas à laisser des commentaires , pour poser des questions ou autre 🙂

Nous pouvons en rester là pour le moment, dans un prochain tuto nous aborderons le SEO, ce qui complétera ce tuto ! 🙂

Au prochain tuto ! Bye 😀

By root

One thought on “Comment bien construire une page HTML pour rendre son site accessible aux non voyants”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.