Quelle est la meilleure approche pour rendre un SPA (AngularJS) accessible (pour les lecteurs d’écran, etc.)?
Je n’ai aucune expérience de la spécification aria, et je me demande si elle fonctionnera sur une seule application.
Quels sont les pièges courants lors du développement?
Comment déboguer et tester l’accessibilité lors du développement?
Cela pourrait couvrir un large éventail de questions ici. Je vais donc passer en revue quelques notions de base dans l’espoir que cela vous amènera sur votre chemin, les pièges courants, pour ainsi dire.
Tout d’abord, comme l’ont dit les commentateurs, vous devez vous assurer que les balises ARIA sont utilisées correctement. Donc, par exemple, si vous vouliez exposer un div comme un bouton, vous auriez quelque chose comme ça.
Ce bouton, lorsqu’il est sélectionné par un lecteur d’écran, sera appelé “bouton super flashy”, vous n’avez donc pas besoin de mettre un bouton dans votre atsortingbut aria-label. Il existe des exemples plus complexes, mais cela illustre bien les bases, à peu près. Les atsortingbuts ARIA les plus répandus sont le rôle, l’aria-label et le tabindex.
Les éléments d’indexation des tabs sur lesquels les utilisateurs de lecteurs d’écran doivent cliquer sont essentiels. Définissez tabindex sur 0 pour l’inclure dans son emplacement par défaut sur le document. Si vous ne voulez pas que les utilisateurs utilisent normalement la navigation au clavier, définissez-la sur -1. Cela signifie qu’il est hors de l’ordre de tabulation normal, mais peut toujours être navigué si vous souhaitez y placer manuellement le focus de l’utilisateur via javascript / jquery .focus ().
Comme mentionné précédemment, il est parfois possible d’aider les navigateurs de clavier / utilisateurs de lecteur d’écran en déplaçant leur attention sur eux. Un exemple serait si ils cliquent sur un bouton et un menu apparaît. Vous pourriez faire quelque chose comme ça pour les mettre sur le premier lien du menu:
$('#linkmenuactivator').on("click", function () { $('#linkmenu').find('li:first a').focus(); });
Je sais que c’est dans JQuery, je ne suis pas familier avec AngularJS mais ma brève vue me fait penser qu’il s’agit plus d’un contrôleur ViewModel que d’une interface utilisateur spécifique comme JQuery, mais corrigez-moi si je me trompe.
Les régions en direct peuvent être utilisées si vous faites des choses géniales sur un écran qui n’a aucun sens pour un utilisateur de lecteur d’écran. Vous pouvez écrire du texte sur les éléments de ces régions pour sortir les informations textuellement. Le moyen le plus simple consiste à utiliser un rôle d’alerte ou de statut pour les messages importants ou les mises à jour de statut génériques, respectivement. Ces rôles font de votre élément une région active par défaut et tout changement de texte y est signalé au lecteur d’écran. Ainsi, un exemple rapide ressemblerait à ceci:
Puis plus tard dans JQuery (en prenant comme exemple le chargement d’un document et son entrée en fondu quand vous l’avez):
$('#maincontent').fadeIn(function () { $('#ariastatusbox').text('Document loaded'); });
Cela permettra au lecteur d’écran de savoir que le document est chargé et prêt à être lu à l’écran. Les régions en direct peuvent être un peu délicates, mais elles sont puissantes si vous pouvez les maîsortingser.
Enfin, en ce qui concerne les tests d’accessibilité, il existe quelques options. Quelque chose que j’ai récemment découvert est Wave, qui semble être un outil de test en ligne. Il a l’air bien d’un premier coup d’oeil, vous pouvez l’essayer. Une autre option consiste à saisir vous-même un lecteur d’écran et à essayer. Je recommande NVDA qui est un lecteur d’écran open-source (donc gratuit). C’est mon lecteur d’écran de choix et c’est sacrément bon. Le synthétiseur avec lequel il est livré n’a pas la plus belle voix, mais il existe d’autres options, ou vous pouvez désactiver la sortie vocale et afficher un affichage textuel de ce qu’il serait en train de dire en utilisant Speech Viewer. Une dernière option consiste à demander aux testeurs d’accessibilité de prendre votre application pour un test. Pour les produits de consommation ou les choses dans ces fourchettes, les personnes aveugles et les autres utilisateurs de technologies accessibles peuvent très bien se porter volontaires si cela leur est demandé. Pour les applications plus orientées métier que vous ne souhaitez peut-être pas utiliser sur un forum public, plusieurs organisations peuvent consulter sur les questions de mise à disposition d’applications Web.
Ce n’est en aucun cas un manuel complet sur l’accessibilité, j’espérais vraiment vous lancer dans la bonne direction. Pour un aperçu plus approfondi, essayez de consulter la documentation des rôles ARIA (tout cela aidera, mais le code est sous l’en-tête définitions), et à partir de la documentation ARIA States and Properties . Ils peuvent tous deux être un peu secs, mais ont aussi la liste complète de tout ce que vous pouvez utiliser en termes d’ARIA. J’espère que Google devrait être en mesure de fournir des tutoriels.
J’espère que cela vous aidera à démarrer. Bonne chance!