Les extensions permettent aux utilisateurs de créer une expérience de navigation idéale, adaptée à leurs capacités et à leurs préférences. Les extensions doivent inclure des composants d'accessibilité qui encouragent une base d'utilisateurs inclusive en permettant aux personnes ayant une déficience visuelle, une perte auditive, une dextérité limitée et d'autres handicaps d'accéder à l'extension.
Tout le monde peut bénéficier des fonctionnalités d'accessibilité, et pas seulement les utilisateurs ayant des besoins spécifiques. Les utilisateurs malvoyants, dont la dextérité est réduite ou les utilisateurs expérimentés bénéficient tous des raccourcis clavier. Les sous-titres et les transcriptions sont essentiels pour les utilisateurs sourds, mais ils aident également les apprenants de langues.
Les utilisateurs peuvent interagir avec une extension de différentes manières. Certains utilisateurs disposent d'un écran, d'un clavier et d'une souris standards, ou peuvent dépendre d'une loupe et éventuellement d'un lecteur d'écran. Bien qu'il soit impossible de prédire les outils que les utilisateurs utiliseront pour accéder à une extension, tout développeur peut prendre des mesures pour rendre une extension aussi accessible que possible.
Intégrer des commandes d'interface utilisateur accessibles
Si les utilisateurs ne peuvent pas accéder aux commandes de l'interface utilisateur, cela signifie qu'ils ne peuvent pas utiliser l'extension. Le moyen le plus simple de créer une UI accessible consiste à utiliser une commande HTML standard.
Commandes standards
Dans la mesure du possible, utilisez les commandes d'interface utilisateur HTML standards. Les commandes HTML standards sont accessibles au clavier, se mettent facilement à l'échelle et sont généralement comprises par les lecteurs d'écran.
WAI-ARIA dans les commandes personnalisées
La spécification WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) vise à rendre les commandes de l'interface utilisateur accessibles aux lecteurs d'écran via un ensemble standard d'attributs DOM. Ces attributs fournissent des informations au lecteur d'écran sur la fonction et l'état actuel des commandes d'une page Web.
Pour ajouter la compatibilité avec WAI-ARIA aux commandes personnalisées, les éléments DOM d'une extension doivent être modifiés pour inclure les attributs que Chrome utilise pour déclencher des événements lors de l'interaction utilisateur. Les lecteurs d'écran répondent à ces événements et décrivent la fonction de la commande. Les attributs DOM spécifiés par WAI-ARIA sont classés en rôles, états et propriétés.
<div role="toolbar">
La propriété aria-activedescendant spécifie quel enfant d'une barre d'outils reçoit la sélection lorsque la barre d'outils reçoit la sélection. Le code tabindex="0" spécifie que la barre d'outils reçoit la sélection dans l'ordre des documents.
Vous trouverez ci-dessous la spécification complète d'un exemple de barre d'outils:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
Une fois que les rôles, états et propriétés WAI-ARIA sont ajoutés au DOM d'un contrôle, Google Chrome génère les événements appropriés pour le lecteur d'écran. La compatibilité avec WAI-ARIA étant toujours en cours de développement, il est possible que Google Chrome ne génère pas d'événement pour chaque propriété WAI-ARIA, et que les lecteurs d'écran ne reconnaissent pas tous les événements déclenchés.
Pour un tutoriel rapide sur l'ajout de commandes WAI-ARIA aux commandes personnalisées, consultez la présentation de Dave Raggett de WWW2010.
Sélectionner les commandes personnalisées
La sélection au clavier est essentielle pour les utilisateurs qui naviguent sur le Web sans souris. Assurez-vous que les commandes d'opération et de navigation, telles que les boutons, les zones de liste et les barres de menu, peuvent être sélectionnées au clavier.
Par défaut, les seuls éléments du DOM HTML pouvant recevoir la sélection au clavier sont les ancres, les boutons et les commandes de formulaire. Toutefois, définir l'attribut HTML tabIndex sur 0 place les éléments DOM dans la séquence de tabulation par défaut, ce qui leur permet de recevoir la sélection au clavier.
element.tabIndex = 0
element.focus();
Le paramètre tabIndex = -1 supprime l'élément de la séquence de tabulation, mais permet toujours à l'élément de recevoir la sélection au clavier de manière programmatique.
Assurer la compatibilité avec l'accès au clavier
Les extensions doivent être utilisables avec un simple clavier, ce qui permet aux utilisateurs qui ne peuvent pas utiliser de souris et aux utilisateurs expérimentés qui n'en ont pas besoin d'y accéder.
Navigation
Vérifiez qu'un utilisateur peut naviguer entre les différentes parties d'une extension sans utiliser la souris. Vérifiez que l'utilisation d'un pop-up est possible à l'aide du clavier. Utilisez les raccourcis clavier Chrome pour déterminer si une extension est navigable.
Assurez-vous de pouvoir identifier facilement les parties de l'interface sur lesquelles le clavier est sélectionné. En général, un contour de focus se déplace dans l'interface. Toutefois, si le CSS est trop utilisé, le contour peut être supprimé ou le contraste réduit.
Raccourcis
Bien que la stratégie de navigation au clavier la plus courante consiste à utiliser la touche Tabulation pour faire pivoter le focus dans l'interface d'une extension, ce n'est pas toujours l'option la plus simple ni la plus efficace.
Un gestionnaire de clavier JavaScript simple peut se présenter comme suit : Notez comment la propriété WAI-ARIA aria-activedescendant est mise à jour en réponse à la saisie de l'utilisateur pour refléter le bouton de barre d'outils actif actuel.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
Les extensions peuvent créer des raccourcis clavier explicites pour les éléments d'interface utilisateur importants de l'extension. Pour implémenter ces raccourcis, connectez les écouteurs d'événements du clavier aux commandes. Informez les utilisateurs des raccourcis disponibles en les fournissant sur la page des options.
Fournir des contenus accessibles
Proposer des contenus accessibles est important pour tous les utilisateurs. Bon nombre des consignes suivantes peuvent vous sembler familières, car elles reflètent les bonnes pratiques pour tous les contenus Web.
Texte
Les choix de police et la taille de texte ont une incidence sur la lisibilité du contenu d'une extension. Les utilisateurs ayant des problèmes de vue peuvent avoir besoin d'augmenter la taille de texte d'une extension. Si vous utilisez des raccourcis clavier, assurez-vous qu'ils n'interfèrent pas avec les raccourcis de zoom intégrés à Chrome.
Pour évaluer la flexibilité de l'interface utilisateur d'une extension, appliquez le test à 200%. Si la taille du texte ou le zoom sur la page sont augmentés de 200%, sont-ils toujours utilisables ?
Évitez d'intégrer du texte aux images. Les utilisateurs ne peuvent pas modifier la taille, et les lecteurs d'écran ne peuvent pas interpréter les images. Optez plutôt pour une police Web stylisée, comme l'une des polices disponibles dans l'API Google Font. Les polices Web peuvent être mises à l'échelle à différentes tailles et peuvent être consultées par les personnes qui utilisent des lecteurs d'écran.
Couleurs
Le contraste entre la couleur d'arrière-plan et celle du texte d'une extension doit être suffisant. Utilisez un outil de vérification du contraste pour vérifier si les couleurs d'arrière-plan et de premier plan offrent un contraste approprié.
Lorsque vous évaluez le contraste, vérifiez que chaque partie de l'extension qui s'appuie sur des éléments graphiques pour transmettre des informations est clairement visible. Pour des images spécifiques, vous pouvez utiliser des outils tels que Coblis : simulateur de daltonisme pour voir à quoi ressemble une image avec différentes formes de déficience visuelle.
Pensez à proposer différents thèmes de couleurs ou à permettre à l'utilisateur de personnaliser le jeu de couleurs pour créer un meilleur contraste.
Son
Si une extension utilise du son ou de la vidéo pour transmettre des informations, assurez-vous que des sous-titres ou une transcription sont disponibles. Pour en savoir plus sur les sous-titres, consultez les Consignes du programme de médias avec description et sous-titres.
Images
Fournissez un texte alternatif informatif pour les images.
<img src="img.jpg" alt="The logo for the extension">
Utilisez le texte alternatif pour indiquer l'objectif de l'image plutôt que pour décrire littéralement son contenu. Les images d'espacement ou purement décoratives doivent comporter un texte alternatif "" vide ou être complètement supprimées du code HTML et placées dans le code CSS.
Si l'extension doit utiliser le texte d'une image, incluez-le dans le texte alternatif. Consultez l'article de WebAIM sur le texte alternatif approprié pour en savoir plus.
En savoir plus
Pour en savoir plus sur l'accessibilité dans Chrome, consultez la chaîne A11ycasts et la documentation technique sur l'accessibilité de Chromium.