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

张鑫旭在其个人网站上发表了一篇文章《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代码如下：.i_n_l{display:none;} ?.showtime_hover?.i_n_l,.quiz_hover?.i_n_l,.home_hover?.i_n_l,.movie_hover?.i_n_l,.tv_hover?.i_n_l,.person_hover?.i_n_l,.blog_hover?.i_n_l,.group_hover?.i_n_l{display:block;}?可见，我们只要让li标签的class，例如“我的时光”所在li标签，由”home”变成”home_hover”就可以控制下拉菜单的显示与隐藏了，很简单吧，所以，相应的js代表就会类似于下面：script??var?o?=?document.getElementById(navigationRegion).getElementsByTagName(li); ??var?l?=?o.length; ??for(var?i=0;?il;?i+=1){ ??o[i].onmouseover?=?function(i){ ??var?cl?=?o[i].className; ??if(/_on$/.test(cl)){ ??return; ??} ??o[i].className?=?cl?+?_hover; ??}(i); ??o[i].onmouseout?=?function(i){ ??return?function(){ ??o[i].className?=?o[i].className.replace(_hover,?); ??} ??}(i); ??} ?/script?然后，效果就如下图所示，截自IE6浏览器：您可以狠狠地点击这里：时光网下拉菜单demo恩，不错，效果良好，没有兼容性问题，js代码也算是简洁易懂，开起来似乎大功告成。要是以前的我，估计也就会到这里就结束了，没有bug，测试工程师不会来找茬了。但是，实际上，此处下拉的可访问性只能说是中等及格