您的位置: 首页 > 技术文档 > 网页制作 > 朋友网无障碍优化实践
HTML5设计原则 回到列表 通过shtml实现重构页面模块化构建
 朋友网无障碍优化实践

作者:QQ空间设计中心 时间: 2011-11-10 文档类型:合作网站提供 来自:腾讯isux

第 1 页 朋友网无障碍优化实践 [1]
第 2 页 朋友网无障碍优化实践 [2]

为了营造无障碍的信息空间,方便视障用户使用我们的服务,借助朋友网(pengyou.com)改版时机,我们实施了一些提高页面可访问性的实践。

WCAG2.0

Web内容无障碍指南(WCAG)2.0定义了如何使web内容更便于残障人士访问。它定义了web内容无障碍的四项基本原则,即可感知、可操作、可理解和健壮性,为了达到这些基本目标,每条原则之下设置了应遵循的准则,对每一个准则,提供了可测试的成功标准。围绕这四条原则,我们此次优化的目标为:

  1. 增强页面区块和模块的语义。
  2. 提高屏幕阅读器用户的访问效率。
  3. 优化首页的键盘操作问题和信息理解问题。

1.设置“跳过导航”链接,直达用户首要目的地。

社交网络的重要特点就是News Feed,动态地向用户提供好友的各种消息。通常,用户登录网站的首要目的是查看“好友动态”,视障用户tab多次才能到达该区域,“跳过导航”链接允许屏幕阅读器用户跳过大块的内容和链接,用户访问新页面时也不必每次都浏览banner和导航,这样可以节省视障用户的时间。

2.划分网页区块,增强区块语义,提高区块间跳转的速度。

朋友网的页面结构是标准的三栏结构,大致可归纳为顶部logo、页面导航及搜索区,底部是版权信息,中间左中右三栏分别为:应用导航、News Feed和推荐信息。各区块的信息都较多,尤其是News Feed区,视障用户在各个区域内切换时十分繁琐。

朋友网页面区块

解决该问题的一种方法是设置区域定位点,即在各个区域前添加一个仅对屏幕阅读器可见的锚链接,并为该链接设置accesskey。

台湾行政院研考会将这种方法写入了无障碍网站规范中,定位点又称为导盲砖,独创性的使用三个冒号(:::)来表示,主要用来帮助用户快速定位和搜索,代码如下:

<a accesskey="U" href="#" title="顶部区域"> ::: </a>
<a accesskey="L" href="#" title="左侧区域"> ::: </a>
<a accesskey="C" href="#" title="中间区域"> ::: </a>
<a accesskey="R" href="#" title="右侧区域"> ::: </a>
<a accesskey="B" href="#" title="底部区域"> ::: </a