Certains outils logiciels permettent de vérifier plus ou moins automatiquement certains critères d’accessibilité. Il faut noter que seulement 20 % environ des tests de conformité sont automatisables. Certains outils d’aide à la vérification sont répertoriés à cette adresse : La plupart de ces outils sont recensés à cette adresse : https://accessibilite.numerique.gouv.fr/ressources/methodologie-de-test/
Autres ressources :
Une initiative très intéressante d’entreprises privées avec notamment des notices bien faites : https://www.accede-web.com/
Outil en ligne d’aide à la détection de problèmes d’accessibilité : https://wave.webaim.org/
La barre d’outils « web developer » : https://chrispederick.com/work/web-developer/
Analyseur de contraste en ligne : https://contrast-finder.tanaguru.com/form.html
Le logiciel https://www.tpgi.com/color-contrast-checker/ et https://www.tpgi.com/free-accessibility-testing-tools/
Navigation avec le clavier
L’ « outline » est le liseré visible autour des éléments d’une page HTML recevant le focus comme un lien ou un élément de formulaire. Ce liseré est très important pour les internautes qui naviguent avec le clavier : le liseré leur signale visuellement quel est l’élément actif.
La touche « Entrée » remplace le clic (pour suivre un lien par exemple) et la touche « tabulation » permet de donner le focus à l’élément suivant (ou précédent en utilisant la combinaison « Maj » + « Tab »).
Un premier test consiste à vérifier que ce repère est bien visible (critère 10.7 du RGAA). Un souci esthétique pousse souvent les développeurs ou webmestres à insérer dans la feuille de style la déclaration « outline-style : none » ou « outline-width : 0 », ce qui a pour effet de rendre invisible le liseré entourant l’élément ayant le focus.
Un second test consiste à vérifier que tous les éléments de type « lien » ou « élément de formulaire » reçoivent le focus en parcourant l’ensemble de la page à l’aide de la touche « Tab ».
Il faut vérifier également que tous ces éléments reçoivent le focus dans un ordre logique et cohérent et que parmi ces éléments, ceux qui sont susceptibles d’être « activés », comme un lien ou un bouton de validation par exemple, peuvent effectivement l’être avec la touche « Entrée ». Pour un bouton radio ou une case à cocher, la touche appropriée est la barre d’espace alors que ce sont les touches de direction qui, normalement, permettent de choisir un(e) autre bouton ou case.
Soyez vigilant sur :
- Les menus déroulants. La prise de focus doit être équivalente au survol de la souris , c’est à dire dérouler le menu pour pouvoir accéder au items de sous-menu (critère 7.3 du RGAA).
- Les carrousels ou autres éléments multimédia doivent être contrôlables au clavier (critère 4.20 du RGAA). Il faut vérifier également que ces éléments peuvent être quittés avec le clavier (critère 12.14 du RGAA).
- Les fenêtre modales. Le focus doit rester au sein de cette fenêtre jusqu’à ce que cette fenêtre soit fermée. Le focus doit alors être repositionné sur l’élément qui a permis l’ouverture de la fenêtre modale.
Les images
Chaque image doit avoir une alternative textuelle (critère 1.1 du RGAA) qui sera restituée par les technologies d’assistance comme un lecteur d’écran par exemple. Ce texte sera également pris en compte par les moteurs de référencement.
Il faut vérifier la présence de l’attribut « alt ». En cas d’absence, un lecteur d’écran restituera le contenu de l’attribut « src » qui sera généralement non pertinent.
Si l’image est purement décorative, l’attribut « alt » devra être vide, alt= » » (criète 1.2 du RGAA).
Si l’image est un contenu, l’attribut « alt » devra contenir une description pertinente de l’image (critère 1.3 du RGAA).
La Web Developer Toolbar de FireFox possède certaines options permettant de simplifier les vérifications ci-dessus.
Le titre de page
Le titre d’une page doit se trouver dans la balise « title » et être pertinent (critères 8.5 et 8.6 du RGAA).
Deux pages différentes d’un site doivent avoir deux titres différents, y compris pour les contenus « paginés » (exemple : succession de pages d’un processus d’achat, d’un tutoriel…).
Les titres
Chaque page doit être structurée à l’aide de titres : balises « h1 » à « h6 » (critère 9.1 du RGAA). Cette structuration doit être cohérente (critère 9.2 du RGAA) : pas de titre « h2 » sans titre « h1 » par exemple.
La Web Developer Toolbar de FireFox possède également des options facilitant le contrôle, en particulier le menu « infos / Plan du document ».
Avec HTML5, la structuration en titre a évolué et prévoie une hiérarchie de titre autonome pour différentes sections d’une même page. Mais pour l’instant, les technologies d’assistance ne peuvent pas prendre en compte ce changement. Il est donc vivement recommandé d’utiliser les différents niveaux de titres avec une vue globale de la page.
Tous les critères du RGAA
La page https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/ détaille, pour chaque critère, la méthodologie à employer (cliquer sur le signe + à droite d’un critère pour obtenir le détail du test à réaliser).