10 outils pour améliorer l'accessibilité des sites Web
Il ne fait aucun doute que vous comprenez la nécessité pour votre site Web d'être accessible au plus grand nombre d'utilisateurs possible. Mais la lecture de toutes les directives et normes peut être un peu écrasante. Vous pouvez trouver les dernières recommandations du W3C ici, mais avez-vous besoin de connaître chaque mot et de suivre toutes les directives?
Aujourd'hui, nous allons essayer de rendre tout cela un peu plus facile avec des outils et des ressources pour vous aider à améliorer l'accessibilité du site Web (et peut-être même quelques vérifications pour considérer que ce n'était pas sur votre radar!).
Que vous cherchiez à vous assurer d'avoir un contraste visuel suffisant, un site accessible aux lecteurs d'écran ou même à créer des e-mails accessibles, nous avons ce qu'il vous faut!
1. Couleur sûre
Color Safe vous aide à vérifier (et même à créer) des palettes de couleurs accessibles en fonction des directives WCAG pour le contraste des couleurs du texte et de l'arrière-plan. L'outil et les normes utilisent une formule basée sur un rapport pour déterminer les combinaisons de couleurs qui peuvent être lues par tous.
Les directives WCAG recommandent un rapport de contraste de 4, 5 pour les petits textes (corps) et de 3 pour les gros textes (plus de 24 points).
Entrez simplement vos couleurs - basées sur le code HEX - le choix et la taille de la police et générez une palette. Vous obtenez un rapport immédiat à comparer et pouvez voir d'autres couleurs similaires. Vérifiez si quelque chose de similaire pourrait être une meilleure option en fonction de votre police et de votre taille.
2. NoCoffee
NoCoffee est une extension de navigateur Google Chrome qui vous aide à visualiser votre conception de la même manière qu'une personne malvoyante pourrait la voir. (Rien ne souligne l'importance de l'accessibilité comme le voir de cette manière.)
Il peut vérifier et afficher les éléments suivants:
- Faible acuité avec de petites cibles de texte ou de clic
- Problèmes de faible contraste avec les éléments de texte et d'arrière-plan
- Daltonisme
- Neige, reflets, images fantômes et cataractes
- Nystagmus, qui est un mouvement involontaire rapide des yeux
- Champs visuels obstrués
3. Contraste Checker
Contrast Checker vous permet d'entrer des couleurs d'arrière-plan et de premier plan à l'écran et d'obtenir des vérifications immédiates par rapport à plusieurs normes visuelles avec une réussite / échec instantané avec code couleur.
Les fonctionnalités intéressantes de l'outil incluent la possibilité de basculer entre les options de couleur et de niveaux de gris, de partager des échantillons de vos chèques et de tirer les couleurs des images. Vous pouvez également enregistrer un échantillon PDF. C'est un outil simple avec de nombreuses fonctionnalités que n'importe qui peut utiliser rapidement.
Il fournit également le rapport de couleur, comme indiqué dans les directives WCAG.
4. Tota11y
Tota11y est un fichier JavaScript qui place un petit bouton dans le coin inférieur des documents. Il se développe avec une barre d'outils qui comprend plusieurs plugins pour différents contrôles d'accessibilité.
- En-têtes et violations de l'ordre des en-têtes
- Contraste (ou absence de contraste)
- Lien texte manquant ou déroutant
- Étiquettes manquantes dans les entrées
- Images sans texte alternatif
- Les étiquettes sont des repères ARIA
- Lecteur d'écran "baguette" pour que vous puissiez "lire" le site comme le ferait un lecteur d'écran
5. ONDE
WAVE, ou outil d'évaluation de l'accessibilité du Web, est une solide collection de chèques en un seul endroit.
L'outil utilise une superposition visuelle d'icônes liées aux informations dans la barre latérale pour fournir des détails sur tout, du contraste des couleurs aux titres redondants en passant par les liens vers le HTML et les éléments structurels.
Le vérificateur gratuit vous donne presque tout ce que vous devez savoir sur une seule page, mais WAVE comprend également des outils payants au niveau de l'entreprise pour les propriétaires de sites multiples ou les utilisateurs qui souhaitent afficher plusieurs pages à la fois. Il comprend également des extensions de navigateur Chrome et Firefox qui peuvent vérifier les pages Web intranet, protégées par mot de passe, générées dynamiquement ou sensibles dans un environnement privé.
6. 508 Checker
Le vérificateur 508 teste les URL pour déterminer si un site Web satisfait aux directives de conformité 508 des États-Unis, qui est requise par la loi pour toute organisation recevant un financement fédéral.
Bien que cet outil soit gratuit, vous devez vous inscrire pour voir les résultats complets de l'analyse.
Le site comprend également d'autres outils et ressources, y compris un quiz pour aider les organisations à savoir si elles sont soumises à la conformité 508 et des ressources spécifiques pour l'enseignement supérieur, les organisations à but non lucratif et les organismes gouvernementaux.
7. HTML_CodeSniffer
HTML_CodeSniffer est un script côté client qui vérifie le code source et recherche les violations des normes définies. Il vérifie les directives d'accessibilité du contenu Web 2.0 et la section 508 des États-Unis.
Collez le code directement dans le site Web pour une vérification ou utilisez le bookmarklet.
Il est facile à utiliser et vous pouvez choisir le type d'informations à afficher - erreurs, avertissements ou avis et afficher un rapport détaillant toutes les préoccupations de la vérification.
8. Courriel accessible
Accessible Email est un vérificateur en ligne et un éditeur HTML qui vous aidera à améliorer le code d'une newsletter par e-mail avant de l'envoyer. (Vous pouvez également vérifier les campagnes passées / envoyées également.)
Avec autant de communication numérique et de génération de leads provenant du courrier électronique, cela ne devrait pas être l'un des éléments oubliés du site Web en termes d'accessibilité, mais c'est souvent le cas. Les mêmes règles d'accessibilité sur le Web s'appliquent également aux envois d'e-mails.
L'outil est gratuit et conçu pour promouvoir l'accessibilité et la convivialité du marketing par e-mail.
9. Amara
Amara est un outil pour créer des sous-titres et des sous-titres pour la vidéo.
Fournir un moyen de se connecter sans son ou dans une autre langue peut ouvrir vos éléments de conception à plus de personnes, en particulier si la vidéo est un élément clé de la conception.
Cet outil comprend des options gratuites et d'entreprise qui facilitent l'affichage de la langue à l'écran dans un format lisible qui fonctionne sur les sites Web et les plateformes de streaming vidéo comme YouTube.
10. MobiReady
MobiReady fournit un test d'accessibilité mobile dans un format visuel et avec un rapport de résultats afin que vous puissiez voir où votre site Web pourrait manquer sur le plus petit des appareils.
Vous pouvez comparer votre site à l'Alexa 1000, un classement des meilleurs sites Web au monde; obtenir des résultats techniques détaillés avec des recommandations et voir les rendus de votre site Web sur différents écrans, y compris les appareils de haut, moyen et bas niveau.
L'une des meilleures parties de ce test est qu'il est noté dans des dizaines de domaines et qu'il existe des suggestions d'amélioration en cas d'échec.
Conclusion
En ce qui concerne l'accessibilité du site Web, il est important de considérer la convivialité et la lisibilité pour tous les types d'utilisateurs. Pensez à la couleur, à la taille et à l'emplacement des éléments, des légendes et des sous-titres, au code HTML et à la structure appropriés, et même au courrier électronique afin de fournir la meilleure expérience possible au plus grand nombre de personnes possible.
Il est également important de vérifier les règles de conformité régionales ou nationales qui pourraient s'appliquer à vos projets, telles que les normes de conformité 508 mentionnées ci-dessus.
Et en cas de doute, il vaut mieux se tromper du côté de l'accessibilité. Vous pouvez modifier une couleur d'une palette ou augmenter la taille de la police afin que plus de personnes puissent comprendre facilement ce qui est à l'écran.
