模拟按钮的可访问性

为了创建更加漂亮的按钮,我们在项目实践中经常使用A、SPAN等元素模拟按钮,而不是使用更合语义的input[button]或者button元素。使用这种方法我们可以快速的创建各浏览器表现一致的按钮,免受各种bug困扰,但同时也带来了可访问性问题。

可能无法获得焦点

之所以是“可能”,是因为如果我们使用的是A元素,那么这个“假”按钮是可以获得焦点的,但如果我们使用的span等其他不可聚焦元素,辅助工具用户就很难去发现这个按钮。

解决办法:添加tabindex=”0″,将它添加到tab序列内。

无法获得准确的语义和指令

模拟按钮只是披上了按钮的外衣,辅助工具获得的信息仍然是它们真实面目。虽然点击一个链接时,通常链接会将我们带至其他地方,但使用辅助工具的用户仍然能够感知到这里是可以点击的(而且功能性链接在现代交互中使用的越来越广泛)。如果使用的是其他元素,就没有那么幸运了。

解决办法:使用role=”button”增加语义,告知辅助工具自己的角色。

缺少原生按钮的默认键盘行为

激活一个原生按钮,除了使用鼠标点击外,还可以使用Enter或空格键进行键盘操作。为了符合“所有功能都能通过键盘操作”的要求,我们还需要增加额外的键盘事件。

解决办法:Enter或空格键触发Click事件行为。

解决方案

DEMO

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;
}

发表评论