Comment résoudre les problèmes d'accessibilité de votre site Web
Les personnes aveugles utilisent également Internet. Rendre votre site accessible à eux et 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.
Sommaire
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 en vertu de l’article 504 de la loi de 1973 sur la réadaptation, 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 visualiser les problèmes d’accessibilité est fournie par 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, car 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é tel que 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 lealt
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é CSStext-transform
au lieu de mettre en majuscule le texte lui-même.
text-transform: uppercase;Cela présente l'avantage supplémentaire d'être applicable à tous les titres et peut être facilement modifié si votre conception change à l'avenir.
Navigation au clavier
Votre site Web doit être accessible à l'aide de 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.

z-index
changer z-index
une fois focalisé, en utilisant le modificateur de sélection CSS :focus
:
.show-on-focus:focus { z-index: 1; top: 0; left: 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 nombre 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:
É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 for=""
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:
role
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 learia-hidden
attribut:
De plus, le
hidden
Attribut HTML et la directive CSS display: none
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.