Pour de nombreux utilisateurs, l'accessibilité est littéralement l'interface utilisateur. Ses fonctionnalités peuvent souvent être utiles à ceux qui n'ont pas besoin de l'accessibilité comme moyen principal d'interagir avec votre extension. Les techniques sont variées. Au minimum, le texte doit présenter un contraste élevé. Les vidéos doivent être sous-titrées. Les images doivent inclure des attributs alt.
Mais, comme indiqué, ce n'est que le minimum. D'autres techniques sont décrites ci-dessous.
Il existe plusieurs façons d'implémenter l'accessibilité, mais la plus simple consiste à utiliser une commande HTML standard, en particulier les éléments d'entrée. L'image suivante illustre ces commandes.
Pour rendre d'autres éléments accessibles, utilisez des attributs ARIA. Ces attributs fournissent des informations au lecteur d'écran sur la fonction et l'état actuel des commandes d'une page Web. Prenons un exemple.
<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>
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. Heureusement, la définition de l'attribut tabIndex sur un élément HTML lui permet d'être sélectionné au clavier. Exemple :
<div tabindex="0">I can receive focus with the tab key.</div>
Pour obtenir des instructions sur la mise en œuvre de ces techniques et plus encore, consultez la section Accessibilité de l'assistance.