Enfin j’ai pris le temps de m’intéresser à  l’accessibilité. En cherchant sur le net les définitions et des exemples de méthodologie pour réaliser des tests d’accessibilité, je suis tombée sur les billets de Roger Johansson sur Pompage.net. Ces explications et son approche m’ont été d’une grande utilité pour comprendre l’importance de l’accessibilité. Je me suis permise de faire une synthèse de ces 3 billets afin de pouvoir faire un test rudimentaire sur mes prochains Ergotest. « Test rudimentaire » ? Oui, car vu l’étendu, l’évolution et les différentes approches de l’accessibilité… Cela est impossible pour ma part de m’y consacrer à  plein temps.

« Mettre le Web et ses services à  la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. » Tim Berners-Lee directeur du W3C.

1. Validation de la structure

• CSS et (X)HTML : L’utilisation du CSS et du (X)HTML permet de séparer la structure du contenu. Cela permet d’avoir une rigueur et une sémantique utilisant des balises qui facilitent l’accessibilité du site web. Un code valide W3C est important pour assurer un site aux standards mais cela ne signifie pas pour autant son accessibilité à  certaines déficiences visuelles. Toutefois, le premier pas est déjà  là  !
• Eviter les frames (cadres) : L’utilisation des frames fait perdre toute signification et hiérarchisation visuelle du contenu d’un site web. D’un point de vue d’utilisabilité, les frames sont inefficaces et risque de contraindre certain utilisateur lambda. Je vous invite à  lire le billet « Pour en finir avec les cadres » de Denis Boudreau sur OpenWeb qui explique davantage ce problème.
• Utiliser les tableaux : Les tableaux ne doivent pas être utilisés comme élément de mise en page. Leur principale fonction est d’afficher des données tabulaires. Le W3C déconseille l’utilisation de table pour les mises en pages mais ne l’interdit pas forcément : une page construite d’un tableau peut-être valide en XHTML Strict.

• Comment faire ? L’extension Web Developer pour Firefox permet de valider le CSS, le (X)HTML, de rendre visible les frames ou les tableaux. Sinon pour la validation du CSS et (X)HTML il y a validator.w3.org et jigsaw.w3.org/css-validator

2. Vérifier la sémantique du code

• Désactiver les CSS : La sémantique est très importante. Elle permet de présenter le contenu selon sa priorité dans la page. Pour que cette page soit accessible, elle doit être hiérarchisée, cohérente et avoir une structure lisible. Les moteurs de recherche facilite leur indexation grâce aux balises sémantique. Une des méthodes rudimentaires pour vérifier la sémantique est la désactivation du CSS d’un site. Si la lecture de la page est cohérente alors les balises de type titre (h1 à  h6), listes (ul, li…), etc. sont utilisées correctement.

• Comment faire ? Désactiver le CSS grâce à  l’extension Web Developer pour Firefox.

3. Image, texte et contraste

• Images et texte alternatif : Le texte alternatif contenu dans l’attribut alt (obligatoire pour les balise img et area) sert à  renseigner l’utilisateur sur le contenu de l’image lorsqu’elle ne s’affiche pas. Cet attribut se doit d’être rempli correctement et le plus logiquement possible par rapport à  son contenu respectif.
• Augmenter la taille du texte : La taille du texte doit toujours être spécifiée dans l’unité « em » ou en « % ». Cela permet un texte redimensionnable avec tous les navigateurs. Si l’unité est mentionnée en pixel, les utilisateurs d’Internet Explorer sur Windows devront se servir des préférences de l’application pour modifier la taille du texte.
• Le contraste des couleurs : Si le contraste des couleurs entre le texte et son arrière-plan n’est pas assez tranché, les utilisateurs auront des difficultées à  lire le contenu.

• Comment faire ? Pour effectuer des tests sur les couleurs et contrastes, vous pouvez utiliser : Color Contrast Check, qui vérifie les couleurs du premier plan et d’arrière-plan. Il existe aussi une extension Firefox « Color Contrast Analyser« . Sinon, il y a aussi Graybit.com, qui bascule une page HTML en niveau de gris.

P.S: A lire aussi « 36 critères d’accessibilité qui comptent pour le référencement » de Sébastien Billard.