模拟按钮的可访问性
为了创建更加漂亮的按钮，我们在项目实践中经常使用A、SPAN等元素模拟按钮，而不是使用更合语义的input[button]或者button元素。使用这种方法我们可以快速的创建各浏览器表现一致的按钮，免受各种bug困扰，但同时也带来了可访问性问题。
可能无法获得焦点
之所以是“可能”，是因为如果我们使用的是A元素，那么这个“假”按钮是可以获得焦点的，但如果我们使用的span等其他不可聚焦元素，辅助工具用户就很难去发现这个按钮。
解决办法：添加tabindex=”0″,将它添加到tab序列内。
无法获得准确的语义和指令
模拟按钮只是披上了按钮的外衣，辅助工具获得的信息仍然是它们真实面目。虽然点击一个链接时，通常链接会将我们带至其他地方，但使用辅助工具的用户仍然能够感知到这里是可以点击的（而且功能性链接在现代交互中使用的越来越广泛）。如果使用的是其他元素，就没有那么幸运了。
解决办法：使用role=”button”增加语义，告知辅助工具自己的角色。
缺少原生按钮的默认键盘行为
激活一个原生按钮，除了使用鼠标点击外，还可以使用Enter或空格键进行键盘操作。为了符合“所有功能都能通过键盘操作”的要求，我们还需要增加额外的键盘事件。
解决办法：Enter或空格键触发Click事件行为。
解决方案
HTML
<span class="mimic-btn">模拟按钮</span>jQuery
$('.mimic-btn').each(function(){
$(this).attr({
'tabindex': 0,
'role': 'button'
});
$(this).on('keydown', function(e){
var keyCode = e.which;
if(keyCode === 13 || keyCode === 32){
$(this).trigger('click');
}
});
});
$('.mimic-btn').on('click', alertMsg);
$('.real-btn').on('click', alertMsg);
function alertMsg(){
alert('Space and Enter key can trigger Click event.');
return false;
}本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2013/03/062，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录