为了创建更加漂亮的按钮,我们在项目实践中经常使用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; }