Bookmarklets d'accessibilité : outils de test gratuits et immédiats

Les bookmarklets sont de petits scripts JavaScript que vous sauvegardez comme favoris dans votre navigateur. Un simple clic les exécute sur la page courante, révélant instantanément des informations sur l'accessibilité. Gratuits, sans installation, ils constituent un complément précieux aux outils d'audit professionnels.

Qu'est-ce qu'un bookmarklet

Un bookmarklet est un lien de favori contenant du code JavaScript au lieu d'une URL. Lorsque vous cliquez dessus, le script s'exécute dans le contexte de la page actuelle, modifiant temporairement son affichage pour révéler des informations cachées.

Avantages des bookmarklets

• Zéro installation : pas de logiciel à télécharger, pas de droits administrateur nécessaires
• Portabilité : fonctionnent sur n'importe quel navigateur moderne
• Immédiat : résultats visibles en un clic
• Gratuit : la plupart sont open source et librement accessibles
• Pédagogique : visualisent concrètement les concepts d'accessibilité

Limites à connaître

Les bookmarklets ne remplacent pas un audit complet. Ils ne détectent qu'une partie des problèmes et nécessitent une interprétation humaine. Utilisez-les comme première étape ou pour des vérifications ponctuelles.

Installation d'un bookmarklet

Méthode classique

1. Affichez la barre de favoris de votre navigateur
2. Faites glisser le lien du bookmarklet vers cette barre
3. Ou cliquez droit sur le lien et sélectionnez "Ajouter aux favoris"

Méthode manuelle

Si le glisser-déposer ne fonctionne pas :

1. Créez un nouveau favori manuellement
2. Donnez-lui un nom descriptif
3. Collez le code JavaScript dans le champ URL

[!TIP] Organisez vos bookmarklets dans un dossier dédié nommé "A11y" ou "Accessibilité" pour les retrouver facilement.

Bookmarklets essentiels

1. Titres (Headings)

Affiche la structure des titres de la page en superposition colorée.

Utilité : vérifier la hiérarchie h1-h6 sans sauts de niveau (WCAG 1.3.1, RGAA 9.1)

Ce qu'il révèle :

• Présence d'un h1 unique
• Ordre logique des titres
• Titres manquants dans la structure

2. Landmarks (Régions)

Met en évidence les landmarks HTML5 et ARIA (main, nav, header, footer, aside).

Utilité : vérifier la structure sémantique de la page (WCAG 1.3.1, RGAA 9.2)

Ce qu'il révèle :

• Présence du main obligatoire
• Navigation correctement balisée
• Régions complémentaires identifiées

3. Labels de formulaires

Affiche les associations entre champs et labels.

Utilité : vérifier que tous les champs ont des labels associés (WCAG 1.3.1, RGAA 11.1)

Ce qu'il révèle :

• Champs sans label
• Labels non associés programmatiquement
• Placeholders utilisés à la place des labels

4. Ordre de focus

Numérote les éléments focusables dans leur ordre de tabulation.

Utilité : vérifier l'ordre de navigation clavier (WCAG 2.4.3, RGAA 12.8)

Ce qu'il révèle :

• Ordre logique ou non de la tabulation
• Éléments focusables inattendus
• Tabindex positifs à éviter

5. Alternatives textuelles

Affiche les attributs alt de toutes les images.

Utilité : vérifier la présence et pertinence des textes alternatifs (WCAG 1.1.1, RGAA 1.1)

Ce qu'il révèle :

• Images sans alt
• Alt vides (décoratives)
• Alt trop génériques ou inadéquats

[!NOTE] Un alt vide (alt="") est correct pour les images décoratives. Un alt absent est toujours une erreur.

6. Liens externes et nouvelles fenêtres

Identifie les liens avec target="_blank".

Utilité : vérifier que l'ouverture en nouvelle fenêtre est signalée (WCAG 3.2.5)

Ce qu'il révèle :

• Liens ouvrant de nouvelles fenêtres
• Présence ou absence d'avertissement

7. Contraste 44x44

Affiche un curseur de 44x44 pixels pour vérifier les tailles de cible.

Utilité : vérifier la taille minimale des zones cliquables (WCAG 2.5.5)

Ce qu'il révèle :

• Boutons trop petits
• Liens trop proches les uns des autres
• Zones d'interaction insuffisantes

8. ANDI

Outil complet du gouvernement américain qui analyse de nombreux aspects.

Utilité : détection automatisée multi-critères

Ce qu'il révèle :

• Ce qu'un lecteur d'écran annoncerait
• Problèmes de structure
• Rôles ARIA et leur utilisation

9. Tableaux

Met en évidence la structure des tableaux (en-têtes, cellules, scope).

Utilité : vérifier l'accessibilité des tableaux de données (WCAG 1.3.1, RGAA 5.6-5.8)

Ce qu'il révèle :

• Tableaux de mise en page vs tableaux de données
• En-têtes de ligne et colonne
• Attributs scope et headers

10. Focus visible

Force l'affichage du focus sur tous les éléments focusables.

Utilité : vérifier la visibilité du focus (WCAG 2.4.7, RGAA 10.7)

Ce qu'il révèle :

• Éléments sans indicateur de focus visible
• Focus personnalisé masqué

Collections de bookmarklets recommandées

DigitalA11Y

Collection de plus de 50 bookmarklets couvrant tous les aspects de l'accessibilité. Régulièrement mise à jour, bien documentée.

Paul J. Adam Bookmarklets

Collection historique de référence, compatible avec les lecteurs d'écran et fonctionnant même sur mobile.

Intopia Digital Bookmarklets

Sélection curatée utilisée par les auditeurs professionnels, avec des outils spécifiques aux problèmes courants.

A11y-tools.com

Collection mise à jour en 2025 avec des bookmarklets pour les nouveaux critères WCAG 2.2.

Créer vos propres bookmarklets

Structure de base

Un bookmarklet commence par javascript: suivi du code :

javascript:(function(){
  // Votre code ici
})();

Exemple : mettre en évidence les images sans alt

javascript:(function(){
  var imgs = document.querySelectorAll('img:not([alt])');
  imgs.forEach(function(img){
    img.style.outline = '5px solid red';
    img.style.outlineOffset = '2px';
  });
  alert(imgs.length + ' images sans attribut alt');
})();

Exemple : lister les liens génériques

javascript:(function(){
  var links = document.querySelectorAll('a');
  var generic = ['cliquez ici', 'ici', 'lire la suite', 'en savoir plus', 'click here', 'read more'];
  var found = [];
  links.forEach(function(link){
    var text = link.textContent.toLowerCase().trim();
    if(generic.includes(text)){
      link.style.backgroundColor = 'yellow';
      found.push(text);
    }
  });
  alert(found.length + ' liens génériques trouvés');
})();

Intégration dans votre workflow

Phase de développement

Pendant le développement, utilisez les bookmarklets pour des vérifications rapides :

• Après ajout d'un formulaire : vérifier les labels
• Après création d'une page : vérifier les titres
• Avant code review : vérifier l'ordre de focus

Phase de test

Combinez les bookmarklets avec des tests plus approfondis :

1. Lancez les bookmarklets pertinents
2. Notez les problèmes détectés
3. Complétez avec un test manuel (clavier, lecteur d'écran)
4. Utilisez notre outil d'audit automatisé pour une couverture plus large

Documentation des résultats

Pour chaque page testée, documentez :

• Bookmarklets utilisés
• Problèmes détectés
• Sévérité estimée
• Captures d'écran si nécessaire

Limites des bookmarklets

Ce qu'ils ne détectent pas

• Problèmes de couleur et contraste (nécessite des outils dédiés)
• Qualité des alternatives textuelles (jugement humain)
• Comportement dynamique (nécessite interaction)
• Compatibilité lecteur d'écran (nécessite test réel)

Faux positifs possibles

Un bookmarklet peut signaler un problème qui n'en est pas un dans un contexte spécifique. Vérifiez toujours manuellement avant de déclarer une non-conformité.

[!TIP] Les bookmarklets sont des outils de détection, pas de diagnostic. Ils pointent des zones à examiner, mais le verdict final revient à l'auditeur.

Conclusion

Les bookmarklets constituent un premier niveau d'analyse accessible à tous, sans investissement ni installation. Intégrez-les dans votre routine de développement pour détecter les problèmes tôt. Pour un audit complet, combinez-les avec notre outil RGAA Checker, des tests manuels et éventuellement l'expertise d'un professionnel certifié.

Pour approfondir les tests d'accessibilité, consultez notre guide d'audit WCAG complet.