Accessibilité dans les applications de page unique (ARIA etc))

Cela peut couvrir un large éventail de questions ici. Donc, je vais passer en revue quelques-unes des bases dans l'espoir qu'il vous démarre sur votre chemin, les écueils communs, comme il était.

tout d'abord, comme les commentateurs l'ont dit, oui, vous devez vous assurer que les étiquettes ARIA sont utilisées correctement. Donc, si vous vouliez exposer une div comme un bouton, vous auriez quelque chose comme ça.

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

ce bouton lorsque sélectionné par un lecteur d'écran sera appelé "bouton flash super", de sorte que vous n'avez pas besoin pour mettre le bouton dans votre attribut aria-label. Il y a des exemples plus complexes, mais qui illustre les bases, assez bien. Rôle, aria-label et tabindex seront les attributs ARIA les plus courants que vous voyez.

Tab-éléments d'indexation sur lesquels vous voulez que les utilisateurs de lecteur d'écran cliquent est essentiel à cela. Définissez tabindex à 0 pour l'inclure dans son emplacement par défaut sur le document. Si vous ne voulez pas qu'il soit nécessairement atteint par des personnes utilisant la navigation au clavier, définissez-le à -1. Cela signifie qu'il est hors de l'ordre normal de l'onglet, mais peut encore être navigué si vous voulez mettre le focus de l'utilisateur il manuellement par javascript/jquery .concentrer.)(

comme mentionné, parfois vous pouvez aider les navigateurs clavier / lecteurs d'écran en déplaçant leur foyer 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 à JQuery, je ne suis pas familier avec les AngularJS mais mon bref point de vue me fait penser que c'est plus un contrôleur de ViewModel par opposition à quelque chose de spécifique à L'interface utilisateur comme JQuery, mais corrigez-moi si je me trompe.

les régions en direct peuvent être utilisées si vous faites des choses bizarres à l'écran qui n'auront aucun sens pour un utilisateur de lecteur d'écran. Vous pouvez écrire le texte aux éléments dans ces régions pour mettre l'information textuellement. 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 de statut générique mises à jour respectivement. Ces rôles font de votre Élément une région vivante par défaut, et tout changement de texte y sera signalé au lecteur d'écran. 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 vous chargeant un document et l'effaçant quand vous l'avez):

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

cela permet au lecteur d'écran de savoir que le document est chargé et prêt à être lu à l'écran. Les régions vivantes peuvent être un peu délicates, mais ils sont puissants si on peut les maîtriser.

enfin, en ce qui concerne les tests d'accessibilité, il y a quelques options. J'ai récemment découvert Wave qui semble être un outil de test en ligne. Ça a l'air bien à première vue, tu pourrais essayer. Une autre option est d'attraper un lecteur d'écran vous-même et de lui donner un essai. Je recommande NVDA qui est un lecteur d'écran open-source (donc gratuit). C'est mon lecteur d'écran de choix et est sacrément bon. Le synthétiseur avec lequel il est livré n'a pas la plus belle voix, mais il y a d'autres options, ou vous pouvez désactiver la sortie de la parole et voir un affichage textuel de ce qu'il dirait en utilisant le visualiseur de la Parole. Une dernière option est de demander à l'accessibilité des testeurs de prendre votre application pour un essai routier. En ce qui concerne les produits de consommation ou les choses entre crochets, les personnes aveugles et les autres utilisateurs de la technologie accessible peuvent très bien se porter volontaires pour le faire si on leur demande. Pour des applications plus axées sur les affaires que vous peut-être pas envie de sortir dans un forum public, Il ya plusieurs organisations qui peuvent se consulter sur les questions de rendre les 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 coup d'oeil plus profond, essayez de regarder le rôles ARIA documentation (tous il va l'aider, mais le code est dans la définition de la rubrique), et à partir de ce que l' États et propriétés ARIA documentation. Ils peuvent tous les deux être un peu secs, mais aussi avoir la liste complète de tout ce que vous pouvez utiliser ARIA wise. Google devrait être en mesure de donner quelques tutoriels, aussi, je l'espère.

j'espère que cela vous aidera à démarrer. Bonne chance!