Les personnes aveugles utilisent également Internet. Rendre votre site accessible à eux – ainsi qu'aux autres personnes handicapées – améliorera leur expérience avec votre entreprise. De plus, si vous êtes un entrepreneur du gouvernement, cela peut vous être exigé par la loi.
Qu'est-ce que l'article 508?
L'article 508 est une loi fédérale qui oblige les sites Web fédéraux à être accessibles, à peu près de la même manière que les bâtiments sont conçus avec des rampes pour fauteuils roulants et des portes automatiques. Les sites Web gouvernementaux doivent être facilement visibles par les lecteurs d'écran et fournir d'autres outils d'accessibilité. L'article 508 est spécifiquement pour .gov sites Web, mais si vous recevez une forme quelconque d'argent du gouvernement, votre site Web doit également être accessible sous Article 504 de la loi de 1973 sur la réhabilitation, ou vous pouvez être poursuivi et condamné à une amende.
Si vous êtes entièrement dans le secteur privé, vous ne légalement doivent se conformer à la section 508/504. Mais vous devez toujours concevoir votre site Web en gardant à l'esprit les personnes handicapées. Souvent, ces personnes accèdent à votre site Web à l'aide d'un appareil de lecture d'écran, qui leur lira votre site Web. Faire en sorte que votre site Web se comporte comme prévu via un lecteur d'écran est un élément clé de la conformité en matière d'accessibilité.
Comment vérifier l'accessibilité de votre site Web
Une excellente boîte à outils pour afficher les problèmes d'accessibilité est tota11y de Khan Academy. C'est un plugin que vous installez sur votre site Web en ajoutant un tag avec un lien vers celui-ci; c'est quelque chose que vous voudrez faire avec une version de développement de votre site Web, sinon il afficherait le bouton à tout le monde.
Ce plugin affichera les erreurs à côté des éléments correspondants, puis vous dira quoi faire pour les corriger:
Il dispose également d'un outil très pratique qui vous montre comment un lecteur d'écran affichera votre site Web.
De plus, vous pouvez exécuter l'intégralité de votre site via un vérificateur d'accessibilité comme PowerMapper, qui vérifie la conformité WCAG 2.0.
Problèmes d'accessibilité courants (et comment les résoudre)
Rendre votre site accessible ne vous oblige pas à tout repenser, il suffit d'écraser quelques bugs que vous avez peut-être manqués lors de sa création. Habituellement, ces problèmes sont mineurs et impliquent simplement d'ajouter quelques éléments supplémentaires.
Texte alternatif
Le texte alternatif sur les images est un problème majeur. Le texte est facile à gérer pour un lecteur d'écran, mais les images ne peuvent pas être facilement traduites automatiquement. Vous devez donc fournir une traduction, même si elle est courte et simple. Cela peut être fait en ajoutant le alt marque:
Sinon, un lecteur d'écran lira le nom du fichier. Cependant, si l'image est décorative et que vous souhaitez que le lecteur d'écran l'ignore, vous pouvez spécifier un alt balise mais laissez le contenu vide.
Lettres majuscules
Les majuscules peuvent créer une certaine confusion pour les lecteurs d'écran. Par exemple, le mot «nous» est souvent lu comme «États-Unis» lorsqu'il est capitalisé. Pour résoudre ce problème, optez plutôt pour l'utilisation de la propriété CSS transformation de texte au lieu de mettre en majuscule le texte lui-même.
text-transform: majuscule;
Cela présente l'avantage supplémentaire d'être applicable à toutes les en-têtes et peut être facilement modifié si votre conception change à l'avenir.
Votre site Web doit être accessible en utilisant la touche de tabulation pour parcourir les éléments. Les liens «Ignorer la navigation» constituent une partie importante de ceci. Les sites Web ont souvent des en-têtes sur chaque page, et les parcourir est très frustrant lors de la navigation. Ainsi, la première chose qu'un utilisateur naviguant avec le clavier devrait voir est un tag avec un href à votre contenu principal.
De toute évidence, vous ne voulez pas que cela figure tout le temps dans votre en-tête, uniquement lorsque quelqu'un le survole. Cela se fait généralement en définissant un élément avec un faible index z changer index z une fois focalisé, en utilisant le modificateur de sélection CSS :concentrer:
.show-on-focus: focus {
indice z: 1;
haut: 0;
gauche: 0;
}
Un autre problème est le manque d'éléments tabables. Les principaux points de repère de votre site devraient être faciles à parcourir. Vous pouvez le faire simplement en ajoutant le tabindex attribut aux éléments:
...
Vous pouvez avoir plusieurs index sur le même numéro, et ils seront lus dans l'ordre décroissant, en fonction de leur position dans le HTML. Vous pouvez modifier le numéro pour tenir compte des blocs en désordre.
Contraste
Il ne s’agit pas simplement d’un conseil d’accessibilité, car il s’applique à votre site en général. Si le contraste est trop faible, les personnes ayant une déficience visuelle peuvent avoir du mal à le voir, mais cela peut également affecter les personnes normales si le problème est grave.
Heureusement, tota11y fait un excellent travail en vous indiquant quels éléments posent des problèmes:
Il suggérera même des couleurs de remplacement qui peuvent améliorer votre contraste. Notez que le contraste dépend également de la taille, car un texte plus petit est plus difficile à distinguer sur des arrière-plans de couleur similaire.
Étiquettes d'entrée
Tout la balise doit avoir un correspondant tag, afin que le lecteur d'écran sache à quoi sert l'entrée. Il peut parfois s'appuyer sur du texte d'espace réservé, mais cela ne suffit pas.
le La balise est placée directement au-dessus de l'entrée, et y est liée par un pour = "" attribut contenant l'ID de l'entrée.
Monuments ARIA
Celles-ci sont faciles à ajouter et classent les régions de votre site en blocs:
Vous pouvez les ajouter simplement en ajoutant un rôle attribuer à votre div Mots clés:
Rendre les éléments invisibles aux lecteurs d'écran
Si quelque chose gêne un lecteur d'écran mais doit être sur votre site, vous pouvez le supprimer avec le aria caché attribut:
De plus, le caché Attribut HTML et la directive CSS affichage: aucun rendra tous les deux un élément invisible pour les lecteurs d'écran. Vous voudrez vous assurer que le lecteur d'écran ne lit pas le code HTML à partir d'endroits qu'il ne devrait pas pouvoir voir.