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

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

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

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

浏览器环境: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 条评论
登录 后参与评论

相关文章

来自专栏Coding01

推荐简约漂亮的小程序日历插件

好比 PHP 的 composer、前端的 npm,Java 的 jar包,小程序插件的出现,极大的方便了我们共享组件,减小开发量。

1172
来自专栏机器学习原理

爬虫篇(2)——爬取博客内容页面分析代码分析

对博客网站博客园首页的200页网站进行内容爬取 用lxml和xpath进行爬取数据 页面分析 主页面 ? image.png ...

29011
来自专栏运维小白

Linux基础(day29)

sed扩展 一. 打印某行到某行之间的内容 打印某一行到某一行之间的内容 需求: 例如:有个文件test的内容如下: ert fff ** [abcfd] 1...

1619
来自专栏木子昭的博客

img标签随机获取高质量图片

571
来自专栏deepcc

在网站制作中随时可用的10个 HTML5 代码片段

34114
来自专栏吴裕超

datalist标签小结

在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。在以前,如果要实现这样的功能,必须要求开发者使用一些Javascript的技巧或相关的...

2675
来自专栏jianhuicode

在 hexo 中无痛使用本地图片

1 起因 在 hexo 中使用本地图片是件非常让人纠结的事情,在 markdown 里的图片地址似乎永远无法和最后生成的网页保持一致。 这些问题使得我一度不愿意...

2079
来自专栏技术栈大杂烩

Linux:终端提示符 (prompt) 不如期生效原因

先来简单介绍下, prompt是什么鬼? 顾名思义就是提示符的意思, 看起来和我们遥远, 但实际上只要是每个接触shell的童鞋, 都有看到, 那就是我们在输命...

385
来自专栏向治洪

android多屏幕分辨率适配

做android开发,开源嘛,满市场都是凌乱的机型,总少不了适配这样或那样的型号。在这里分享一下自己在开发中用到的方法。 首先要介绍一下drawable-md...

17610
来自专栏子勰随笔

开发中一些常用的工具链接(MD5、Timestamp等)

16010

扫码关注云+社区