JS下拉菜单实现与可访问性问题的一些思考

张鑫旭在其个人网站上发表了一篇文章《JS下拉菜单实现与可访问性问题的一些思考》，文中为我们分享了他对于JS下拉菜单实现与可访问性问题的一些思考及实际经验，现转载于此，供大家借鉴学习。全文如下：

一、俗耐的开篇语

关于下拉菜单的可用性问题，我之前一直都是忽略的，可以说是不知道，常常仅仅止步于眼前的效果上。前段时间看到了Roger的“Accessing Nav Drop-Downs”一文，就是讲了下下拉菜单的可用性问题。同时，巧的是，最近在看淘宝UED翻译的《ppk谈JavaScript》一书，其多次提到了可访问性的问题，尤其在p28~p37对JavaScript及其一些可用性问题发表了自己的看法。其中主要的观点和注意事项与Roger的文章是一致的。

这些阅读的经历让我意识到自己长时间忽略下拉菜单的可访问性，于是开始结合实际情况，思考自己以后需要注意和提高的地方。这让我对下拉菜单实现方式选择、标签的使用等有了更加明确的认识。不太成熟的思考，仅用于交流。再具体讲述下拉菜单的可访问性之前，先简单说说下拉菜单以及下拉菜单的实现吧。

二、关于下拉菜单及其实现

百度百科对“下拉菜单”一词的解释是：以条形菜单栏和菜单栏中每个菜单项的弹出菜单窗口两部分组成，一般作为应用系统的主菜单使用。不过这段话就像《盗梦空间》一样，让人很难懂。通俗点讲，就是“经过/会点击就会显示列表的菜单”就叫做下拉菜单。在Web

上非常之常见，例如，我随便打开个页面，啊，就像是我浏览器现在显示的百科的页面的右上角：

或是隔壁的微博页面，啊，果然，看左上角的广场下拉：

恩恩，看来下拉菜单就像是男人一样，满地都是。就不一一举例了，关于下拉菜单的实现，那方法可就多了，class切换，属性绑定，js定位等，不同的页面，不同的设计，不同的架构，就有不同的实现方法。由于每个项目，每个页面的情况都不一样，所以，不能轻易的下结论，你是大熊猫，是国宝，它是小野猫，是杂草。但是，就可用性而言，不同的方法优劣还是有标准来评判的，这个在后面会自然而然的展示。

现在，举个切换class实现下拉效果的简单例子，实例菜单原型来自Mtime时光网，（作者注：Mtime创始人在新浪微博上很活跃，你有兴趣可以follow他，@马日拉，你有没有觉得这个名字很有遐想的空间呢？）截图如下：

此导航下拉的每个下拉内容都已经通过CSS定位好了，但是，考虑到加载的原因，其下拉内容默认是未装载的。也就是说，是鼠标移至导航内容上，才动态load下拉div并嵌入导航li标签内的，如下图所示：

当然，作为静态demo页面，没有必要动态load下拉内容，所以，demo页面的下拉div默认就是隐藏且装载好的，于是，我们就可以通过简单的class切换实现下拉效果。

首先是HTML结构，见下图：

核心CSS代码如下：

1..i_n_l{display:none;}

2..showtime_hover .i_n_l,.quiz_hover .i_n_l,.home_hover .i_n_l,

.movie_hover .i_n_l,

https://www.360docs.net/doc/7715677328.html,_hover .i_n_l,.person_hover .i_n_l,.blog_hover .i_n_l,.gro

up_hover .i_n_l{display:block;}

可见，我们只要让li标签的class，例如“我的时光”所在li标签，由”home”变

成”home_hover”就可以控制下拉菜单的显示与隐藏了，很简单吧，所以，相应的js代表就会类似于下面：

1.

然后，效果就如下图所示，截自IE6浏览器：

您可以狠狠地点击这里：时光网下拉菜单demo

恩，不错，效果良好，没有兼容性问题，js代码也算是简洁易懂，开起来似乎大功告成。要是以前的我，估计也就会到这里就结束了，没有bug，测试工程师不会来找茬了。但是，实际上，此处下拉的可访问性只能说是中等及格的水平。（作者注：不过貌似现在整个行业（即使淘宝这类重视前端的公司）的下拉菜单都只实现到这一程度，或许其中有着各种各样的原因，但我个人感觉还是整个行业的水平有待提高。）

为何说看似不错的下拉菜单效果其实可用性低呢？继续下文。

三、下拉菜单可访问性问题

首先回答这个问题：什么是可访问性？

可访问性是指你的网页对任何人、在任何环境下都是可持续访问的。但是，在目前，要使得所有的网站在任何情况下都保持完美无缺的可访问性，这样的要求比要求老板升职还要高，是不实际的，但是，在有限的范围内，有着实际意义的，我们可以提高的地方还是很多的。

常见的可访问性问题有下面三个：

无脚本

这个主要是考虑到某些浏览器不支持JavaScript的情况。例如Google的页面中经常可见

没有鼠标

这是经常会遇到的。有些用户不使用鼠标，而是使用键盘，理由各种各样。例如我自己，有时候懒惰到境界的时候，要是左手已经搁在键盘上，就懒得抬起我的右手，去移动点击鼠标，多麻烦累人啊。直接左手指头垂直动个几厘米多轻松多方便啊；像我大学同学，电脑不知出了什么问题，鼠标都是使用不灵，所以他的大部分上网操作都是键盘完成的；还有些用户有手部残疾（或缺陷）而无法控制鼠标做出微笑的移动，按键为他们提供了一个很好的备选方案，除非JavaScript开发人员忘记照顾他们。而实际上，包括我在内的许多前端开发工程师，或是省功夫，或是其他什么原因，而将这部分人群当作成年的包裹，都扔掉了。

屏幕阅读器

有些人不能使用常规的浏览器。最典型的就是盲人和视力受损的人，他们无法看到屏幕上的任何东西。作为替代品，他们需要一个能把页面内容大声朗读出来的程序。这就是屏幕阅读器。

以前我纯粹按照自己臆想的经验，认为，盲人用户用电脑，估计就是个梦，就算有屏幕阅读器这类东西，估计也做不了什么操作。但是，路要自己走才知道多远，水要自己趟才知道多深。对自己没有经历过事情的认知往往总是不准确的，对于盲人用户与上网的认识也是如此。我发现自己认知的偏差是因为腾讯CDC的“闭上眼睛用QQ –盲人用户探访实录”这篇文章。企鹅公司就是企鹅公司，有钱有人有访谈，这次访谈实录对于像我这样没有机会亲历盲人用户的开发人员来讲是非常宝贵的一手资料，让我意识到，盲人用户也有些他们精彩的世界，他跟我们这些视力良好的人一样，也是可以很好的体验到web给我们生活带来的快乐的。

（作者注：下面这段摘自“闭上眼睛用QQ –盲人用户探访实录”一文。

盲人用户所有的电脑操作都依赖于读屏软件和键盘来完成。这三位用户现在使用的都是永德读屏软件，它安装后即在后台运行，把普通的操作系统变成了带语音的操作系统。盲人朋友依靠tab键，方向键和部分快捷键来调整目前光标的所在位置，而每按一次键盘，或屏幕上出现新的内容，或可操作界面上状态出现任何变化，系统都会有语音提示，这样盲人朋友也可以像普通人一样对电脑进行操作了。由于多年的训练，盲人所用的语音库的语速都非常快，普通人难以识别。顺带说一句，目前国内的读屏软件都不便宜，如永德是在1200左右，而一个盲人按摩师的月收入也就1、2千吧，问及他们是否会觉得这个软件太贵，老板娘笑了笑说：“我觉得值！”电脑和网络给盲人带来了全新的生活。

图片来自腾讯CDC 小黄和他的电脑（右边的数字键盘对他们很重要）

信息无障碍是我们应尽的公益责任，而我国是世界上盲人最多的国家，根据中国残联最近一次公布的数据（在2006年发布），视障患者的数量在1300万左右，若按照目前的速度增长下去，预计在2020年这一人数将达到5000万左右。要使盲人朋友能够更好的使用电脑，畅享网络生活，我们需要做的事情还有很多。）

从上面三点可以看出，对键盘的支持是提高页面可访问性的最重要的因素。所以，我们再制作页面的时候，还需要多多考虑到键盘事件，尤其像上下左右键，TAB键和回车键。

……