Les extensions permettent aux utilisateurs de créer une expérience de navigation idéale, adaptée à leurs besoins. capacités et préférences. Les extensions doivent inclure des composants d'accessibilité qui encouragent inclusive en permettant aux personnes souffrant de déficiences visuelles, de perte d'audition, de dextérité limitée et d’autres handicaps pour 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, ceux dont la dextérité est limitée et les utilisateurs expérimentés profitent tous des raccourcis clavier. Sous-titres et Les transcriptions sont essentielles pour les utilisateurs sourds, mais aident également les apprenants de langue.
Les utilisateurs peuvent interagir avec une extension de différentes manières. Certains utilisateurs ont un écran standard, clavier et souris, ou utiliser une loupe et éventuellement 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, ils ne peuvent pas utiliser d'extension. Le plus simple pour 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 accessibles, facilement évolutifs et compréhensibles par les lecteurs d’écran.
WAI-ARIA dans les commandes personnalisées
La Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) est une spécification qui permet de rendre les commandes de l'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 des commandes sur 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. Lecteurs d'écran répondre à ces événements et décrire la fonction du groupe de contrôle. 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, les états et les 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 prise en charge de WAI-ARIA étant encore en cours de développement, Il est possible que Google Chrome ne déclenche pas d'événement pour chaque propriété WAI-ARIA et que les lecteurs d'écran à reconnaître tous les événements déclenchés.
Pour obtenir un bref tutoriel sur l'ajout de commandes WAI-ARIA à des commandes personnalisées, consultez la présentation de Dave Raggett lors 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 le fonctionnement et Les commandes 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
être sélectionnés au clavier sont les ancrages, les boutons,
et des commandes de formulaire. Toutefois, définir l'attribut HTML tabIndex sur 0 place les éléments DOM dans la séquence d'onglets 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é. Généralement un aperçu de la cible se déplace dans l'interface. Toutefois, si le CSS est utilisé de façon trop intensive, le contour peut être supprimé ou réduit le contraste.
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.
Voici à quoi pourrait ressembler un simple gestionnaire de clavier JavaScript. 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="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</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, associez des écouteurs d'événements de 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. De nombreuses recommandations 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 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 ne interférer 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'interface 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 des images. Optez plutôt pour une police Web stylisée, comme l'une des polices de l'API Google Fonts. Les polices Web peuvent s'adapter à différentes tailles et sont accessibles par les personnes à l'aide d'un écran lecteurs.
Couleurs
Le contraste entre la couleur de l'arrière-plan et la couleur du texte dans 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 donnent le contraste approprié.
Lorsque vous évaluez le contraste, vérifiez que chaque partie de l'extension qui s'appuie sur des graphiques pour transmettre les informations sont clairement visibles. 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 se base sur du son ou de la vidéo pour transmettre des informations, assurez-vous que les sous-titres ou une transcription est disponible. Pour en savoir plus, consultez les Consignes relatives au programme de contenus multimédias décrits et sous-titres. des informations sur les 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 qu'une description littérale du contenu
d'une image. Les images d'espacement ou les images purement décoratives doivent comporter un texte alternatif "" vide ou être supprimées
à partir du code HTML et à les placer dans le CSS.
Si l'extension doit utiliser du texte dans une image, incluez le texte de l'image 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 version A11ycasts et lisez les articles suivants : consultez la documentation technique sur l'accessibilité de Chromium.