新浪网内容页面无障碍导航功能存在的问题分析

新浪网是国内第一个采用语音验证码的门户网站,也是第一个在内容页面加入无障碍导航功能的网站。虽说功能是添加了,但实际体验却并不是那么好的,关于语音验证码暂不说,这里就说一下内容页面的无障碍导航功能。

细心的朋友可能已经发现,在新浪网的很多内容页面(比如新闻正文页面)的顶部会有两张小图片的链接,一个是“跳转到路径导航栏”,一个是“跳转到正文内容”,使用读屏软件的朋友肯定也注意到了这两个链接。

这两个链接的功能就是非常好的无障碍设计,他可以让使用键盘操作的朋友比较快速的定位到网页中的相应区域,当点击了“跳转到路径导航栏”链接,就可以定位到网页顶部的菜单区域;点击了“跳转到正文内容”链接,就可以定位到文章内容的开始位置。

这是根据这两个链接功能做的解释,大家实际体验一下就会发现好像并不是这样的,给一个测试网址: http://news.sina.com.cn/c/2010-08-30/200321004312.shtml

当点击了跳转到路径导航栏之后,似乎没有什么变化,当点击了跳转到正文内容链接,发现焦点到了路径导航。

这是从用户操作来看的,如果在看看html代码,也会发现问题。

跳转到路径导航栏的代码: <a class="linkQuickJump" href="#blkBreadcrumb"><img src="http://i2.sinaimg.cn/c.gif" width="1" height="1" alt="跳转到路径导航栏" /></a>

跳转到正文内容代码: <a class="linkQuickJump" href="#Main"><img src="http://i2.sinaimg.cn/c.gif" width="1" height="1" alt="跳转到正文内容" /></a>

对应的两个锚链接代码: <a name="blkBreadcrumb"></a> <a name="Main"></a>

看到这里似乎没有什么问题,如果仔细注意一下这几段代码的放置位置的话,就会发现,问题了,导航栏 的锚链接实际上是放在了非常靠近正文的位置上,而并非是整个网页的顶部导航菜单位置。

第二点是两个导航链接 的顺序,“跳转到路径导航栏”链接放在整个网页的开始位置,一般情况下打开网页之后,首先就是从网页开始的,这个链接放在这里还有什么价值吗?当然如果新浪开发者的目的是为了把用户引导到当前页面的所属位置区域的话,那也就没什么错误了。

“跳转到正文”链接放在了正文的前方,如果用tab找到这个链接,那么本身就已经距离正文不远了,要这个链接还有什么用处吗?

总结一下就是,问题主要出在设计思想和代码编写上,也或许当时测试人员工作太繁忙,出现了这样的疏漏。

我的建议:

这样的导航链接要加的恰到好处,第一要精炼,第二要放置到合适位置。

对于新浪内容页面来说,可以做如下改进:

第一,调整两个链接的顺序,把跳转到正文内容放在网页开头,把跳转到路径导航栏放在正文之前,同时这里的路径导航应该是整个网页的导航菜单,而并非当前页面的。

第二,有可能的话,给这两个链接加上快捷键,建议采用的热键是alt+x,两个链接可以采用相同热键。如果采用不同热键,比如跳转到正文可以用alt+c或者alt+n,跳转到路径导航可以用alt+g。