辅助功能和所有这些JavaScript框架 [英] Accessibility and all these JavaScript frameworks
问题描述
我已经调查了一些JavaScript的框架，如Backbone.js的和Batman.js的一段时间，虽然我真的很喜欢他们，我有我继续回来一个琐碎的事情。这个问题是可达性。
I've been investigating a few of the JavaScript frameworks such as Backbone.js and Batman.js for a while and whilst I really like them, I have one niggling thing that I keep coming back to. That issue is accessibility.
作为一个web开发者，我一直试图让我的网站和应用程序时考虑辅助，尤其是在使用渐进增强的想法。
As a web developer I've always tried to make my websites and applications with accessibility in mind, especially using the idea of progressive enhancement.
显然，开箱即用这些新的JS框架不正常降级，所以我想知道什么是在这个问题上其他开发人员的想法和你在做这件事。一个网站的所有可访问后/应用程序是不是一个真正的可选的东西，因为它是在许多国家法律的一部分。
Clearly out of the box these new JS frameworks don't gracefully degrade, so I was wondering what are other developers thoughts on this issue and what are you doing about it. After all the accessibility of a website / app isn't really an optional thing as it's part of the law in many countries.
也许我只是过于热心于这个问题上，而不是AP preciating多远事情已经走在无障碍方面。
Maybe I'm just being overly zealous on this subject, and not appreciating how far things have come in terms of accessibility.
推荐答案
我用我的最新的网站的js框架（在我的情况spine.js）。不过我确保非JS浏览器（当然不超过热心：认为搜索引擎优化），可以浏览我的网站和消化的内容。
I use a js-framework (spine.js in my case) in my latest site. Still I make sure that non-js browsers (certainly not over zealous: think SEO) can navigate my site and digest the contents.
作为一个例子，我用的产品搜索页面会被显示。产品可以分页，过滤，排序。当然这是广义的思想的一个例子。
As an example I'm going with a search-page with products being shown. Products can be paged, filtered, sorted. Of course this is an example of the generalized idea.
preREQ：使用模板引擎既能呈现服务器端和客户端。 （我用胡子）。这可以确保您可以渲染模型，而无需通过服务器端模板js-，并通过客户端模板JS渲染模型。
PREREQ: use a template-engine that can both render server-side and client-side. (I use Mustache) . This makes sure you can render models without js- through server-side templating, and render models with js through client-side templating.
-
最初：渲染使用服务器端的小胡子模板的产品。还包括一个bootstrapJSON'对象其中包含JSON格式相同的产品。
Initially: render the products using server-side mustache-template. Also include a 'bootstrapJSON'-object which contains the same products in JSON-format.
最初：所有链接（产品详细页面，分页，排序，过滤）是真正的服务器端的URL（无hashbang网址）
Initially: all links (product-detail page, paging, sorting, filtering) are real server-side urls (no hashbang urls)
最终的结果是，可以进行导航100％与分页，排序，而无需使用JS的过滤的网页。
The end-result is a page which can be navigated 100% with paging, sorting, filtering without the use of JS.
所有分页，排序，过滤网址导致对服务器，它在一组新的产品又导致所呈现的请求。这里没有什么特别。
all paging,sorting, filtering urls result in a request to the server, which in turn results in a new set of products being rendered. Nothing special here.
JS-启用 - 对domload：
JS-enabled - on domload:
- 获取bootstrapJSON并从中使产品的模型（用你的js框架功能来做到这一点）。
- 之后重新呈现用产品相同的小胡子模板，但现在做客户端。 （再次使用你的js框架）。
- 在视觉上没有什么应该改变（所有的服务器端和客户端呈现于同一模型完成后，用相同的模板），但至少现在有一个客户端模型和视图之间的结合。
- 变换网址以hashbang的URL。 （例如：/产品/＃排序价格ASC），并用JS-框架功能接线的事件。
现在每一个（过滤，分页，排序）URL应该导致客户端状态的变化，这可能会导致你的js框架做一个Ajax请求到服务器返回的新产品（以JSON格式）。在客户端上再次重新渲染这将导致更新的视图。
now every (filtering, paging, sorting ) url should result in a client-side state-change, which would probably result in your js-framework doing an ajax-request to the server to return new products (in JSON-format) . Rerendering this again on the client should result in your updated view.
在code来处理6.服务器端了ajax请求的逻辑部分是100％相同的AJAX调用和之间的4微分使用code一个普通的请求，并在JSON或HTML（使用小胡子服务器端）分别吐出的产品。
The logic part of the code to handle the ajax-request in 6. on the server-side is 100% identical to the code used in 4. Differentiate between an ajax-call and an ordinary request and spit out the products in JSON or html (using mustache server-side) respectively.
编辑：UPDTATE 2013年1月
由于这个问题/答案是得到一些合理的牵引我想我会分享过去一年的一些密切相关的AHA-时刻：
UPDTATE JAN 2013 Since this question/answer is getting some reasonable traction I thought I'd share some closely-related aha-moments of the last year:
-
随地吐痰了JSON和您选择的客户端MVC渲染它的客户端（步骤6和7以上）可以是pretty昂贵的CPU明智的。这当然是对移动设备尤为明显。
Spitting out JSON and rendering it client-side with your client-side mvc of choice (steps 6. and 7. above) can be pretty costly cpu-wise. This, of course, is especially apparent on mobile-devices.
我（使用服务器端的小胡子模板渲染），而不是做在客户端一样我的回答上面的建议做了一些测试，以对阿贾克斯返回HTML-片段。根据您的客户端设备上它可以更快高达10倍（1000毫秒 - > 100ms的），当然你的里程可能会有所不同。 （实际上没有code的变化需要，因为第7步已经可以做到两者）
I've done some testing to return html-snippets on ajax (using server-side mustache-template rendering) instead of doing the same on the client-side as suggested in my answer above. Depending on your client-device it can be up to 10 times faster (1000ms -> 100ms) , of course your mileage may vary. (practically no code changes needed, since step 7. could already do both)
当然，当没有返回JSON有没有办法让客户端MVC来建立模型，管理事件，等等。那么，为什么保持客户方MVC呢？说实话，即使有事后很复杂searchpages我没有对客户端MVC的多大用处都没有。唯一真正的好处，在我看来，他们帮助清楚地分离出的逻辑在客户端上，但你应该已经这样做，你自己恕我直言。因此，剔除客户端MVC是在TODO上。
Of course, when no JSON is returned there's no way for a client-side MVC to build models, manage events, etc. So why keep a clientside MVC at all? To be honest, with even very complex searchpages in hindsight I don't have much use for client-side mvc's at all. The only real benefit to me is that they help to clearly separate out logic on the client, but you should already be doing that on your own imho. Consequently, stripping out client-side MVC is on the todo.
噢，我的胡子成交霍根（语法相同，更多的功能，但最重要的是非常高性能的！）之所以能够这样做，因为我改用后端从Java到的Node.js（其中岩石恕我直言）
Oh yeah, I traded in Mustache with Hogan (same syntax, a bit more functionality, but most of all extremely performant!) Was able to do so because I switched the backend from java to Node.js (which rocks imho)
这篇关于辅助功能和所有这些JavaScript框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
