上述脚本代码的效果如下图所示，通过切换Tab键显示的下拉列表内容：

这里只看图是体会不出这里可访问性是如何切实提高的，您可以狠狠地点击这里：Tab键可访问的下拉菜单demo

无论是Firefox浏览器还是IE浏览器，不停的切换Tab切换键，当导航中的a标签获取焦点时（出现虚框，Chrome土橙色框，Safari蓝框）（可见outline是可访问性里面很重要的东西，没事就设置outline:none;的人都是不明真相的盲从者），就会出现下拉菜单。此时下拉菜单中的列表项也可以通过Tab键获取（如果下拉菜单不显示，菜单列表是无法通过Tab键访问的）。

于是，对于那些无法或不想使用鼠标的用户而言，这里导航的可访问性显然更高一筹，因为，他们可以轻松使用键盘访问导航里面的每一项内容，Tab切换，回车键访问。

值得一提的是，对于Safari浏览器用户，默认Tab切换元素是不高亮的，您需要在偏好设置里勾选此项，如下图所示：

六、抓住最后一点尾巴

我知道“站着说话不腰疼”，放眼看看中国互联网上的这些网站，绝大多数网站连个小众用户都没有，更别谈考虑到“键盘偏好用户”了，人力有限，财力有限，所谓的这些可访问性问题都只是些用钱的公司，有钱的网站有资本把玩的东西。成千上万生死先上挣扎的中小网站，对于他们来讲，本文的意义又何在呢？

我想，应该不少同行看过本文，知道了下拉菜单这类东西最好添加键盘可访问的方法。但是多仅局限于只是知道而已，真正去付诸实践的有多少呢，我是很怀疑的。所以从这点来讲，本文的实际价值又似乎打了折扣了。所以，我自己并不奢望每个前端开发人员日后都开始重视键盘用户的可访问性问题，要为页面重要的地方写键盘事件，或者是本文重点演示的focus事件。

然而，虽然，我觉得为少了的键盘用户、屏幕阅读器用户额外写js方法在大多数网站是行不通的。但是，其实只要举手之劳，我们也能够让自己网站的可访问性更好，而这些看上去不起眼的操作实际上是更加有实际应用与推广价值的，到底哪些“举手之劳”呢？

首先，把网站CSS reset中的outline:0;，痛痛快快，舒舒服服地删掉。

其次，凡事涉及到事件的元素，例如按钮，选项卡等。都必须使用（或包含）a标签或是表单元素（如button）。这不难理解，就拿本文时光网导航举例，实际上导航中的a标签去掉，同样的脚本，已经可以实现下拉菜单的效果了。或许有人反而会认为自己仅仅使用了ul, li标签就实现下拉菜单效果沾沾自喜，认为自己去掉了荣誉的a标签，HTML代码够简洁，这就跟《媳妇的美好时代》里面的毛峰一样，家里这个温柔贤惠漂亮勤劳的老婆不要，跑去沾惹那个什么龙瑾，不要是看外表风骚，看知道内涵才行。

所以，我要看到只要ul,li标签的导航觉得苗条性感，实际上只是个花花瓶子，里面需要有点内涵的东西——a标签。a标签本身的存在就是提高的页面的可访问性了。

所以呢，那些自以为代码精简、或是自认为a标签虚框不好看而使用类似span标签代替的做法，都是业余的，是可以轻松改进的。

然后，不要自以为的不要自以为边缘处理后的文字似乎更好看，就把按钮，选项卡的文字用图片代替，连文字也不留两个。你说屏幕阅读器认识图片吗，还有，你就这么喜欢没事来两个图片链接请求来虐待服务器吗？所以，少用图片代替文字，即使要代替，也要把文字藏在后面，注意是藏在后面，就是图片不显示文字就显示，而不是隐藏掉。

最后，总结下，就是outline，a标签，文字。如果您想做真正优秀的网站，加一条，键盘响应事件。

七、结语加《盗梦空间》电影之旅

本来这篇文章预计9点就可以发布，结果拖到现在，为什么呢？啊，说来话长，当时我写文章正进入体验高峰状态，突然外面有人敲窗户，我以极慢的速度转过头，
盯着黑乎乎的窗外看了10秒钟，眼睛共慢悠悠地眨了3下（1~2~3~），突然，眼前一亮，啊！这不是芳芳同学吗？我故作镇静的走过去，打开窗户，“什么事？”只见其玉手拿出两张黄黄的票子，说：“我这儿有两种《盗梦空间》的电影票，多了一张，你要不要去看？”此言一出，我肾上腺素立即升高，“哇靠，这不是电视剧里才有的桥段吗？”这等美事怎能放过，于是乎，我平生第二次和女生单独看电影（第一次是和我妹）。不要问我后来怎么样了，我现在脑子里有的就是：啊，电影很好看；啊，陆家嘴很美；啊，我的心情超好。

呼~~长嘘一口气，回到本文，关于本文……果然，还是不行，心情依旧沉浸在喜悦之中。算了，有什么问题评论交流。就这些，洗洗睡了~~

原文：http://www.zhangxinxu.com/wordpress/?p=1087

本文链接：http://www.blueidea.com/tech/web/2010/7964.asp　

出处：zhangxinxu
责任编辑：bluehearts

上一页 js下拉菜单实现与可访问性的思考 [5] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。