Quelles sont les conséquences sur l'accessibilité de l'utilisation d'un framework comme angularjs?
Où nous en sommes
Nous sommes sous une pression pour l'accessibilité du web afin de se conformer à certaines lois régissant le public/les établissements d'enseignement. Jusqu'à maintenant, nous avons été faire par seulement de s'assurer que:
- nos mises en page ont été ordonnés de manière logique ;
- images avaient
alt=""
balises.
mais découvrent rapidement que nous avons besoin d'obtenir dans les engins et vraiment réfléchir à ce sujet.
Ce que nous envisageons
Nous avons été à la recherche à AngularJS
comme un cadre pour des applications web dynamiques, mais sont préoccupés par ce que cela peut signifier pour l'accessibilité de notre standing.
Je comprends que les navigateurs sans JavaScript va à l'encontre de la très dynamique Angulaire de l'application (par exemple, des expressions telles que {{ item.something }}
incorporé dans le balisage, à l'aide de ng-repeat
pour générer des listes à partir d'un seul <li>
, côté client des vues partielles comme des balises vides, etc.).
Question
Je me demande si il est bien entendu meilleures pratiques, informations, ressources pour ces types de cadres qui s'appuient fortement sur la dynamique de balisage et de la ligne de marquage qui pourrait être perçu comme mêlé à quelque chose comme un lecteur d'écran ou même un navigateur avec JavaScript et CSS éteint.
- "Un navigateur avec aucun Javascript" est un mythe. Javascript et HTML ont été autour pour la plupart jamais, je suppose que les lecteurs d'écran peuvent traiter avec la lecture de la DOM, comme rendu. (Par exemple, jQuery a une classe d'assistance qui ne "accessible cacher" d'un élément par absolument à le positionner à l'écran afin de prévenir lecteurs d'écran à partir de sauter.)
- À partir de piquer WAI trucs pour l'école, je me souviens aussi de leurs spécifications, ont beaucoup de fonctionnalités visant à laisser les lecteurs d'écran comprendre la dynamique, basée sur AJAX applications web. (E. g. vous pouvez marquer un élément comme une table dont le contenu va changer de manière dynamique afin de lecteurs d'écran vais regarder pour les modifications). Généralement, WAI truc devrait être la ressource que vous êtes à la recherche de: w3.org/WAI
- Si le navigateur prend en charge Javascript ou pas, c'est à côté de la question. Nous devons construire nos sites de secours gracieusement comme navigateur fonctionnalités sont désactivées. Javascript peut être activée ou désactivée en fonction de l'humeur de l'utilisateur donc on ne peut pas supposer qu'il y aura toujours allumé. L'article qui a été souligné, en fait, suggère cet être considérés lors de la construction d'applications web.
- Si votre exigence est que votre application doit à tout prix être utilisable sans Javascript, quelle que soit la raison, puis il vous suffit d'accepter que vous aurez à sacrifier une bonne dose de dynamisme. (Amélioration Progressive aide, mais c'est laborieux et pour certaines fonctions, vous ne pouvez pas ne pas avoir AJAX.) Ce que je veux dire, c'est: le besoin de Javascript ne permet pas de rendre votre site inaccessible pour les déficients visuels. Ils ne sont pas (et je serais le pari là ne sont tout simplement pas) les utilisateurs qui vous ne pouvez pas l'utilisation de Javascript.
- Pour le mettre différemment: la création d'un site web accessible pour les utilisateurs de lecteur d'écran est un tout autre problème que de faire un site web utilisable pour des utilisateurs ayant désactivé Javascript. Pour l'ancien: lecture des WCAG, appliquer largement pris en charge WAI-ARIA attributs, ou l'équivalent hacks. (I. e. en concentrant l'élément dont le contenu a changé de façon dynamique.) Pour le second: ne pas utiliser de Javascript, ou les ajouter à l'aide de l'amélioration progressive des techniques. (Une Liste à Part fera un plaisir de vous couvrir dans un déluge d'articles sur ce sujet).
- Un point à noter: "amélioration progressive" n'est pas la même chose que "gracieux de secours" - ils sont des approches différentes pour le même problème. Le premier semble avoir une plus grande notoriété de ces jours. (I. e. vous commencez avec un serveur entièrement fonctionnel de l'application côté, et ajouter de la dynamique des comportements qui sont disponibles sur le client de l'utilisateur. E. g. remplacer régulièrement formulaire soumet avec l'AJAX fait valoir, d'ajouter dynamiquement des éléments de l'INTERFACE utilisateur pour tous les éléments qui doivent absolument être Javascript, etc.) Voir: docs.webplatform.org/wiki/tutorials/...
- Je vois votre point de vue. Il me semble que nous parlons de deux choses complètement différentes questions: l'Accessibilité et l'Amélioration Progressive. Je vais voir à partir de plusieurs sources que le Javascript peut être considéré comme omniprésent dans toutes les expériences de navigation quand il s'agit de l'accessibilité, et je devrais probablement la question la validité des allégations à l'effet contraire. Merci pour la clarification.
- Exactement. Même raisonnablement accessible le contenu sera inutilisable par des personnes qui choisissent de ne pas avoir Javascript activé (pour n'importe quelle raison, y compris mais non limité à l'utilisation d'un vieux-ish lecteur d'écran.) Rendre votre application utilisable par des personnes qui désactivent javascript implique qu'il sera accessible sur les comptes de l'être "de base", mais ils ne sont pas à la même préoccupation.
- Même aujourd'hui, il y a intégrer les lecteurs d'écran qui ne supportent pas ou ont très peu de prise en charge de JavaScript. Un site "accessible" et "travail sans JavaScript" ne sont pas deux choses distinctes. Cela ne signifie pas que vous devez avoir une totale parité JavaScript sur vs off. Évidemment, les expériences que vous pouvez fournir sera toujours plus riche avec JS sur. Cependant, tout essentiel à la mission devrait au moins fonctionner sans JS, ou vous êtes vissage sur certains de vos utilisateurs.
- Etre le garant de la @ChrisPratt, pas tous les lecteurs d'écran bien travailler avec JS. Aussi quelque chose que je ne vois pas mentionné ici, en tant que tel: il y a beaucoup de gens, moi y compris, qui utilisent des extensions comme NoScript volontiers bloc JS (et Flash, Java, ...) pour des raisons de sécurité. Que de manière sélective permettant de choses sur une base par site. J'ai pris l'habitude de la barre jaune en bas de mon Iceweasel me dire combien de scripts où bloqués. Ainsi, non seulement accessible peut-être une raison à l'appui de techniques comme le Gracieux de Secours ou d'Amélioration Progressive, mais la sécurité (pour le légèrement paranoïaque) ainsi.
- Voici un nouveau Angular.js plugin pour aider avec les questions d'accessibilité github.com/dequelabs/ngA11y
Vous devez vous connecter pour publier un commentaire.
Tous les mêmes principes s'appliquent, telles que l'utilisation de texte alt pour les images, de la bonne utilisation des rubriques, utilisez le code HTML(5) structures de contenu.
Vous pourriez être la création de via JavaScript, mais les lecteurs d'écran de la dernière d'environ 5 ans à comprendre que, et utiliser le navigateur de l'API d'accessibilité pour accéder au DOM. Le non-JavaScript aspect est tout simplement pas un problème d'accessibilité. Le nombre d'utilisateurs de lecteurs d'écran sans JavaScript est le même que la population en général, donc il vient à travers comme totalement formé HTML plutôt que de la crue de balisage que vous voyez dans le développement.
NB: je considère que l'amélioration progressive, une bonne approche, mais avec Angular.js vous êtes de décider d'avance de ne pas prendre cette approche. Si vous voulez savoir à propos de la performance et de l'amélioration progressive, je pense que ce répondu.
Bien sûr, vous ne l'utilisez pas Angular.js juste pour créer le contenu standard des pages, de sorte que vous besoin de se lever à la vitesse de la WAI-ARIA spécification, et comment utiliser ARIA en HTML. Le spécifie comment dynamiquement balisage des choses qui ne sont pas couverts par les traditionnels HTML pratiques, tels que des onglets, des arbres, des grilles, etc.
Pour un exemple pratique de WAI ARIA techniques dans la pratique, j'aurais un coup d'oeil à la Whatsock techniques guide de style.
Une différence par rapport aux sites web traditionnels sont comment vous gérer les mises à jour de page, que vous de gérer le focus clavier plutôt que d'actualiser la page. Mais en dehors de cela, WAI-ARIA est la chose à lire.
Traditionnellement, Angulaire n'a pas à encourager les développeurs à coder des interfaces utilisateur "le droit chemin"–il est trop facile de créer inaccessible élément personnalisé de directives (comme ngClick sur un
div
) et pas de l'accessibilité du soutien a été fourni. Cependant, il s'est amélioré avec la sortie de Angulaire 1.3 x et la ngAria module. Maintenant, en y ngAria dans votre application, certains attributs ARIA sont automatiquement appliquées de sorte que vous n'avez pas à les gérer.Par exemple, la
ngClick
directive s'applique désormaistabIndex="0"
etngKeypress
(tant que ces options ne sont pas handicapés), de sorte qu'il n'est pas si facile à créer inaccessible cliquez sur événements. ngAria sera également bientôt ajouterrole="button"
de communiquer dans le but d'un élément cliquable: cela peut être modifié pour d'autres rôles. Voir ce pull request pour plus d'informations: https://github.com/angular/angular.js/pull/10318Une autre façon ngAria peut aider c'est par l'ajout de
aria-disabled
pour toute utilisation deng-disabled
. Cela garantit des contrôles personnalisés désactivé par le cadre de seront accessibles par défaut, tels que:<md-button ng-disabled="true">
Avec ngAria, cela devient:
<md-button ng-disabled="true" aria-disabled="true">
Pour l'ensemble de la liste des attributs pris en charge, reportez-vous à la ngAria API docs: https://docs.angularjs.org/api/ngAria
ngAria va continuer à évoluer (et je souhaite que c'était juste cuit à la place d'un module), mais c'est génial de voir l'accessibilité enfin pris en charge par le noyau.
C'est encore à chacun de nous de garder l'accessibilité dans l'esprit et le code de manière responsable, mais Angulaire ne doit pas vous gêner plus longtemps. Alistair, la réponse à cette question a des ressources fantastiques: je serais certainement se réfèrent à ceux qui, pour des conseils sur la gestion du focus clavier, à l'aide de l'ARIA en HTML, et ainsi de suite. Vous pouvez également consulter la nouvelle Angular.js Guide du Développeur pour ngAria: https://docs.angularjs.org/guide/accessibility
Et encore une chose: si quelqu'un a des idées pour ngAria, par tous les moyens de créer un Github question ou soumettre une demande de pull! C'est un effort communautaire visant.
ngClick
sur unspan
élément, tandis qu'un lien simple, ce serait parfait. Ils n'utilisent tabIndex, rôle mais tout cela n'en fait pas un vrai lien, c'est toujours fondamentalement brisé. Il me rappelle des expressions comme "à réarranger les chaises longues sur le Titanic", "un emplâtre sur une jambe de bois". Donc, les gens devraient commencer par respecter les principes de base de l'hypertexte en premier.Vos plus grands problèmes avec AngularJS et l'accessibilité seront:
Autre que cela, c'est juste une autre application HTML.
Ce dépôt Github a certains Angular.js les directives et les services pour traiter certains de ces problèmes https://github.com/dequelabs/ngA11y