Javascript et l'accessibilité

https://stackoverflow.com/questions/266777

06-07-2019
|

Question

En tant que développeur Web, un certain nombre de projets sur lesquels je travaille relèvent de la responsabilité du gouvernement et sont donc soumis à Accessibilité 508 lois et parfois les directives sur l'accessibilité W3C . Dans quelle mesure JavaScript peut-il être utilisé tout en respectant ces exigences?

Dans cette optique, dans quelle mesure JavaScript, en particulier AJAX, utilise-t-il des logiciels tels que jQuery pour afficher des dialogues modaux, des fenêtres contextuelles, etc. pris en charge par des logiciels d’accessibilité modernes tels que JAWS, Orca, etc.? Auparavant, la règle était la suivante: "Si cela ne fonctionne pas dans Lynx, cela ne fonctionnera pas pour un lecteur d'écran". Est-ce toujours vrai ou y a-t-il eu davantage de progrès dans ces domaines?

EDIT: Le consensus semble être que javascript est correct tant qu'il y a des replis non javascript, mais il semble toujours incertain quant à la prise en charge d'AJAX dans les logiciels de lecture d'écran. Si quelqu'un a une expérience spécifique dans ce domaine, ce serait très utile.

La solution

Si l’accessibilité est votre principale préoccupation, démarrez toujours un site Web en utilisant du HTML conforme aux normes (choisissez une définition de type de document et respectez-la). S'il s'agit d'une application Web (envoi de formulaires, etc.), assurez-vous que les formulaires fonctionneront uniquement avec HTTP GET et POST. Une fois que vous avez un site Web / une application complète, vous pouvez ajouter des éléments CSS et JavaScript tant que le site fonctionne toujours, avec l'un ou les deux désactivés.

Le concept le plus important ici est Amélioration progressive . Vous ajoutez des options supplémentaires en utilisant CSS / JavaScript, mais votre site Web / votre application Web fonctionnera parfaitement bien sans non plus.

Un excellent outil pour tester 508 , WAI , CSS désactivé, JavaScript désactivé, essayez d'utiliser le plug-in Web Developer pour Firefox.

Autres conseils

Je pense que la réponse est vraiment dans la façon dont vous architectez les choses. JQuery a la capacité d'être discret et donc accessible. L'astuce consiste à avoir une redondance autour de vos appels AJAX afin que les navigateurs sans JavaScript puissent toujours utiliser votre service. En d'autres termes, partout où vous avez des réponses JavaScript, des dialogues, etc., vous devez avoir un équivalent dégradé.

Si vous avez à l'esprit l'accessibilité et que vous testez correctement les deux cas d'utilisation (JavaScript et non-JavaScript), vous devriez être en mesure d'écrire des applications qui répondent aux deux types d'audience.

Exemple (appel $ (document) .ready omis pour plus de clarté et de concision:

<script>
  $("#hello").click(function(){
    alert("Hi");
  });
</script>
<a href="/say_hello.htm" id="hello">Say Hello</a>

Un exemple trivial, mais en gros, cela n'évaluera l'événement Click JavaScript que si JavaScript est pris en charge. Sinon, cela fonctionnera comme un lien normal et allez à say_hello.htm - votre travail en tant que développeur consiste à vous assurer que les deux résultats sont gérés de manière appropriée.

J'espère que ça aide!

L’amélioration progressive est certes une voie, mais la discrétion n’est pas une fin en soi, car l’accessibilité JavaScript est terminée, car les lecteurs d’écran ont tendance à utiliser les navigateurs comme base de leur travail. Étant donné que ces navigateurs prennent en charge JavaScript, les scripts de votre page seront toujours exécutés. Ceci est un problème particulier avec AJAX car cliquer sur une partie de la page peut changer une autre partie de la page dont le lecteur d’écran n’a pas connaissance.

Au fur et à mesure que AJAX mûrit, de nouvelles méthodes pour le rendre accessible apparaissent. Consultez la WAI-ARIA pour connaître les méthodes modernes permettant de rendre AJAX accessible, et Google AxsJAX pour une bonne mise en oeuvre.

Voir

Vous pouvez également jeter un coup d’œil à FlashAid, bien que ce soit loin d’être une solution parfaite. (Mais si vous utilisiez l'amélioration progressive et n'utilisiez AJAX que lorsque Flash était présent et que l'utilisateur n'utilisait pas l'API d'accessibilité, vous pourriez disposer d'une solution raisonnable ... pour Windows.)

À long terme, WAI-ARIA est la solution. JAWS 10 (version bêta) et Firevox le prennent en charge, mais cela n’est certainement pas suffisant pour tous les utilisateurs actuels.

JQuery a la capacité d’être discret et donc accessible. L'astuce consiste à avoir une redondance autour de vos appels AJAX afin que les navigateurs sans JavaScript puissent toujours utiliser votre service. En d'autres termes, partout où vous avez des réponses JavaScript, des dialogues, etc., vous devez avoir un équivalent dégradé.

Pour réutiliser votre code, vous pouvez utiliser votre "simple" " appel de page à une "fonction" (ou ce que vous utilisez pour la logique côté serveur) qui peut être appelé par lui-même, renvoyant JSON ou XML.

Par exemple: /static/myform.asp (côté serveur, 'inclut' la même logique que /ajax/myform.asp) de cette façon, vous utiliseriez asp en tant que modèles de Django.

Bien sûr, avec une structure complète de clochettes et de sifflets, vous pourriez rendre cela beaucoup plus facile (pensez à avoir un HTML et un "modèle" xml pour la même vue dans Django), mais la même idée s’applique.

Ceci fait, itérer sur toutes les ancres du document prêt en utilisant jQuery et ajouter des événements onclick en utilisant le lien de l'ancre, remplacer / static / ajax / pourrait vous faciliter la vie.

Quelqu'un peut-il penser aux raisons pour que cela soit un fardeau trop lourd? J'aimerais savoir s'il y a un problème sérieux dans cette "idée de design".

Je pense que la réponse acceptée, bien que convenant à son époque, est maintenant dépassée. (Littéralement, dix ans au moment de la rédaction de cette réponse. WCAG 2.1 a été finalisé il y a quelques semaines ...)

Le pratiques en matière de modèles de conception de création WAI W3C comprend: divers exemples de widgets communs qui nécessitent un code java afin de communiquer la sémantique, les états et les rôles appropriés aux technologies d'assistance.

AJAX peut être rendu accessible, à condition de donner aux lecteurs d’écran des indices sémantiques pertinents sur ce que sera la mise à jour dans la page avant que l’utilisateur ne l’active. Vous devrez peut-être également informer le lecteur d’écran de ce qui a réellement changé par la suite, par exemple. une région aria-live pourrait annoncer que "20 nouveaux éléments ont été chargés" ou peu importe. Ceci est réalisé avec javaScript.

Si vos connaissances en matière d'accessibilité s'arrêtent à "l'amélioration progressive" et que vous considérez la réponse acceptée ci-dessus comme une justification de cette position, vous aurez peut-être besoin d'une mise à jour. Les choses vont vite ces jours-ci.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow