Comment concevoir des extensions de navigateur accessibles

Article original : How to Design Accessible Browser Extensions

La création d'une extension de navigateur est simple, mais s'assurer qu'elle soit accessible à tous demande une attention particulière et des compétences spécifiques.

Votre extension peut récupérer des données de manière impeccable et posséder une interface magnifique, mais si les utilisateurs de lecteurs d'écran ou les personnes naviguant au clavier ne peuvent pas l'utiliser, vous avez involontairement exclu de nombreux utilisateurs potentiels.

Dans cet article, nous allons auditer l'accessibilité d'une extension de navigateur Chrome et la transformer en une expérience inclusive qui fonctionne pour tout le monde.

Table des matières

• Pourquoi l'accessibilité est importante dans les extensions de navigateur

• Comment effectuer des tests manuels d'accessibilité d'extensions de navigateur

• Comment implémenter des améliorations d'accessibilité d'extensions de navigateur

• Comment effectuer des tests automatisés d'accessibilité d'extensions de navigateur

• Bonnes pratiques pour des extensions de navigateur accessibles

• Conclusion

Pourquoi l'accessibilité est importante dans les extensions de navigateur

Chaque clic dans votre extension de navigateur est une opportunité de donner du pouvoir aux utilisateurs ou de les exclure si l'accessibilité ne fait pas partie de votre conception.

Les extensions de navigateur sont confrontées à des défis d'accessibilité uniques, car elles doivent injecter des fonctionnalités dans des pages web existantes tout en maintenant leurs propres interfaces accessibles — une double responsabilité qui peut introduire des barrières potentielles. Par exemple, une fenêtre contextuelle (popup) qui piège les utilisateurs au clavier ou qui ne parvient pas à communiquer avec les lecteurs d'écran peut rendre une extension inutilisable.

Avec plus d'un milliard de personnes vivant avec un handicap, selon l'Organisation mondiale de la santé, la conception accessible ouvre l'accès à une vaste base d'utilisateurs et crée de meilleures expériences pour tout le monde.

Pour les extensions de navigateur, les barrières d'accessibilité apparaissent couramment comme :

• Impasses de navigation au clavier : Fenêtres contextuelles et interfaces qui piègent ou excluent les utilisateurs au clavier.

• Interactions silencieuses : Étiquettes et descriptions manquantes, comme un bouton avec seulement une icône annoncé comme « bouton non étiqueté » par les lecteurs d'écran, laissant les utilisateurs deviner son utilité.

• Mises à jour de contenu dynamique non annoncées : Changements de contenu qui se produisent sans que les technologies d'assistance en soient informées, comme une citation qui se met à jour sans notifier les lecteurs d'écran, incluant l'absence de retour pour les états de chargement ou les erreurs.

• Conflits d'intégration de contexte : Les extensions modifiant les pages web existantes peuvent par erreur casser les fonctionnalités d'accessibilité de la page ou introduire des éléments qui entrent en conflit avec les schémas de navigation établis.

En comprenant ces barrières, les développeurs peuvent prendre des mesures ciblées pour tester et améliorer l'accessibilité de leurs extensions.

Comment effectuer des tests manuels d'accessibilité d'extensions de navigateur

Bien que les outils automatisés détectent les problèmes évidents, les tests manuels révèlent l'expérience utilisateur réelle. Voici comment évaluer systématiquement l'accessibilité de votre extension.

Test de navigation au clavier

Déconnectez votre souris et essayez d'utiliser votre extension uniquement avec le clavier. Naviguez en utilisant Tab pour vous déplacer entre les éléments, Entrée ou Espace pour activer les boutons, et les touches fléchées au sein des composants.

• L'élément qui a le focus est-il toujours clair ?

• Pouvez-vous activer les boutons avec Entrée ou Espace comme prévu ?

• Les utilisateurs peuvent-ils quitter les boîtes de dialogue modales ou les menus déroulants ?

Si vous rencontrez des impasses ou des points de confusion, les utilisateurs au clavier feront face aux mêmes obstacles.

Évaluation par lecteur d'écran

Utilisez le lecteur d'écran intégré à votre système d'exploitation pour naviguer dans votre extension et écouter ce qui est annoncé. Sur macOS, activez VoiceOver ; sur Windows, utilisez le Narrateur ; sur Linux, essayez Orca.

• Le but de chaque élément est-il clairement communiqué, comme un bouton annoncé « Générer un nouveau conseil » plutôt que simplement « bouton » ?

• Les titres, listes et autres structures sont-ils correctement transmis ?

• Les utilisateurs comprennent-ils quand le contenu est en cours de chargement, sélectionné ou a été modifié ?

Cette phase de test révèle souvent l'écart entre ce que vous aviez l'intention de communiquer et ce qui parvient réellement aux utilisateurs.

Examen de l'accessibilité visuelle

Examinez votre extension dans différents contextes visuels. Utilisez des outils de développement, comme le Contrast Checker de WebAIM, pour vérifier que le texte respecte le rapport de contraste de 4.5:1 du WCAG pour la lisibilité. Testez l'apparence de votre extension avec les paramètres de contraste élevé du système. Assurez-vous que :

• La fonctionnalité reste utilisable à un zoom de 200 %.

• L'information n'est pas transmise uniquement par la couleur, par exemple en utilisant des étiquettes textuelles à côté des indicateurs colorés.

Ces tests manuels permettront de découvrir des problèmes d'accessibilité critiques, ouvrant la voie à des améliorations ciblées pour rendre votre extension inclusive.

Comment implémenter des améliorations d'accessibilité d'extensions de navigateur

Imaginez rafraîchir une page sans savoir que cela s'est produit ou cliquer sur un bouton sans but précis. Les tests manuels effectués ci-dessus ont révélé que c'est l'expérience vécue par les utilisateurs de lecteurs d'écran avec notre extension parmi ces trois problèmes d'accessibilité clés :

• Étiquette de bouton manquante : Le bouton de dé ne possède qu'une image avec le texte alternatif « Icône de dé », ce qui manque de contexte pour les lecteurs d'écran.

• Mises à jour dynamiques silencieuses : Lorsqu'un nouveau conseil se charge, les lecteurs d'écran ne savent pas que le contenu a changé.

• Pas d'états de chargement : Lors de la récupération du conseil, les utilisateurs ne reçoivent aucun retour indiquant qu'une action est en cours.

Abordons ces problèmes avant de procéder aux tests automatisés.

Comment résoudre l'étiquette de bouton et le texte alternatif manquants

Nous allons ajouter aria-label pour expliquer clairement le but du bouton et fournir un texte alternatif descriptif pour l'icône. L'attribut role="presentation" garantit que l'image est traitée comme décorative par les lecteurs d'écran.

<!--Avant : But du bouton et texte alternatif de l'icône peu clairs-->
<button class="dice-button" id="generate-advice-btn">
    <img src="/icons/icon-dice.png" alt="Dice icon">
</button>

<!--Après : Bouton et texte alternatif de l'icône clairs et accessibles-->
<button class="dice-button" id="generate-advice-btn" aria-label="Générer un nouveau conseil">
     <img src="/icons/icon-dice.png" alt="Une icône de dé avec un fond vert" role="presentation">
</button>

Comment résoudre les mises à jour dynamiques silencieuses

Nous allons ajouter aria-live="polite" pour que les lecteurs d'écran annoncent le nouveau conseil et aria-atomic="true" pour s'assurer que l'intégralité de la citation soit lue. Voici comment :

<!--Avant : Mises à jour dynamiques silencieuses-->
<p class="advice-quote" id="advice-quote">
    "Il est facile de s'asseoir et de remarquer, ce qui est difficile, c'est de se lever et d'agir."
</p>

<!--Après : Changements de contenu annoncés-->
<p class="advice-quote" id="advice-quote" aria-live="polite" aria-atomic="true">
    "Il est facile de s'asseoir et de remarquer, ce qui est difficile, c'est de se lever et d'agir."
</p>

Comment résoudre l'absence d'états de chargement

Nous ajouterons une fonction setLoadingState pour fournir des indicateurs de chargement, garantissant que les utilisateurs de lecteurs d'écran soient avertis lorsque le contenu est en cours de récupération :

// Avant : Aucun retour de chargement
function requestNewAdvice() {
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    // Pas d'indicateurs de chargement...
  });
}

// Après : États de chargement accessibles
function requestNewAdvice() {
  setLoadingState(true); 
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    setLoadingState(false);
    // Gérer la réponse avec les annonces appropriées...
  });
}
function setLoadingState(isLoading) {
  if (isLoading) {
    // Désactiver le bouton et afficher le texte de chargement
    generateAdviceBtn.disabled = true;
    generateAdviceBtn.setAttribute('aria-label', 'Chargement d\'un nouveau conseil...');
    // Afficher le texte de chargement dans l'élément de citation
    adviceQuoteElement.textContent = "Chargement d'un nouveau conseil...";
  } else {
    // Réactiver le bouton
    generateAdviceBtn.disabled = false;
    generateAdviceBtn.setAttribute('aria-label', 'Générer un nouveau conseil');
  }
}

Une fois les problèmes des tests manuels résolus, nous pouvons passer à l'exécution d'un test automatisé sur cette même extension.

Comment effectuer des tests automatisés d'accessibilité d'extensions de navigateur

Les tests manuels fournissent des informations cruciales, mais les outils automatisés peuvent détecter efficacement les problèmes courants et assurer une surveillance continue.

Cet Extension Accessibility Checker simplifie les tests en analysant les interfaces des extensions de navigateur, telles que les popups et les scripts de contenu, pour vérifier la conformité WCAG, en abordant des défis uniques comme les contraintes de popup et les conflits d'injection de contenu.

Pour utiliser l'Extension Accessibility Checker :

1. Compressez votre dossier d'extension de navigateur dans un fichier .zip

2. Téléchargez le fichier .zip sur https://extensiona11ychecker.vercel.app/

3. Examinez le rapport généré pour les violations d'accessibilité spécifiques et implémentez les correctifs suggérés.

Comme le montre le GIF ci-dessus, ce flux de travail aide à faire de l'accessibilité une partie routinière de votre processus de développement plutôt qu'une réflexion après coup.

Une fois les tests automatisés en place, explorons les meilleures pratiques pour garantir que votre extension reste accessible tout au long du développement.

Bonnes pratiques pour des extensions de navigateur accessibles

Nous avons transformé notre exemple d'extension de générateur de conseils d'un outil fonctionnel mais inaccessible en un outil inclusif qui fonctionne pour tout le monde.

Sur la base de nos améliorations, voici quatre principes clés pour concevoir des extensions de navigateur accessibles :

1. HTML sémantique et étiquettes claires et descriptives

Commencez toujours par une structure HTML appropriée, en utilisant les éléments adéquats (par exemple, pour une action « Générer un conseil », une hiérarchie de titres correcte) avant d'ajouter des attributs ARIA.

Assurez-vous que chaque élément interactif a un but clair via aria-label, aria-labelledby, ou un texte visible qui explique son action.

2. Communication claire à chaque étape

Chaque élément interactif doit transmettre son but efficacement. Les utilisateurs doivent comprendre :

• Ce qui se passe (par exemple, « Chargement d'un nouveau conseil... » pour les états de chargement)

  • Ce qui n'a pas fonctionné (par exemple, « Échec du chargement du conseil » pour les erreurs)

  • Ce qui a changé (par exemple, les régions aria-live pour le contenu mis à jour)

3. Accessibilité complète au clavier

Toutes les fonctionnalités doivent être disponibles via la navigation au clavier. Cela nécessite de tester avec Tab, Entrée, Espace, et les touches fléchées le cas échéant.

Fournissez des indicateurs de focus clairs et réfléchis qui se déplacent de manière prévisible dans votre interface, avec des moyens évidents pour quitter les modales ou les interactions complexes.

4. Préférences utilisateur et considérations sur les scripts de contenu

Respectez les choix des utilisateurs en prenant en charge les paramètres de taille de police du système et en ne remplaçant pas inutilement les schémas de couleurs définis par l'utilisateur.

Lorsque votre extension modifie des pages web existantes, veillez à ne pas casser les fonctionnalités d'accessibilité établies de la page, la gestion du focus et les schémas de navigation. Assurez-vous que tous les nouveaux éléments que vous injectez respectent les normes d'accessibilité.

Conclusion

Comme nous l'avons vu avec notre extension de génération de conseils, la résolution des problèmes d'accessibilité transforme un outil fonctionnel en un outil inclusif.

Cependant, bien qu'il soit utile de corriger les problèmes dans les extensions existantes, l'approche la plus efficace consiste à laisser l'accessibilité guider vos décisions de conception et de développement dès la première ligne de code.

Lors du lancement de votre prochain projet d'extension de navigateur, demandez-vous :

• Comment quelqu'un naviguerait-il en utilisant uniquement un clavier ?

• Le but de chaque élément interactif est-il immédiatement clair pour les lecteurs d'écran ?

• Comment les utilisateurs comprendront-ils ce qui se passe pendant les états de chargement ?

Voici quelques ressources utiles :

• Documentation sur l'accessibilité des extensions Chrome

• Extension Accessibility Checker

• Directives d'accessibilité des contenus Web (WCAG) 2.1