辅助function和所有这些JavaScript框架

我一直在研究一些JavaScript框架，例如Backbone.js和Batman.js，虽然我真的很喜欢它们，但是我还有一个让我不断回头的小事情。 这个问题是可访问性。

作为一名Web开发人员，我一直试图使我的网站和应用程序的可访问性，特别是使用逐步增强的想法。

显然，这些新的JS框架并没有被优雅地降级，所以我想知道在这个问题上有什么其他开发者的想法，以及你在做什么。 毕竟一个网站/应用程序的可访问性不是一个可选的东西，因为它是许多国家的法律的一部分。

也许我只是在这个问题上过分热心，而不是赞赏在可达性方面有多远。

Answer 1

我在我的最新网站中使用js框架（在我的情况下是spine.js）。 尽pipe如此，我仍然确保非js浏览器（当然不会过分热心：认为search引擎优化）可以浏览我的网站并消化内容。

作为一个例子，我将与一个search页面展示产品。 产品可以被分页，过滤，分类。 当然这是一个广义思想的例子。

PREREQ：使用既可以呈现服务器端又可以呈现客户端的模板引擎。 （我用胡子）。 这可以确保您可以在不使用服务器端模板的情况下渲染模型，并通过客户端模板使用js渲染模型。

1. 最初：使用服务器端胡子模板呈现产品。 还包括一个“bootstrapJSON”对象，其中包含JSON格式的相同产品。

2. 最初：所有链接（产品细节页面，分页，sorting，过滤）是真正的服务器端URL（没有hashbangurl）

3. 最终结果是一个页面，可以导航100％的分页，sorting，过滤，而不使用JS。

4. 所有的分页，sorting，过滤URL都会导致对服务器的请求，从而导致产生一组新的产品。 这里没什么特别的

5. JS启用 – 在domload上：

   • 获取bootstrapJSON并从中创build产品模型（使用js-frameworkfunction来执行此操作）。
   • 之后，使用相同的胡须模板重新产品，但现在做客户端。 （再次使用你的js框架）。
   • 在视觉上，什么都不应该改变（毕竟服务器端和客户端渲染是在相同的模型上完成的，具有相同的模板），但是至less现在在客户端模型和视图之间存在绑定。
   • 将url转换为hashbang-urls。 （例如：/ products /＃sort-price-asc）并使用js-frameworkfunction来连接事件。

6. 现在每个（过滤，分页，sorting）url都会导致客户端状态改变，这可能会导致你的js-framework向服务器发送一个ajax请求来返回新的产品（采用JSON格式）。 在客户端重新渲染这个应该会导致你的更新视图。

7. 在服务器端处理6.中的ajax-request的代码的逻辑部分与在4中使用的代码100％相同。区分ajax-call和普通的请求，并用JSON或html （使用小胡子服务器端）。

编辑：更新1月2013由于这个问题/答案正在得到一些合理的牵引力，我想我会分享一些去年密切相关的阿哈 – 时刻：

• 吐出JSON并将其渲染到您的客户端mvc（上述步骤6和7）的客户端可能会非常昂贵cpu-wise。 当然，这在移动设备上尤其明显。

• 我已经做了一些testing，以在Ajax上返回html-snippets（使用服务器端胡子模板呈现），而不是像我上面的答案中所build议的那样在客户端上做同样的事情。 根据您的客户端设备，它可以高达10倍（1000毫秒 – > 100毫秒），当然你的里程可能会有所不同。 （实际上不需要更改代码，因为步骤7可能已经完成了）

• 当然，如果没有返回JSON，客户端MVC就无法构build模型，pipe理事件等。那么为什么要保留客户端的MVC呢？ 说实话，事后看来，即使是非常复杂的search页面，对于客户端mvc也没有多大用处。 对我来说，唯一真正的好处是他们有助于明确地分离客户端的逻辑，但是你应该已经在你自己的imho上做了这个。 因此，剥离客户端MVC就成了问题。

• 噢，我用Hogan交换了Mustache（同样的语法，更多的function，但最重要的是非常高性能！）能够这样做是因为我将后端从java切换到Node.js（这是岩石imho）

Answer 2

由于我是一位视觉障碍的用户和网页开发人员，所以我会在这里发言。

根据我的经验，这些框架只要在无障碍方面采取了适当的措施就没有问题。

许多屏幕阅读器了解JavaScript，作为开发者，我们可以通过使用HTML5的aria-live属性来改善体验，以提醒屏幕阅读器事情正在改变，我们可以使用angular色属性为屏幕阅读器提供额外的提示。

然而，用JavaScript开发网站的基本原则是，我们应该首先开发底层网站，不用JavaScript，然后使用这个坚实，可操作，经过testing的基础来提供更好的function。 JS不应该被要求购买产品，接受服务或获取信息。 有些用户禁用JavaScript，因为它干扰了屏幕阅读器的工作方式。

从头开始做一个完整的Backbone.js或Knockout网站，而不考虑可访问性会导致类似于“新的Twitter”，这与许多屏幕阅读器非常困难。 但Twitter有一个坚实的基础，所以我们可以使用其他手段来访问该平台。 将Backbone移植到具有精心devise的API的现有站点上是相当可行的，而且也非常有趣。

所以基本上，这些框架本身并不比jQUery本身更具可访问性 – 开发人员需要创build一个适用于所有人的用户体验。

Answer 3

任何需要 javascript才能从中获取内容的网页都可能会遇到与可访问性相关的挑战。 JavaScript框架的可访问性绝对是一个争论的问题，但是实际上，任何Web应用程序在dynamic提供内容时都会受到不利影响，无论使用何种框架。

没有银弹让您的网站可以访问，我当然不能说明每个JavaScript框架。 以下是关于如何防止您的网站在使用JavaScript时完全无法访问的一些想法：

• 遵循WCAG 2.0在客户端脚本和WCAG 2.0中的指导原则。

• 避免框架要求您完全通过javascript（如Uki.js ）或使用自己的专有标记（如Jo）生成页面的UI，控件和/或内容。 越接近静态（-ish），语义HTML内容，就越好。

• 考虑使用ARIAangular色，例如role="application"和aria-live属性来表示页面的dynamic区域。 随着时间的推移，越来越多的咏叹调angular色正在得到辅助设备的支持，所以使用这些咏叹调属性在您可以将它们适当添加到您的应用中时是有意义的。

  根据JS库，检查他们的来源，看看他们是否输出任何咏叹调angular色。 他们可能并不完美，但它会certificate他们正在考虑辅助器材。

• 尽可能将JavaScript作为一种增强而不是必要的手段。 尝试提供替代方法或工作stream来访问不需要dynamic页面更新的重要信息。

• testing并validation您的应用程序与您的用户！ 与使用辅助设备的人进行一些用户testing会话，或者使用networking软件进行其他困难。 没有什么能够帮助你certificate你的网站可以访问，而不仅仅是看真人使用它。

最后一点是最重要的，尽pipe很多人试图逃避它。 不pipe技术如何，事实上你正在开发一个人们将使用的应用程序。 没有任何机器或理论将永远无法完全validation您的应用程序是可用的，但你不是build立它的机器无论如何。 对？ 🙂

Answer 4

Chris Blouch（AOL）和Hans Hillen（TPG）在jQuery方面做了很好的介绍，包括他们在检查可访问性方面所做的工作。 使富互联网应用程序可以通过JQuery访问关于HTML5和富互联网应用程序的可访问性（ http://www.paciellogroup.com/training/CSUN2012/ ）的另一个相关介绍应该是你感兴趣的。

我的钱是select最容易访问的框架：jQuery提供了大量的优雅退化或渐进式增强后备，以及对可访问性的整体非常好的关注。 此外，我间接地帮助testing和审查了几个利用jQuery（Drupal公共和Intranet网站）的系统，以便发现可访问性的缺陷并将其路由回项目进行修复。