|
上述两个实例都是一定程度上支持了键盘事件的下拉菜单的示例。但是，这里我要重重地转折！这里的键盘支持的实际应用价值是多少呢？开发的可行性又是多大呢？我的结论是：实际应用价值低，开发的可行性低。
首先是使用价值，通过移动方向键显示下拉菜单，就中国行情而言，就数十年来中国网民的使用习惯而言，就中国目前前端对方向键的支持情况来看，即使你呕心沥血做了个可以通过方向键控制下拉显示的导航菜单，再即使你昭示天下此导航可方向键操作，有几个人鸟你的账呢？所以我说，在中国，在目前，方向键的可用性虽然看上去不错，实际上没有多大价值。
其次是开发的可行性，要知道，大部分的公司的资源人力有限，而且很多人能力有限，你说，花巨大的代码成本搞个可用性很好（但受众很小的）的下拉菜单，有必要吗？可能吗？你会吗？
所以说，上面yahoo开发和Mozilla首页的下拉的键盘方法是没有任何实际应用价值的，其意义仅在于学习、提高JavaScript水平，尤其在控制键盘事件上。
您可能会疑问，照我的结论，所谓“下拉菜单可访问性”只是个空洞的理论，没有实际价值嘛。哦，其实不然，我们其实可以找到即有实际应用价值，同时又开发简单常用，又能提高页面键盘可用性的方法的。其关键就是focus事件。作为键盘用户，最常用的是哪个键，一个是Enter回车键，另外一个就是Tab焦点切换键。Tab键可以让页面上的a标签以及表单元素(button, input)依次获取焦点(如果没有设置tabindex属性的话)，当Tab键切换到某个元素时，此元素其实已经相应了onfocus方法（大部分情况下未定义方法），此时如果按下Enter回车键，其实相对于触发了onclick方法，如果a标签有链接的话，会打开链接的。
所以，我们可以抛开烦人的方向键，而专注于Tab键，以及Tab切换触发的focus方法。我们再添加一个让菜单获取焦点的显示下拉的方法，其不是大大提高了页面的键盘可访问性。而且onfocus方法本身与键盘无关，我们只需要专注于事件本身，而忽略键盘，所以开发成本是低的，非常可行的。
下面，就以mtime时光网的下拉为例，添加Tab键的下拉方法（其实是onfocus方法），看如果通过添加几行额外的代码，来大大提高页面的可访问性的。
五、给菜单添加focus事件增加键盘可用性
什么元素支持focus事件呢，据我所知为a标签，以及表单元素。所以，还是Mtime时光网的例子，我们要在下图所标示位置的a标签上添加focus方法，让其获取焦点时也能显示下拉菜单：
由于鼠标经过也实现同样的下拉效果，所以，我们需要将显示下拉菜单的方法提出来，一番处理后，js代码如下：
<script>
var o = document.getElementById("navigationRegion").getElementsByTagName("li");
var l = o.length, cache;
var menuTaga = function(obj){
//获取a标签DOM对象
return obj.getElementsByTagName("a")[0];
}, menuDown = function(obj){
var cl = obj.className;
if(/_on$/.test(cl) || /_hover$/.test(cl)){
return;
}
obj.className = obj.className + "_hover";
}, menuUp = function(obj){
obj.className = obj.className.replace("_hover", "");
}, menuCache = function(obj){
if(cache){
menuUp(cache);
}
cache = obj;
}, menuEvent = function(obj){
obj.onmouseover = function(){
menuCache(this);
return menuDown(this);
};
obj.onmouseout = function(){
return menuUp(this);
};
menuTaga(obj).onfocus = function(){
menuCache(obj);
return menuDown(obj);
};
};
for(var i=0; i<l; i+=1){
menuEvent(o[i]);
}
</script>
上述方法除了focus方法之外，为了让下拉显示的列表也能通过Tab键访问，所以，对当前显示的下拉对象cache了下，以能够准确收起之前展开的下拉菜单。
出处：zhangxinxu
责任编辑：bluehearts
上一页 js下拉菜单实现与可访问性的思考 [4] 下一页 js下拉菜单实现与可访问性的思考 [6]
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 5 页 js下拉菜单实现与可访问性的思考 [5]
