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

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

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

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

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

相关文章

来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

3665
来自专栏腾讯社交用户体验设计

极速适配 iPhone X 秘笈

1844
来自专栏软件开发

CSS3与页面布局学习总结(五)——Web Font与Sprite

一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系...

3045
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

1675
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

5036
来自专栏向治洪

ConstraintLayout约束控件详解

简介 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束控件–ConstraintLayout。一种构建...

2875
来自专栏破晓之歌

vue开源项目 原

优点:时间选择器配色舒适,进度条样式有虚线形式,步骤条更清晰相比有创新。表单字段点击后文字会上浮

6193
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeprojec...

2146
来自专栏Thinks

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。 第一步,检查<title></title>,不允许空,不允许过长,简...

621
来自专栏java一日一条

前端高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。

1553

扫码关注云+社区