可访问性总结

       关注可访问性和可用性是前端开发中很重要的一环,很可惜我在以前的项目中,没有好好地去实践这一点。最近看了《ppk谈JavaScript》这本书,获益匪浅。所以下面的内容将对该书所阐述的可访问性问题进行总结(主要对于JavaScript)。

可访问性(Accessibility)是指当浏览器禁用了CSS或JavaScript后,网页依然是可阅读和可理解的。要保证任何人在任何环境下都能阅读网站的内容、使用导航、以及执行类似于提交表单这样常规的操作。特别要关注到一些残障人士的情况,以及各种用户代理(桌面浏览器、移动设备、屏幕阅读器等)。

        可访问性问题一般会发生在以下几种情况:

        1、无脚本

        某些浏览器不支持或不完全支持JavaScript,也有可能是用户禁用了JavaScript,此时要确保你的页面功能还是可以运作的。

        2、没有鼠标

        有些用户不用鼠标,而是使用按键来浏览网页,可能是因为习惯使用键盘的快捷操作,也可能是因为身体的某些原因而导致无法使用鼠标,比如手部残疾等。为了兼容键盘,除了普通的鼠标事件,还需要定义一些额外事件。比如,因为onmouseover事件不能兼容键盘,所以可以再用上focus事件。

        3、屏幕阅读器

        有些人不能使用常规的浏览器,如盲人和视力严重受损的人。屏幕阅读器就是可以讲网页的内容大声朗读出来的程序。绝大多数屏幕阅读器都是运行在现有浏览器上的程序,因此也支持JavaScript。但是屏幕阅读器有两个严重的问题。

           a. 线性特性

       屏幕阅读器只能线性地读取网页,通常是依照源代码的顺序。但是有可能页面会被改变,而且改变的部分已经被朗读过了。因此需要让屏幕滚动回被改变的地方,如表单头部。使用location.hash属性

          b. 对事件的混乱支持

       屏幕阅读器对事件的支持是及其混乱和令人困惑的,而且屏幕阅读器用户使用键盘输入,因而不支持鼠标事件。也许新版本的屏幕阅读器会有所改变,但最好不要抱有期望。所以最好的解决办法是让老版本的屏幕阅读器用户完全禁用Javascript,无脚本页面是比较好控制的。

        二、可访问性和可用性

        可访问性是解决能不能用的问题,而可用性是解决好不好用的问题。

        可用性通常是指页面是否易用、用户体验是否良好。比如当使用Ajax异步应用程序的时候,与服务器交互不需要等待,也不需要重载页面,可用性将大大提高。JavaScript的用途是在网站上增加一个可用性层,因此禁用JavaScript的时候可用性必会受损。完美的可访问性并不表示要给无脚本用户和有脚本用户提供相同的功能。因此如果可以使有脚本用户的可用性增强,那就去做吧。

        三、可访问性规则

        始终都要用你自己的常识来检视这些规则。

        1、条理分明的HTML

        所有重要的、必不可少的内容都要被硬编码进HTML中,如内容、导航和重要的表单等。硬编码的链接必须有href,保证没有脚本的时候链接是可以正常访问的。

        2、产生对脚本用户有意义的内容

        假如你有一个链接,点击调用一段Ajax脚本,但href属性没有合适的值(如没有合适的HTML页面可以代替),那就使用JavaScript来产生该链接,而不要让href属性等于“#”。这样对无脚本用户该链接是不可见的,因为只有有脚本的时候才有意义。

        当你要隐藏页面的某些部分,让他们在点击某个链接或标题后才显示出来的时候,使用JavaScript和CSS结合进行隐藏,而不要直接使用CSS隐藏,这样当禁用了JavaScript的时候它们不会被隐藏,保持了可访问性。

         3、重定向用户

         有时候解决可访问性问题最好的办法就是为你的网站同时创建一个无脚本版本和一个有脚本版本。

应遵循两个原则:1. 页面入口应该是一个无脚本页面 ; 2、启动一段脚本检查是否支持有脚本版本,然后使用location.replace()方法重定向到有脚本页面。记住不要使用locatin.href属性,因为会在浏览器的历史记录中创建一条新纪录,这样当使用后退按钮的时候会先跳到无脚本页面,然后马上又跳到有脚本页面,使后退按钮失效,破坏了可用性。而replace()方法则会覆盖旧页面在浏览器中的历史记录。

        4、键盘用户

        因为不能使用鼠标,所以应当总是定义鼠标事件的替代方案。而且应该把焦点落在可点击的元素上,在所有浏览器上都能可靠地获得键盘焦点的元素只有链接、表单域和按钮。

        以上只是对书上内容的总结,我相信这方面的学问还很大,需要在项目中不断地实践、总结,才能有更深的体会。关注可访问性问题其实已经关乎到一个前端工程师的良知层面了,特别要照顾到一些残障人士。

       欢迎指教和补充!:-D


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值