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 favorisent une base d'utilisateurs inclusive en permettant aux personnes ayant une déficience visuelle, une perte d'audition, une dextérité limitée et d'autres handicaps d'accéder à l'extension.
Les fonctionnalités d'accessibilité peuvent être utiles à tous, et pas seulement aux utilisateurs ayant des besoins particuliers. Les raccourcis clavier sont utiles pour les personnes malvoyantes, les personnes souffrant d'une dextérité faible et les utilisateurs expérimentés. Les sous-titres et les transcriptions sont essentiels pour les utilisateurs sourds, mais ils aident aussi les apprenants d'une langue.
Les utilisateurs peuvent interagir avec une extension de différentes façons. Certains utilisateurs disposent d'un écran, d'un clavier et d'une souris standards. Ils peuvent également dépendre d'une loupe et éventuellement d'un lecteur d'écran. Bien qu'il soit impossible de prévoir les outils que les gens utiliseront pour accéder à une extension, tout développeur peut prendre certaines 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, ils ne peuvent pas utiliser une 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 via le clavier, évolutives et compréhensibles par les lecteurs d'écran.
WAI-ARIA dans les commandes personnalisées
WAI-ARIA, Web Accessibility Initiative - Accessible Rich Internet Applications, est une spécification qui permet de rendre les commandes d'interface utilisateur accessibles aux lecteurs d'écran via un ensemble standard d'attributs DOM. Ces attributs fournissent au lecteur d'écran des informations sur le fonctionnement et l'état actuel des commandes d'une page Web.
Pour que les commandes personnalisées soient compatibles avec WAI-ARIA, vous devez modifier les éléments DOM d'une extension pour inclure les attributs utilisés par Chrome pour déclencher des événements lors des interactions des utilisateurs. Les lecteurs d'écran répondent à ces événements et décrivent le fonctionnement de la commande. Les attributs DOM spécifiés par WAI-ARIA sont classés en trois catégories : rôles, états et propriétés.
<div role="toolbar">
La propriété aria-activedescendant spécifie l'enfant d'une barre d'outils qui est sélectionné lorsque la barre d'outils est sélectionnée. Le code tabindex="0" indique que la barre d'outils est sélectionnée dans l'ordre des documents.
Consultez la spécification complète pour l'exemple de barre d'outils ci-dessous:
<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 ont été ajoutés au DOM d'une commande, Google Chrome signale les événements appropriés au lecteur d'écran. Étant donné que la compatibilité avec WAI-ARIA est toujours en cours de développement, il est possible que Google Chrome ne déclenche pas d'événement pour chaque propriété WAI-ARIA. De plus, les lecteurs d'écran peuvent ne pas reconnaître tous les événements déclenchés.
Pour accéder à un tutoriel rapide sur l'ajout de commandes WAI-ARIA à des commandes personnalisées, consultez la présentation de Dave Raggett (WWW2010).
Sélectionner dans 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 de navigation et de fonctionnement, 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 qui peuvent être sélectionnés au clavier sont les ancres, les boutons et les commandes de formulaire. Toutefois, si vous définissez l'attribut HTML tabIndex sur 0, les éléments DOM sont placés dans la séquence de tabulation par défaut, ce qui leur permet d'être sélectionnés au clavier.
element.tabIndex = 0
element.focus();
La définition de tabIndex = -1 supprime l'élément de la séquence de tabulation, mais lui permet toujours d'être sélectionné par programmation.
Prendre en charge l'accès via le 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 ne le font tout simplement pas d'y accéder.
Navigation
Vérifiez que l'utilisateur peut naviguer entre les différentes parties d'une extension sans utiliser la souris. Vérifiez qu'il est possible de naviguer à l'aide d'un pop-up avec le clavier. Utilisez les raccourcis clavier Chrome pour déterminer si une extension est navigable.
Assurez-vous que vous pouvez facilement voir quelles parties de l'interface sont sélectionnées au clavier. En général, un contour de focus se déplace dans l'interface. Toutefois, si le code CSS est utilisé trop, le contour peut être supprimé ou le contraste réduit.
Raccourcis
Bien que la stratégie de navigation au clavier la plus courante implique l'utilisation de la touche de tabulation pour faire pivoter le curseur dans l'interface d'une extension, ce n'est pas toujours l'option la plus simple ni la plus efficace.
Un simple gestionnaire de clavier JavaScript peut se présenter comme suit. Notez que la propriété WAI-ARIA aria-activedescendant est mise à jour en réponse à une entrée utilisateur pour refléter le bouton actif de la barre d'outils.
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 vers d'importants éléments d'interface utilisateur 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 indiquant sur la page d'options.
Fournir des contenus accessibles
Fournir un contenu accessible est important pour tous les utilisateurs. La plupart des consignes suivantes peuvent sembler banales, car elles reflètent les bonnes pratiques à appliquer à l'ensemble du contenu Web.
Texte
Le choix des polices et la taille du texte ont une incidence sur la lisibilité du contenu d'une extension. Il se peut que les utilisateurs ayant des problèmes de vue doivent augmenter la taille du texte des extensions. 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 de 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 dans des 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 s'adapter à différentes tailles et sont accessibles par les utilisateurs de lecteurs d'écran.
Couleurs
Le contraste entre la couleur de l'arrière-plan et celle du texte de l'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 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 daltonisme.
Envisagez de proposer différents thèmes de couleur ou de donner à l'utilisateur la possibilité de personnaliser le jeu de couleurs pour créer un meilleur contraste.
Son
Si une extension s'appuie sur 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 "Contenus multimédias décrits et sous-titrés".
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 qu'une description littérale de son contenu. Les espaces ou les images purement décoratives doivent comporter un texte alternatif "" vide ou être entièrement supprimés du code HTML et placés dans le code CSS.
Si l'extension doit contenir du texte dans une image, incluez-le dans le texte alternatif. L'article de WebAIM sur le texte alternatif approprié est une bonne ressource.
En savoir plus
Pour en savoir plus sur l'accessibilité dans Chrome, consultez la chaîne A11ycasts et lisez la documentation technique sur l'accessibilité dans Chromium.