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

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

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

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

浏览器环境：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>