详解腾讯网文章页无障碍方案

中国农历年交替之际,发布一些无障碍方案,供大家讨论和参考。

阅读新闻是屏幕阅读器用户上网的一个重要活动,对于承载着最终信息的页面,其访问量和重要性是整个站点的重中之重,特别是对于门户网站。无论在北京五道口搜狐大厦中的宣传语,还是在腾讯网的项目组架构上都能看到这一点。

屏幕阅读器用户如何浏览文章页?

屏幕阅读器依靠焦点来整合DOM本身语义,属性以及标记的内容,那么阅读的顺序,一般来说就是基于DOM的顺序,所以这里重新强调一次,视觉顺序和DOM顺序的问题,作为一个重构者,你要可以分辨出信息的重要性,从而编写出符合逻辑的DOM顺序。那么一般的文章页面,其DOM顺序从上到下基本为:全站导航、登录、广告、面包屑、搜索、文章标题、文章相关信息、正文、其他信息、评论。

参见:李克强总理看完留守儿童的相关新闻

http://news.ifeng.com/mainland/special/2014chunjie/content-3/detail_2014_01/27/33418402_0.shtml

http://news.sohu.com/20140128/n394302855.shtml

http://news.sina.com.cn/c/2014-01-28/020529362593.shtml

http://news.163.com/14/0127/14/9JJR959V00014JB6.html

http://news.qq.com/a/20140128/000817.htm

先来还原下一般的屏幕阅读器用户是如何浏览正文的(这也是最重要的目标,难道你会到新闻页面去查看其他什么其他东西么?当然可能网易不太一样,因为网易跟帖在我看来比新闻正文还有吸引力)。首先页面载入,用户听到title,由于各个新闻页面的title采用倒装面包屑,所以首先听到的就会是该页面(该文字的标题),从而了解文字标题和访问正确与否。接着按tab键或者是光标键,遍历到正文,浏览正文。刚才说过,在正文前面有很多功能组件,一个一个的听,越过起码小50个元素(带有内容的DOM和表单元素以及对象),然后开始听正文。正文前面的这些东西对目标来说,是“无用”的,快速的越过它们是我们需要做的。而很多用户其实也是通过自己的办法这么做的。

有一些经验的用户是这样操作的,他们在听过一定次数的文章之后,就会发现,好像这个网站所有的文章页面的架构几乎都是一样的。这事一个重要的发现,他们没有视觉,你想一下用听觉来辨认两个东西是相同的是以一件多么困难的事情。但他们发现每个新闻页面技术是一样的时候,他们就会视图寻找一些可以快速到达正文方式,比如一般的正文前面都有一个搜索框,这个搜索框是一个表单,这些有经验的用户就会使用读屏软件本身拥有的遍历表单的快捷键来先遍历表单到这个搜索框,比如e键。这样基本按一下就到这个搜索框了,然后再按几下光标键就到达正文处了。

作为网站作者,我们可以通过一点点的代码,让用户可以通过某些快捷键快速到达正文的位置,具体技术并不复杂,腾讯网文章页讲数字3作为快捷键,为正文区域添加了tabindex=”-1″,然后使用js将焦点移动到这个区域上,从而完成到达正文的功能。

为什么是tabindex=”-1″?div本身并不是一个可以聚焦的元素,所以需要设置tabindex来使其可以被聚焦,理想的值应该是tabindex=”0″(数字零),这样可以使用鼠标、键盘、js来聚焦。但是为什么设置了tabindex=”-1″呢?这是因为所在环境的无奈,大家知道当一个元素可以被聚焦的时候,当其拥有焦点,ie浏览器中相关区域产生一个虚边,而chrome等浏览器中该元素会有一个比较粗的高亮的边框,比如黄色。这种虚边或者粗线边框是产品经理所不能接纳的,他们认为不美。没办法,谁叫团队不是技术主导呢。只能如此了,所以设置成-1就避免了这些个问题,当然为了健壮我们还要将ouline设置成“看不见”的样子。

本着这个思路,腾讯网文章页共设置了6个快捷键,详见http://www.qq.com/accessibility/

拥有了这六个快捷键,但是用户如何能知道呢?当一个元素拥有accesskey属性,当这个元素获得焦点的时候,屏幕阅读软件会读出类似快捷键alt+值的信息(不通读屏软件细节不通,但肯定都可以辨识),虽然可以辨识,但是用户可能并不能认知。这样我们就需要通过一种方式告诉用户,我们的页面提供了某些“额外”的功能。

那么,我就在页面最开始的位置写一个简短的提示,告诉用户我们的页面提供哪些功能,这个提示不能太长,这样听起来麻烦,也不简约(如果不理解为什么要简约,建议脑补)。但一个简单的提示并不能概括我们提供的所有的功能,所以我把文字提示作为链接,链接指向的页面有详细的无障碍说明,这样保证,你想听所有功能,你就跳转过去,否则也不影响你主要的体验,因为提示的重要内容就是告诉用户如何跳转到正文。相见腾讯网新闻页面的代码。

<a accesskey=”0″ style=”width: 0; height: 0; overflow: hidden; display: block; font: 0/0 Arial;” title=”按alt+3阅读正文,您也可以现在按回车查看详细的无障碍说明,或者使用上下键进行线性阅读” href=”http://www.qq.com/demo/accessibility.htm” target=”_blank”>无障碍说明</a>

这种模式很快的被大家所认可,所以你在QQ空间、QQ信箱、腾讯微博等产品上都可以看到这种提示的身影,并且都对应一个较为详细的无障碍说明。

在腾讯文章页的内部,还有另外一个功能,就是对视频的键盘支持,将视频“无缝”的嵌入在正文中,让盲人用户也可以听视频了。这都是前所未有的体验。

正文中视频区域的无障碍方案,相见《详解腾讯正文中视频区域的无障碍方案

关于 rockywen

平等、美好、安逸、自由 Accessibility Strategist 你已经努力的创造了一个伟大的应用,不要错过这个让他能服务更多用户的机会。还有,这是一件对的事情。
此条目发表在 技术 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注