腾讯网新闻底层页无障碍代码细节

本周一部署在新闻频道并得到可反馈和升级。

现已部署在新闻频道、财经频道、体育频道、娱乐频道、公益频道。

主要针对于盲人用户使用的屏幕阅读器在阅读新闻底层页(新闻详细页)时候做出的优化。

浏览器环境:ie

1. 添加<a href="http://www.qq.com/demo/accessibility.htm" title="按alt+3阅读正文,您也可以现在按回车查看详细的无障碍说明,或者使用上下键进行线性阅读" accesskey="0" target="_blank" style="width:0;height:0;overflow:hidden;display:block;font:0/0 Arial">无障碍说明</a>。使这段代码做为body的第一个元素,使用css样式代码控制此代码中的内容在视觉上不现实,只有使用屏幕阅读器才可以听到这个链接。这里将样式写在了标签中,主要是担心一旦外链,有可能在极端网络环境下看到相应的文字,会受到正常用户的挑战。

2. 为页面中指向网站首页的链接代码<a>标签中添加title="某某网站首页" accesskey="1",使得用户在按alt+1的时候,可以阅读此title中和<a>标签中包含的内容。

3. 为页面中的主导航所在的代码区域添加accesskey="2" title="导航,您可以通过上下键来选择导航" tabindex="-1"。使得用户可以按alt+2切换到导航位置,并且朗读title中的内容,另外由于一般的导航都在div这种无法自动添加焦点的标签上,所以使用tabindex=”-1”或者tabindex=”0”,使得这种标签可以在按下相应快捷键的时候获得焦点。

4. 为文字的正文区域添加title="正文,您可以通过上下键来阅读内容" accesskey="3" tabindex="0"。使得用户在按alt+3的时候直接切换至正文区域,并且阅读title中的值。,另外由于一般的导航都在div这种无法自动添加焦点的标签上,所以使用tabindex=”-1”或者tabindex=”0”,使得这种标签可以在按下相应快捷键的时候获得焦点。这里设置为-1是因为如果值为0的话,在ie 下相应的区域会有虚线(如图一);在标准浏览器下,比如chrome、firefox、safari等,一个非焦点元素获得焦点的时候会激活outline属性从而产生一个实体的线框(如图二),利用css可以使之不显示,代码为outline:none。

设置为-1可以使ie下的虚线隐藏掉。

注意:ie产生的虚线、标准浏览器产生的实体线框

5. 为评论的出入框textarea标签添加accesskey="4" title="请输入评论内容"。使得用户在按alt+4的时候直接切换至评论输入区,并且阅读title中的值。

6. 在大部分浏览器下当鼠标在某个拥有title属性的区域时候,会出现悬停的小菜单提示,有些影响现有的用户体验。

当鼠标在某个拥有title属性的区域时候,会出现悬停的小菜单提示

解决方式是,默认此区域的title值为空,利用javascript脚本实现:当按下某快捷键的时候,对快捷键绑定的区域进行动态的赋予title的值。如下面的代码:

<script type="text/javascript">

//无障碍

qq.EA(document, 'keydown', function(e){

var isAlt = false, is2 = false, is3 = false, e = qq.E(e);

if(e.alt){ isAlt = true }

if(e.key == 50) { is2 = true }

if(e.key == 51) { is3 = true }

if(isAlt && is2){

qq.G('nav').getElementsByTagName('div')[0].setAttribute('title', '导航,您可以通过上下键来选择导航');

}

if(isAlt && is3){

qq.G('Cnt-Main-Article-QQ').parentNode.setAttribute('title', '正文,您可以通过上下键来阅读内容');

}

});

</script>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

Cocos Creator制作一个微信小游戏(上)

| 导语 微信小游戏都火成这样了,为什么不尝试一下? 我们的目标是使用Cocos Creator从零开始制作一个小游戏,并放到微信上玩。

6182
来自专栏C/C++基础

C/C++代码调试的几点建议

代码调试在程序开发阶段占有举足轻重的地位,可见代码调试的重要性。但是有一点必须强调:程序是设计出来的,而不是调试出来的。这是所有程序员必须牢记在心的一条准则。一...

681
来自专栏腾讯NEXT学位

使用 CSS 追踪用户

3459
来自专栏企鹅号快讯

涨知识,原来可以这样用 CSS 来追踪用户

英文:jbtronics 译文:枫上雾棋 https://segmentfault.com/a/1190000012901505 ? 除了使用 JS 追踪用...

1976
来自专栏Material Design组件

Human Interface Guidelines — Switches

1144
来自专栏程序员互动联盟

【一起学python】hello world

联盟有个小伙伴,为了督促自己学习进步,决定把自己以前学的python重新梳理下,并且以文章的方式展示出来,联盟专门做一起学python系列专栏,鼓励这位小伙伴学...

3278
来自专栏DeveWork

jQuery Builder:jQuery 库的精简之道

最近在做一个手机主题,为了用上看似华丽的Ajax 特效,不得不用上jQuery(不要问我为什么不用原生js,要是我会写就不用那么费劲了)。但众所周知Jquery...

1767
来自专栏python3

python3--函数的有用信息,带参数的装饰器,多个装饰器装饰同一个函数

    我们说,任何一个程序,不可能在设计之初就已经想好了所有的功能并且未来不做任何更新和修改,所以我们必须允许代码扩展,添加新功能

1341
来自专栏十月梦想

Vue-router从入门到弃坑

html页面(依次引入vue.js,router.js以及个人配置的app.js)

1383
来自专栏Crossin的编程教室

【编程课堂】词云 wordcloud

本周为大家带来炫酷好玩的 wordcloud 词云构造库。 使用 wordcloud 可以做出这样的图片: ? 还可以做出这样的: ? 接下来,我们来学习如何制...

35911

扫码关注云+社区