Accessibilité et tous ces cadres JavaScript
J'ai enquêté sur quelques-uns des cadres javascript tels que Backbone.js et Batman.js depuis un moment et tandis que je les aime vraiment, j'ai une chose qui me manque de revenir. Cette question est l'accessibilité.
En tant que développeur Web, j'ai toujours essayé de rendre mes sites Web et mes applications avec l'accessibilité à l'esprit, en particulier en utilisant l'idée d'une amélioration progressive.
Clairement hors de la boîte, ces nouveaux cadres JS ne se dégradent pas gracieusement, alors je me demandais quelles sont les réflexions des développeurs sur cette question et que faites-vous à ce sujet. Après tout, l'accessibilité d'un site Web/application n'est pas vraiment une chose facultative car elle fait partie de la loi dans de nombreux pays.
Peut-être que je suis juste trop zélée sur ce sujet et je n'apprécie pas à quel point les choses sont arrivées en termes d'accessibilité.
J'utilise un JS-Framework (Spine.js dans mon cas) sur mon dernier site. Je m'assure toujours que les navigateurs non-JS (certainement pas trop zélé: pensent que SEO) peut naviguer sur mon site et digérer le contenu.
Comme exemple, je vais avec une page de recherche avec des produits montrés. Les produits peuvent être paginés, filtrés, triés. Bien sûr, ceci est un exemple de l'idée généralisée.
PREREQ: Utilisez un moteur de modèle capable de rendu côté serveur et client. (J'utilise la moustache). Cela garantit que vous pouvez rendant des modèles sans JS- via une templature côté serveur et de rendant des modèles avec JS via une templature côté client.
Initialement: Rendez les produits à l'aide de modèles de moustache côté serveur. Inclure également un objet de bootstrapjson qui contient les mêmes produits dans le format JSON.
Initialement: tous les liens (page de détail du produit, pagination, tri, filtrage) sont de vraies URL côté serveur (aucune URL de hashbang)
Le résultat final est une page qui peut être navigue à 100% avec la pagination, le tri, le filtrage sans utilisation de JS.
toutes les URL de la pagination, de tri et de filtrage entraînent une demande visée au serveur, ce qui donne à son tour un nouvel ensemble de produits rendu. Rien de spécial ici.
JS-Activé - sur DOMLOAD:
- fetch the Bootstrapjson et créer des modèles de produits (utilisez vos fonctionnalités JS-Framework pour le faire).
- Ensuite, répercuter les produits à l'aide du même modèle de moustache, mais le font maintenant le côté client. (À nouveau en utilisant votre JS-Cadre).
- Visuellement, rien ne devrait changer (après que tout le rendu côté serveur et côté client a été effectué sur les mêmes modèles, avec le même modèle), mais au moins maintenant, il existe une liaison entre le modèle côté client et la vue.
- transformez les URL sur HASHBANG-URL. (E.g:/Produits/# Trier-Price-ASC) et utilisez vos fonctionnalités JS-Framework pour filer les événements.
maintenant, chaque URL (filtrage, pagination, tri) devrait aboutir à un changement d'état côté client, qui entraînerait probablement votre CAD-Framework une demande AJAX au serveur de retourner de nouveaux produits (au format JSON). RÉRENDER que cela à nouveau sur le client doit aboutir à votre vue mise à jour.
La partie logique du code pour gérer la demande AJAX dans 6. Sur le côté serveur est 100% identique au code utilisé dans 4. Différencié entre un appel AJAX et une demande ordinaire et cracher les produits de JSON ou HTML (en utilisant le côté de la moustache) respectivement.
Modifier: Update Jan 2013 Depuis que cette question/réponse reçoit une traction raisonnable, je pensais partager des AHA-AHA étroitement liés de la dernière année :
Croggez JSON et rendu informatique côté client avec votre client de choix de votre client (étapes 6. et 7. ci-dessus) peut être assez coûteuse de la CPU. Ceci, bien sûr, est particulièrement apparent sur les appareils mobiles.
J'ai effectué des tests pour renvoyer des extraits HTML sur Ajax (à l'aide de rendu de modèle de moustache côté serveur) 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 périphérique client, il peut aller jusqu'à 10 fois plus vite (1000ms -> 100ms), bien sûr votre kilométrage peut varier. (Pratiquement aucun changement de code nécessaire, puisque l'étape 7. pourrait déjà faire les deux)
Bien sûr, quand aucun JSON n'est retourné, il n'y a aucun moyen pour un MVC côté client de construire des modèles, gérez-vous des événements, etc. Alors pourquoi garder un CLIDEDIDE MVC du tout? Pour être honnête, avec des images de recherche même très complexes dans le recul, je n'ai pas beaucoup d'utilité pour les MVC côté client. Le seul avantage réel pour moi est qu'elles aident à séparer clairement la logique sur le client, mais vous devriez déjà le faire sur votre propre IMHO. Par conséquent, le dépôt de la clientèle est sur le TODO.
Oh oui, j'ai échangé dans la moustache avec Hogan (même syntaxe, un peu plus de fonctionnalités, mais la plupart de toutes les performances extrêmement performantes!) Est capable de le faire parce que j'ai changé le backend de Java à nœud.js (quels rochers imho)
Depuis que je suis un utilisateur et un développeur Web malvoyant visuellement, je vais faire trimer ici.
Ces cadres, dans mon expérience, n'ont pas été un problème à condition que les mesures appropriées soient prises en ce qui concerne l'accessibilité.
De nombreux lecteurs d'écran comprennent JavaScript et nous pouvons améliorer l'expérience en utilisant des éléments tels que l'attribut ARIA-LIVE de HTML5 pour alerter les lecteurs d'écran que les choses changent et nous pouvons utiliser l'attribut de rôle pour fournir des conseils supplémentaires aux scénaristes.
Cependant, le principe de base du développement Web avec JavaScript est que nous devons développer le site sous-jacent en premier, sans JavaScript, puis utiliser cette base solide, travaillant et testée pour fournir de meilleures caractéristiques. L'utilisation de JS ne doit pas être nécessaire pour acheter un produit, recevoir des services ou obtenir des informations. Et certains utilisateurs désactivent JavaScript parce qu'il interfère avec la façon dont leurs scénaristes fonctionnent.
Faire une colonne vertébrale complète.js ou un site knockout à partir de la mise au point sans égard à l'accessibilité entraînera quelque chose de s'approchant de "New Twitter" qui échoue fortement avec de nombreux scénaristes. Mais Twitter a une base solide et nous pouvons donc utiliser d'autres moyens pour accéder à la plate-forme. Grafting Backbone sur un site existant doté d'une API bien fabriquée est assez faisable et beaucoup de plaisir.
Donc, fondamentalement, ces cadres eux-mêmes ne sont plus une question d'accessibilité que JQuery lui-même - le développeur doit contenir une expérience utilisateur qui fonctionne pour tout le monde.
Chris Blouch (AOL) et Hans Hillen (TPG) ont eu une bonne présentation à ce sujet concernant JQuery, y compris le travail qu'ils faisaient pour examiner pour l'accessibilité. Rendre les applications Internet riches accessibles via jQuery Cela et une autre présentation connexe sur l'accessibilité des applications Internet HTML5 et riches ( http://www.paciellogroup.com/training/csun2012/ ) devrait vous intéresser.
Mon argent est sur le choix du cadre le plus accessible: JQuery offre une grande quantité de dégradation gracieuse ou d'amélioration progressive, ainsi qu'une très bonne concentration sur l'accessibilité. Également, indirectement, je vous aide à tester et à examiner plusieurs systèmes qui tirent parti de JQuery (sites Web du public drupal et intranet), de sorte que les défauts trouvés pour l'accessibilité se trouvent et acheminés dans le projet pour les correctifs.