Accessibilité dans les applications à page unique (ARIA, etc.)

Question

Quelle est la meilleure approche pour rendre un SPA (AngularJS) accessible (pour les lecteurs d'écran, etc.)?

Je n’ai que peu d’expérience avec les spécifications ARIA, et je me demande si cela ne fonctionnera pas du tout avec une application d’une seule page.

Quels sont les pièges courants lors du développement?

Comment déboguer et tester l'accessibilité lors du développement?

Answer 1

Cela peut couvrir un large éventail de questions ici. Donc je vais passer par certaines des notions de base dans l'espoir qu'il commence à vous sur votre chemin, les écueils, comme elle l'avait fait.

Tout d'abord, comme les commentateurs ont dit, oui, vous devez vous assurer que ARIA tags sont utilisés correctement. Donc, dire, si vous voulez exposer un div comme un bouton, vous auriez quelque chose comme ça.

<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div>

Ce bouton lorsqu'il est sélectionné par un lecteur d'écran sera appelé "super flashy bouton", de sorte que vous n'avez pas besoin de mettre le bouton dans votre aria-label de l'attribut. Il y a des exemples plus complexes, mais qui illustre les bases, assez bien. Rôle, aria-label et tabindex sera la plus répandue ARIA attributs de vous voir.

Onglet indexation des éléments que vous souhaitez utilisateurs de lecteurs d'écran, cliquez sur est vital pour cela. Définissez la propriété tabindex de 0 à inclure dans son emplacement par défaut sur le document. Si vous ne voulez pas nécessairement normalement être atteint par des gens à l'aide du clavier de navigation, mis à -1. Cela signifie qu'il est hors de la normale de l'ordre de tabulation, mais peut encore être navigué, si vous voulez mettre à l'utilisateur de se concentrer là manuellement à l'aide de javascript/jquery .focus().

Comme mentionné, parfois vous pouvez vous aider du clavier navigateurs/utilisateurs de lecteurs d'écran en déplaçant leur attention pour eux. Un exemple serait si ils cliquent sur un bouton et un menu apparaît. Vous pourriez faire quelque chose comme cela pour les mettre sur le premier lien du menu:

$('#linkmenuactivator').on("click", function () {
    $('#linkmenu').find('li:first a').focus();
});

Je sais que c'est en JQuery, je ne suis pas familier avec AngularJS mais ma brève vue me fait penser que c'est plus un ViewModel contrôleur par opposition à quelque chose de l'INTERFACE utilisateur spécifiques, tels que JQuery, mais corrigez-moi si je me trompe.

En direct des régions peut être utilisé si vous êtes en train de faire des choses funky sur l'écran qui ne font pas sens pour un utilisateur de lecteur d'écran. Vous pouvez écrire du texte pour les éléments de ces régions afin de mettre l'information sous forme de texte. La façon la plus simple de le faire est d'utiliser un rôle d'alerte ou de statut, pour les messages importants ou génériques mises à jour de statut, respectivement. Ces rôles rendre votre élément d'une région active par défaut, et le texte des modifications y seront signalés à l'écran du lecteur. Ainsi, un exemple rapide ressemblerait à quelque chose comme ceci:

<p id="ariastatusbox" ... role="status"></p>

Puis, plus tard dans JQuery (en prenant l'exemple de la vous chargez un document et à la décoloration dans quand vous en avez):

$('#maincontent').fadeIn(function () {
    $('#ariastatusbox').text('Document loaded');
});

Cela permettra à l'écran du lecteur de savoir que le document est chargé et prêt à être lu sur l'écran. En direct des régions peut être un peu difficile, mais ils sont un puissant beasty si vous pouvez maîtriser.

Enfin, quant à l'accessibilité des tests, il y a plusieurs options. J'ai récemment découvert Vague qui semble être un test en ligne de l'outil. Il semble bien, à partir d'un premier coup d'œil, vous pouvez lui donner un essai. Une autre option est de prendre un lecteur d'écran vous-même et de lui donner un aller. Je recommande NVDA qui est un open-source (donc gratuit), lecteur d'écran. C'est mon lecteur d'écran de choix et il est sacrément bon. Le synthétiseur, il est livré avec n'est pas la plus belle voix, mais il y a d'autres options, ou vous pouvez désactiver la sortie vocale et d'afficher un texte d'affichage de ce qu'il pourrait dire à l'aide de la Parole de la Visionneuse. Une dernière option est de demander à l'accessibilité des testeurs de prendre votre application pour un essai routier. Pour les produits de consommation ou des choses dans ces supports, les aveugles et les autres utilisateurs de accessible tech peut bien volontaire pour le faire si on le lui demande. Pour plus axée sur la gestion des applications que vous ne voulez pas vous dans un forum public, il y a plusieurs organisations qui peuvent les consulter sur des questions de faire des applications web accessibles.

Ce n'est pas un manuel complet sur l'accessibilité, j'espérais vraiment kickstart vous dans la bonne direction. Pour un peu d'un regard plus profond, essayez de regarder à l' ARIA rôles de la documentation (tous il va l'aider, mais le code est dans la définition de la rubrique), et à partir de ce que l' ARIA États et Propriétés de la documentation. Ils ont tous deux peuvent être un peu sec, mais aussi avoir la liste complète de tout ce que vous pouvez utiliser ARIA sage. Google devrait être en mesure de rendement des tutoriels, aussi, j'espère.

J'espère que cette aide vous obtenir a commencé. Bonne chance!