jquery - 对带有 span 元素的键盘的辅助功能支持

Question

我有一些可以单击并用作按钮的元素。但是，屏幕阅读器看不到它们。为了纠正这个问题，我正在尝试添加一个函数，该函数将为任何将角色设置为按钮的元素添加此类支持。

<span role="button">clickable</span>

我编写了这个 jQuery 函数，但它并不完全有效。

$(document).on("keypress", "[role='button']", function(e) {
    var code = e.which;
    // 13 = Return, 32 = Space
    if ((code === 13) || (code === 32)) {
        $(this).click();
    });
}

我错过了什么？

标签： jqueryaccessibilitywai-ariascreen-readers

Answer 1

<span>s 通常不能聚焦；没有焦点它不会捕获按键。

正如MDN 按钮角色页面tabindex中所讨论的，您可以在其上添加一个。

在设计可访问性时，特别是在使用非标准 UX 元素作为 UX 输入时，tabindex变得非常重要……而且非常烦人。