Les extensions permettent aux utilisateurs de créer une expérience de navigation idéale, adaptée aux capacités et aux préférences de l'utilisateur. Les extensions doivent inclure des composants d'accessibilité qui favorisent une base d'utilisateurs inclusive en permettant aux personnes souffrant de déficiences visuelles, d'une perte auditive, d'une dextérité limitée ou d'autres handicaps d'accéder à l'extension.
Tout le monde, pas seulement les utilisateurs ayant des besoins particuliers, peut bénéficier des fonctionnalités d'accessibilité. Les raccourcis clavier sont utiles aux personnes malvoyantes, à faible dextérité et aux utilisateurs expérimentés. Les sous-titres et les transcriptions sont essentiels pour les personnes sourdes, mais ils aident également les apprenants de langues.
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 aussi dépendre d'une loupe et éventuellement d'un lecteur d'écran. Bien qu'il soit impossible de prévoir quels outils 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 interface utilisateur 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, mises à l'échelle et généralement comprises 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 la fonction et l'état actuel des commandes d'une page Web.
Pour ajouter la compatibilité WAI-ARIA aux commandes personnalisées, 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 avec les utilisateurs. Les lecteurs d'écran répondent à ces événements et décrivent la fonction de la commande. Les attributs DOM spécifiés par WI-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 quel enfant d'une barre d'outils 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.
Voici 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 les rôles, les états et les propriétés WAI-ARIA ajoutés au DOM d'une commande, Google Chrome déclenche les événements appropriés sur le lecteur d'écran. La prise en charge de WAI-ARIA étant 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 suivre un tutoriel rapide sur l'ajout de commandes WAI-ARIA aux commandes personnalisées, consultez la présentation de Dave Raggett (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 de fonctionnement 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 qui peuvent être sélectionnés au clavier sont les ancrages, les boutons et les commandes de formulaire. Toutefois, si l'attribut HTML tabIndex est défini 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();
Définir tabIndex = -1 supprime l'élément de la séquence de tabulation, mais lui permet toujours de recevoir les sélections par programmation du clavier.
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 se servir d'une souris et aux utilisateurs expérimentés qui ne l'ont tout simplement pas, d'y accéder.
Navigation
Vérifiez que les utilisateurs peuvent naviguer entre les différentes parties d'une extension sans utiliser la souris. Vérifiez qu'il est possible de naviguer au clavier pour chaque utilisation d'un pop-up. Utilisez les raccourcis clavier Chrome pour déterminer si une extension est navigable.
Veillez à ce qu'il soit facile d'identifier les parties de l'interface qui sont mises en avant avec le clavier. En règle générale, les contours d'un focus se déplacent dans l'interface. Toutefois, si le code CSS est trop utilisé, il peut être supprimé ou le contraste réduit.
Raccourcis
Bien que la stratégie de navigation au clavier la plus courante implique d'utiliser 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 actuellement 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="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Les extensions peuvent créer des raccourcis clavier explicites vers des éléments importants de l'interface utilisateur des extensions. Pour implémenter ces raccourcis, connectez les écouteurs d'événements de clavier aux commandes. Informez les utilisateurs des raccourcis disponibles en les indiquant sur la page d'options.
Fournir du contenu accessible
Il est important de proposer du contenu accessible à tous les utilisateurs. La plupart des consignes suivantes peuvent vous sembler familières, car elles reflètent les bonnes pratiques applicables à 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. Les utilisateurs ayant des problèmes de vue peuvent avoir besoin d'augmenter la taille du 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 indiquer 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%, est-il tout de même utilisable ?
É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
La couleur de l'arrière-plan et celle du texte d'une extension doivent être suffisamment contrastées. 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 utilise des images pour transmettre des informations est clairement visible. Pour des images spécifiques, des outils tels que Coblis — Simulateur de daltonisme peuvent être utilisés afin de voir à quoi ressemble une image sous différentes formes de daltonisme.
Envisagez de proposer différents thèmes de couleurs ou de donner à l'utilisateur la possibilité 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 le Règlement du programme de 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 images avec espacement ou les images purement décoratives doivent comporter un texte alternatif "" vide ou être entièrement supprimées du code HTML et placées dans le code CSS.
Si l'extension doit utiliser du texte dans une image, incluez le texte de l'image dans le texte alternatif. Reportez-vous à l'article WebAIM sur le texte alternatif approprié pour en savoir plus.
Plus d'infos
Pour en savoir plus sur l'accessibilité dans Chrome, consultez le canal A11ycasts et lisez la documentation technique sur l'accessibilité de Chromium.