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. Elles doivent inclure des composants d'accessibilité qui encouragent une base d'utilisateurs inclusive en permettant aux personnes souffrant de déficiences visuelles, de perte auditive, de dextérité limitée et d'autres handicaps d'accéder à l'extension.
Les fonctionnalités d'accessibilité profitent à tous, et pas seulement aux utilisateurs ayant des besoins spécifiques. Les utilisateurs malvoyants, ceux ayant une dextérité limitée et 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 personnes qui apprennent une langue.
Les utilisateurs peuvent interagir avec une extension de différentes manières. Certains disposent d'un moniteur, d'un clavier et d'une souris standards, tandis que d'autres peuvent dépendre d'une loupe d'écran 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, les développeurs peuvent prendre des mesures pour la rendre 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 des commandes d'interface utilisateur HTML standards. Elles sont accessibles au clavier, s'adaptent facilement et sont généralement comprises par les lecteurs d'écran.
WAI-ARIA dans les commandes personnalisées
L'initiative sur l'accessibilité du Web (Web Accessibility Initiative) et les spécifications pour l'accessibilité des applications Web enrichies (Accessible Rich Internet Applications), WAI-ARIA, permettent de rendre les commandes d'interface utilisateur accessibles aux lecteurs d'écran grâce à 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é avec WAI-ARIA aux commandes personnalisées, les éléments DOM d'une extension devront être modifiés pour inclure les attributs que Chrome utilise pour déclencher des événements lors de l'interaction de l'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 le focus lorsque la
barre d'outils reçoit le focus. Le code tabindex="0" spécifie que la barre d'outils reçoit le focus dans
l'ordre du document.
Consultez la spécification complète d'une barre d'outils d'exemple 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 sont ajoutés au DOM d'une commande, Google Chrome déclenche les événements appropriés pour le lecteur d'écran. Comme la compatibilité avec WAI-ARIA est encore en cours de développement, Google Chrome peut ne pas déclencher d'événement pour chaque propriété WAI-ARIA, et les lecteurs d'écran peuvent ne pas reconnaître 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 lors de la conférence WWW2010.
Focus dans les commandes personnalisées
Le focus du clavier est essentiel 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 recevoir le focus du clavier.
Par défaut, les seuls éléments du DOM HTML qui peuvent recevoir le focus du clavier sont les ancres, les boutons et les commandes de formulaire. Toutefois, la définition de 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 le focus du clavier.
element.tabIndex = 0
element.focus();
La définition de tabIndex = -1 supprime l'élément de la séquence de tabulation, mais permet toujours à l'élément de recevoir le focus du clavier par programmation.
Assurer la compatibilité avec le clavier
Les extensions doivent pouvoir être utilisées uniquement avec un 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 qu'un utilisateur peut naviguer entre les différentes parties d'une extension sans utiliser la souris. Vérifiez que toute utilisation d'une fenêtre pop-up est navigable au clavier. Utilisez les raccourcis clavier Chrome pour déterminer si une extension est navigable.
Assurez-vous qu'il est facile de voir quelles parties de l'interface ont le focus du clavier. En règle générale, 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 Tab pour faire défiler le focus 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 comment la propriété WAI-ARIA aria-activedescendant est mise à jour en réponse à l'entrée utilisateur pour refléter le bouton de la 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="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 de l'extension. Pour implémenter ces raccourcis, connectez des écouteurs d'événements clavier aux commandes. Informez les utilisateurs des raccourcis disponibles en les fournissant sur la page des options.
Fournir des contenus accessibles
Il est important de fournir des contenus accessibles à tous les utilisateurs. Beaucoup des consignes suivantes vous sembleront peut-être familières, car elles reflètent les bonnes pratiques pour tous les contenus Web.
Texte
Le choix de la police et la taille du texte ont un impact 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 évaluer la flexibilité de l'interface utilisateur d'une extension, appliquez le test à 200% : si la taille du texte ou le zoom de la page est augmenté de 200%, l'extension est-elle toujours 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 Fonts. Les polices Web peuvent être mises à l'échelle à différentes tailles et sont accessibles aux personnes qui utilisent des lecteurs d'écran.
Couleurs
Le contraste entre la couleur d'arrière-plan et la couleur du texte d'une extension doit être suffisant. Utilisez un outil de vérification du contraste pour tester 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 repose sur des graphiques pour transmettre des informations est clairement visible. Pour des images spécifiques, des outils tels que Coblis—Color Blindness Simulator peuvent être utilisés pour voir à quoi ressemble une image dans différentes formes de déficience des couleurs.
Envisagez de proposer différents thèmes de couleurs ou de permettre à l'utilisateur de personnaliser le schéma de couleurs pour créer un meilleur contraste.
Son
Si une extension repose sur du son ou une 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 Described and Captioned Media Program pour plus d’informations.
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 d'espacement ou purement décoratives doivent avoir un texte alternatif vide "" ou être entièrement supprimées
du code HTML et placées dans le CSS.
Si l'extension doit utiliser du texte dans une image, incluez le texte de l'image dans le texte alternatif. L'article WebAIM sur le texte alternatif approprié est une bonne ressource à consulter.
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é de Chromium.