Accessibilité et tous ces frameworks JavaScript

Question

J'ai étudié quelques-uns des frameworks JavaScript tels que Backbone.js et Batman.js pendant un certain temps et alors que je l'aime vraiment, j'ai un tatillonne chose que je reviens. Cette question est celle de l'accessibilité.

En tant que développeur web, j'ai toujours essayé de faire mes sites web et des applications dans un souci d'accessibilité, en particulier à l'aide de l'idée d'une amélioration progressive.

Clairement de sortir de la zone de ces nouveaux frameworks JS ne pas dégrader gracieusement, alors je me demandais quels sont les autres développeurs pensées sur cette question et que faites-vous à ce sujet. Après tout, l'accessibilité d'un site web / application n'est pas vraiment une option de chose: il fait partie de la loi dans de nombreux pays.

Peut-être que je suis juste trop zélé sur ce sujet, et non pas d'apprécier dans quelle mesure les choses ont venue en termes d'accessibilité.

Answer 1

J'utilise un js-cadre (spine.js dans mon cas) dans mon dernier site. Je assurez-vous que les non-js les navigateurs (certainement pas plus zélés: pensez SEO) peut naviguer dans mon site et en assimiler le contenu.

Un exemple, je m'en vais avec la recherche-page avec des produits indiqués. Des produits peut être contacté, de filtrer, trier. Bien sûr, ceci est un exemple de la généralisation de l'idée.

PREREQ: utilisation d'un modèle à moteur qui peuvent à la fois de rendu côté serveur et côté client. (J'utilise la Moustache) . Cela vous permet de vous rendre modèles sans js - par le biais de serveur-côté template, et de rendre les modèles avec js côté client création de modèles.

1. Dans un premier temps: rendre les produits à l'aide de server-side moustache-modèle. Également inclure une "bootstrapJSON'objet qui contient les mêmes produits en format JSON.

2. D'abord: tous les liens (produit-page de détails, la pagination, tri, filtrage) sont de véritables serveur-côté de l'url (pas de hashbang url)

3. Le résultat de fin est une page qui peut être parcouru à 100% avec la pagination, tri, filtrage, sans l'utilisation de JS.

4. tous pagination,tri, filtrage de l'url l'objet d'une demande au serveur, ce qui entraîne à son tour une nouvelle série de produits en cours de rendu. Rien de spécial ici.

5. JS activé - sur domload:

   • récupérer le bootstrapJSON et faire le produit-modèles (utilisez votre js-cadre dispose pour ce faire) .
   • Par la suite rerender les produits en utilisant la même moustache-modèle, mais maintenant le faire côté client. (Encore une fois à l'aide de votre js-cadre).
   • Visuellement, rien ne devrait changer (après tout côté serveur et côté client, le rendu a été fait sur les mêmes modèles, avec le même modèle), mais au moins, maintenant, il y a une liaison entre le côté client, le modèle et la vue.
   • transformer les urls à hashbang-url. (e.g: /produits/#tri-prix-asc ) et l'utilisation de votre js-cadre de fonctionnalités pour le fil des événements.

6. maintenant, chaque (filtrage, la pagination, tri ) url devrait aboutir à un client-côté de changement d'état, ce qui aura probablement pour résultat de votre js-cadre de faire un ajax-demande au serveur de renvoyer de nouveaux produits (au format JSON) . Nouveau rendu cela de nouveau sur le client devrait entraîner la mise à jour de votre point de vue.

7. La logique de la partie du code pour gérer l'ajax-demande à 6. sur le côté serveur est 100% identique au code utilisé dans les 4. Faire la distinction entre une ajax-appel et ordinaires de la demande et de cracher les produits en JSON ou en html (à l'aide de la moustache côté serveur), respectivement.

EDIT: UPDTATE JAN 2013 Depuis que cette question/réponse est d'obtenir raisonnable de traction je pensais que je voudrais partager quelques étroitement liées aha-moments de la dernière année:

• Cracher JSON et le rendu côté client avec votre côté client mvc de choix (étapes 6. et 7. ci-dessus) peuvent être assez coûteux cpu-sage. Bien sûr, ceci est particulièrement visible sur les mobiles des appareils.

• J'ai fait quelques tests pour revenir html-extraits sur ajax (à l'aide de server-side moustache-modèle de rendu) au lieu de faire la même chose sur le côté client, comme suggéré dans ma réponse ci-dessus. En fonction de votre client périphérique, il peut être jusqu'à 10 fois plus rapide (1000ms -> 100ms) , votre kilométrage peut varier. (pratiquement pas de modifications de code nécessaires, depuis l'étape 7. pourrait déjà faire les deux)

• Bien sûr, lorsqu'il n'JSON est retourné il n'y a aucun moyen pour un client-côté MVC pour construire des modèles, la gestion des événements, etc. Alors pourquoi garder un client MVC? Pour être honnête, même avec de très complexe searchpages avec le recul, je n'ai pas beaucoup d'utilisation pour le client, de côté mvc à tous. Le seul réel avantage pour moi est qu'elles aident à séparer clairement la logique sur le client, mais vous devriez déjà être en train de faire sur votre propre à mon humble avis. Par conséquent, enlever côté client MVC est sur la todo.

• Oh oui, j'ai échangé dans le Moustache avec Hogan (même syntaxe, un peu plus de fonctionnalités, mais la plupart de tous extrêmement performant!) A été en mesure de le faire parce que j'ai changé le backend de java à Node.js (qui berce mon humble avis)

Answer 2

Depuis que je suis une déficience visuelle de l'utilisateur et développeur web, je vais mentionner ici.

Ces cadres, dans mon expérience, n'est-ce pas été un problème puisque les mesures appropriées soient prises à l'égard de l'accessibilité.

De nombreux lecteurs d'écran comprendre JavaScript, et nous que les développeurs peuvent améliorer l'expérience en utilisant des choses comme le HTML5, l'attribut aria-live pour alerter les lecteurs d'écran que les choses sont en train de changer, et on peut utiliser l'attribut rôle de fournir des conseils supplémentaires pour les lecteurs d'écran.

Toutefois, le principe de base du développement web avec JavaScript, c'est que nous devons développer les sous-jacents au premier site, sans JavaScript, et ensuite utiliser que solide, de travail, et testé fondation pour fournir de meilleures fonctionnalités. L'utilisation de JS ne devrait pas être nécessaire pour l'achat d'un produit, de recevoir des services ou obtenir des informations. Et certains utilisateurs de désactiver le JavaScript, car elle interfère avec la façon dont leurs lecteurs d'écran de travail.

Faire un Backbone.js ou knock-out du site à partir du sol sans tenir compte de l'accessibilité s'entraîner dans quelque chose qui s'apparente à de "nouvelles Twitter", qui ne parvient pas extrêmement dur avec beaucoup de lecteurs d'écran. Mais Twitter a une base solide et nous pouvons donc utiliser d'autres moyens d'accéder à la plate-forme. La greffe épine Dorsale sur un site existant qui a conçu l'API est tout à fait faisable, et beaucoup de plaisir, aussi.

Donc, fondamentalement, ces cadres eux-mêmes ne sont pas plus d'un problème d'accessibilité que de jQUery - le développeur doit concevoir une expérience utilisateur qui fonctionne pour tout le monde.

Answer 3

Toute page web qui nécessite javascript afin d'obtenir le contenu de celle-ci sera probablement rencontré liés à l'accessibilité des défis. L'accessibilité des frameworks JavaScript est certainement une question de prétention, mais vraiment, n'importe quelle application web souffre des inconvénients lorsque le contenu est fourni de manière dynamique, quel que soit le cadre.

Il n'y a pas de solution miracle pour s'assurer que votre site sera accessible, et je ne peux certainement pas compte de tous les framework JavaScript. Voici quelques idées sur la façon dont vous pouvez éviter que votre site soit totalement inaccessible lors de l'utilisation de JavaScript:

• Suivez les directives WCAG 2.0 sur un script côté client, et WCAG 2.0 en général.

• Éviter de cadres qui nécessitent la génération de la page de l'INTERFACE utilisateur, les contrôles et/ou du contenu entièrement à l'aide de javascript telles que Uki.jsou ceux qui utilisent leur propre balisage, à l'instar de Jo. Le plus vous pouvez coller avec de la statique(-ish), la sémantique du contenu HTML, le mieux vous serez.

• Envisager l'utilisation d' ARIA rôles tels que role="application" et de la aria-live d'attribut pour indiquer les zones de votre page qui sont dynamiques. De plus en plus et aria rôles sont pris en charge par des dispositifs d'assistance comme le temps passe, de sorte que l'utilisation de ces attributs aria de sens que si vous pouvez les ajouter à votre application de manière appropriée.

  En termes de bibliothèques JS, vérifier leur source et de voir si leur sortie toute aria rôles. Ils pourraient ne pas être parfaitement accessible, mais il serait de démontrer qu'ils envisagez d'appareils et accessoires fonctionnels.

• Dans la mesure du possible, traiter JavaScript comme une amélioration plutôt qu'une nécessité. Essayez de fournir des méthodes alternatives ou des flux de travail à l'accès à l'information importante qui ne nécessitent pas de page dynamique des mises à jour.

• Tester et valider votre application avec vos utilisateurs! Faire des séances de tests avec des personnes qui utilisent des appareils fonctionnels ou qui ont d'autres difficultés à l'aide de logiciel de web. Rien ne pourra vous aider à prouver votre site est accessible plus que de regarder les vrais gens de l'utiliser.

Le dernier point est le plus important, bien que beaucoup tentent de s'échapper. Quelle que soit la technologie, le fait demeure que vous êtes du développement d'une application que les gens vont utiliser. Pas de machine ou de la théorie sera jamais capable de parfaitement valider votre demande comme étant utilisable, mais vous n'êtes pas à la construire des machines de toute façon. Droit? :)

Answer 4

Chris Blouch (AOL) et Hans Hillen (TPG) ont connu une bonne présentation sur ce sujet jQuery, y compris le travail qu'ils font dans l'examen de l'accessibilité. Faire des Applications Internet Riches Accessibles Par le biais de JQuery, l'un et l'autre lié à la présentation sur l'Accessibilité de HTML5 et des Applications Internet Riches (http://www.paciellogroup.com/training/CSUN2012/) devrait être d'intérêt pour vous.

Mon argent est sur le choix le plus accessible framework: jQuery fournit une grande partie de la dégradation gracieuse ou de l'amélioration progressive de secours ainsi que d'un ensemble assez bon accent sur l'accessibilité. Aussi, indirectement je aider à tester et examiner plusieurs systèmes qui tirent parti de jQuery (Drupal public et des sites Intranet) tels que les défauts trouvés pour l'accessibilité sont trouvés et routé sur le projet pour des corrections.