Joh*_*ing 66 javascript accessibility sproutcore javascript-framework backbone.js
我已经研究了一些JavaScript框架,比如Backbone.js和Batman.js一段时间,虽然我真的很喜欢它们,但我还有一个让我不断回头的琐事.那个问题是可访问性.
作为一名网络开发人员,我一直试图让我的网站和应用程序考虑到可访问性,特别是使用渐进增强的想法.
显而易见的是,这些新的JS框架并没有优雅地降级,所以我想知道其他开发人员对这个问题的看法以及你在做什么.在所有网站/应用程序的可访问性实际上不是一个可选的东西,因为它是许多国家的法律的一部分.
也许我只是对这个问题过于热心,而不是欣赏在可访问性方面取得了多大进展.
Gee*_*Jan 60
我在我最新的网站上使用了js-framework(在我的例子中是spine.js).我仍然确保非js浏览器(当然不会过于热心:认为搜索引擎优化)可以浏览我的网站并消化内容.
作为一个例子,我将使用搜索页面显示产品.可以对产品进行分页,过滤和排序.当然,这是一般概念的一个例子.
PREREQ:使用可以呈现服务器端和客户端的模板引擎.(我用胡子).这样可以确保您可以通过服务器端模板渲染没有js的模型,并通过客户端模板渲染具有js的模型.
最初:使用服务器端的胡须模板渲染产品.还包括一个'bootstrapJSON'对象,它包含JSON格式的相同产品.
最初:所有链接(产品详细信息页面,分页,排序,过滤)都是真正的服务器端URL(没有hashbang URL)
最终结果是一个页面,可以通过分页,排序,过滤100%导航,而无需使用JS.
所有分页,排序,过滤URL都会向服务器发出请求,从而导致生成一组新的产品.这里没什么特别的.
JS启用 - 在domload上:
现在每个(过滤,分页,排序)url都应该导致客户端状态更改,这可能会导致js-framework向服务器发出ajax请求以返回新产品(以JSON格式).在客户端上再次重新生成此选项应该会生成更新后的视图.
在服务器端处理6.中的ajax-request的代码的逻辑部分与4中使用的代码100%相同.区分ajax-call和普通请求并以JSON或html吐出产品(分别使用小胡子服务器端).
编辑:2013年1月更新 由于这个问题/答案正在得到一些合理的牵引力,我想我会分享一些与去年密切相关的时刻:
吐出JSON并使用您选择的客户端mvc(上面的步骤6和7)将其呈现在客户端,这可能是非常昂贵的cpu.当然,这在移动设备上尤为明显.
我已经做了一些测试来返回ajax上的html-snippets(使用服务器端胡子模板渲染),而不是像我上面的回答中建议的那样在客户端做同样的事情.根据您的客户端设备,它可以快10倍(1000毫秒 - > 100毫秒),当然您的里程可能会有所不同.(几乎不需要更改代码,因为步骤7已经可以同时执行)
当然,当没有返回JSON时,客户端MVC无法构建模型,管理事件等.那么为什么要保留客户端MVC呢？说实话,事后看来,即使是非常复杂的搜索页面,我对客户端mvc也没什么用处.对我来说唯一真正的好处是它们有助于清楚地区分客户端上的逻辑,但是你应该已经在你自己的imho上做了.因此,剥离客户端MVC就是todo.
哦,是的,我在胡子与霍根交易(相同的语法,更多的功能,但最重要的是非常高效!)能够这样做,因为我将后端从java切换到Node.js(摇滚imho)
Bri*_*gan 24
由于我是一个有视力障碍的用户和网络开发人员,我会在这里说话.
根据我的经验,如果在可访问性方面采取适当的步骤,这些框架就不是问题.
许多屏幕阅读器都了解JavaScript,我们作为开发人员可以使用HTML5的aria-live属性来提高体验,以提醒屏幕阅读器事情正在发生变化,我们可以使用role属性为屏幕阅读器提供额外的提示.
但是,使用JavaScript进行Web开发的基本原则是我们应该首先开发底层站点,而不使用JavaScript,然后使用这个可靠,工作和测试的基础来提供更好的功能.购买产品,接收服务或获取信息不应要求使用JS.有些用户会禁用JavaScript,因为它会干扰屏幕阅读器的工作方式.
从头开始做一个完整的Backbone.js或Knockout站点而不考虑可访问性将导致类似于"新推特"的东西,这对于许多屏幕阅读器来说都非常困难.但Twitter有坚实的基础,因此我们可以使用其他方式访问该平台.将Backbone移植到具有精心设计的API的现有网站上是非常可行的,而且非常有趣.
基本上,这些框架本身不再是jquery本身的可访问性问题 - 开发人员需要创建适合每个人的用户体验.
Chr*_*ris 16
任何需要 javascript以便从中获取内容的网页都可能会遇到与可访问性相关的挑战.JavaScript框架的可访问性肯定是争用的问题,但实际上,无论使用何种框架,任何Web应用程序在动态提供内容时都会遇到弊端.
没有灵丹妙药可以确保您的网站可以访问,我当然无法解释每个JavaScript框架.以下是关于如何在使用JavaScript时阻止您的网站完全无法访问的一些想法:
遵循WCAG 2.0关于客户端脚本和WCAG 2.0的指导原则.
避免要求您完全通过诸如Uki.js之类的 javascript 或使用自己的专有标记(如Jo)生成页面的UI,控件和/或内容的框架.你越接近静态(-ish),语义HTML内容,你就越好.
考虑使用ARIA角色(例如role="application"和aria-live属性)来指示页面中动态的区域.随着时间的推移,辅助设备正在支持越来越多的咏叹调角色,因此当您可以适当地将它们添加到您的应用程序时,使用这些咏叹调属性是有意义的.
就JS库而言,检查它们的来源并查看它们是否输出任何咏叹调角色.它们可能不是完全可以访问的,但它会证明它们正在考虑辅助设备.
尽可能将JavaScript视为增强而非必需.尝试提供替代方法或工作流来访问不需要动态页面更新的重要信息.
与您的用户一起测试并验证您的应用!与使用辅助设备或使用网络软件有其他困难的人进行一些用户测试会话.没有任何东西可以帮助您证明您的网站可以访问,而不是观看真人使用它.
最后一点是最重要的,尽管许多人试图逃避它.无论技术如何,事实仍然是您正在开发人们将使用的应用程序.任何机器或理论都无法完美地验证您的应用程序是否可用,但无论如何您都无法为机器构建它.对？:)