Comment rendre votre site Web accessible?

Tout le monde n'accède pas au contenu Web en le lisant à partir de l'écran du navigateur Web. Certaines personnes utilisent des lecteurs d'écran pour lire le contenu à haute voix. Certaines personnes utilisent le mode lecteur de leur navigateur car elles ont besoin d'une conception cohérente qui ne leur pose pas de problème. Séparer correctement le contenu de la conception améliorera considérablement l'expérience utilisateur pour ces personnes.

1. 1
   Ajoutez un texte alternatif pour toutes les images pertinentes. Les seules exceptions sont les images qui ne sont que décoratives, qui ne sont pas nécessaires pour comprendre le site Web ou interagir avec son contenu. Le texte alternatif est du texte comme alternative à une image. Les lecteurs d'écran liront le texte alternatif au lieu de l'image.

   • Le texte alternatif doit être fonctionnel et non une description de l'image. Par exemple, le symbole doit avoir le texte alternatif "Rechercher", et non le texte alternatif "Loupe". Si l'image est utilisée sur un bouton, donnez-lui un texte alternatif de ce que fait le bouton, par exemple «Soumettre».
   • S'il y a du texte dans l'image, par exemple si l'image est un logo, le texte doit être inclus dans le texte alternatif.
   • Incluez le texte alternatif dans une image à l'aide de l' altattribut. Il est utilisé comme ceci:

     <img src = "ZXhhbXBsZS5wbmc =" alt = "Le texte alternatif appartient ici"> 

   • Si l'image est uniquement décorative, définissez le texte alternatif sur alt="".
2. 2
   Décrivez l'image ailleurs si elle est très complexe ou contient beaucoup d'informations. Par exemple, s'il s'agit d'un graphique ou d'un graphique, décrivez son contenu au-dessus ou en dessous de l'image. Faites référence à cela dans le texte alternatif, par exemple "Graphique du revenu médian des ménages en Europe de 2000 à 2017, comme décrit ci-dessous". Vous pouvez également créer un lien vers un document avec toutes les valeurs sous forme de texte ou de tableau.
3. 3
   Envisagez d'utiliser CSS uniquement pour les images décoratives. De cette façon, ces images disparaissent également si l'utilisateur désactive CSS.

   • Les images d'arrière-plan peuvent être incluses à l'aide de l' background-imageattribut CSS. Par example:

     html {image de fond: url ("exemple.png"); } 

4. 4
   Utilisez des balises sémantiques html5. HTML5 a ajouté de nombreuses balises sémantiques, c'est-à-dire des balises utilisées pour décrire le contenu. Ces balises permettent à des technologies comme un lecteur d'écran ou le mode lecteur de certains navigateurs de «comprendre» le contenu et de l'afficher de manière significative.

   • Si vous utilisez du texte en gras et en italique pour mettre l'accent, pas seulement pour le style, utilisez les <strong>et <em>. Ceci est également pris en charge dans les versions antérieures de HTML.
   • Utilisez <nav>pour les sections de navigation. Cela permet aux lecteurs d'écran et à d'autres technologies d'identifier ces sections et de décider de les afficher ou non.
   • À utiliser <article>pour le contenu principal d'une page Web qui est significatif en soi, sans les autres parties de la page. Par exemple, la <article>balise doit généralement être utilisée pour les entrées de blog, les articles de presse et les messages de forum.
5. 5
   Utilisez ARIA si nécessaire. Bien qu'il soit préférable d'utiliser les éléments HTML natifs, il n'y en a parfois aucun disponible pour vos besoins. Dans ce cas, vous pouvez utiliser ARIA (Accessible Rich Internet Applications).

   • Notez que vous ne devez pas modifier la sémantique des éléments HTML à moins que cela ne soit absolument nécessaire. </ref> Par exemple, ceci:

     <div role = "banner"> <h1> Ceci est une bannière avec un en-tête de premier niveau </h1> </div> 

     est préféré à ceci:

     <h1 role = "banner"> Ceci est une bannière avec un en-tête de premier niveau </h1> 

6. 6
   Définissez la langue du document et des parties qui sont différentes. Ceci est fait avec l' langattribut HTML. Il permet aux lecteurs d'écran de prononcer correctement les parties et la page, et aux navigateurs conventionnels de rendre le texte plus précis (par exemple pour basculer entre le sens d'écriture de droite à gauche et de gauche à droite).
7. 7
   Utilisez des éléments de formulaire pour les formulaires. Par exemple, pour créer un bouton, utilisez buttonou input, pas les éléments aou div. Les deux derniers s'appuient sur CSS et JavaScript pour agir comme un bouton, qui ne sont pas toujours disponibles. En outre, vous devez effectuer un travail supplémentaire pour qu'il se concentre correctement et informer le navigateur qu'il s'agit d'un bouton. Il est donc plus facile et plus accessible d'utiliser simplement l' élément buttonou input.
8. 8
   Étiquetez correctement les formulaires. Pour associer une étiquette à un contrôle de formulaire, utilisez <label>. Un lecteur d'écran lira cette étiquette lorsque l'utilisateur accède au contrôle de formulaire, tandis que le texte sans étiquette est généralement ignoré. Un exemple d'étiquetage approprié serait:

   <form action = "/ example_action.php"> <input type = "checkbox" id = "consent"> <label for = "consent"> J'accepte les termes et conditions. </label> <br> <input type = "submit" value = "Soumettre"> </form>