将 role=button 全局设置为 onkeypress spacebar 用于带有 hrefs 的伪按钮

Question

我们有一个巨大的网站，其中包含数百个页面和许多按钮。我们正在努力使网站更易于访问，但几乎所有按钮最初的样式都是使用 <a href= 而不是 <button>。这意味着我们需要启用空格键来处理这些 href。我的问题是，您能否将所有具有角色="button" 的 link 全局设置为按键 32，以使用 javascript 将用户发送到引用的 href 路径？我知道这可以单独完成，例如：

<a href="/employee.html" class="btn" role="button">Example</a>

$(function() {
    $(".btn").keypress(function(e) {
        if (e.which === 32) {
            e.preventDefault();
            window.location = "/employee.html"
        }
    });
});

有没有办法为所有 role=buttons 调用通用按键 32 并将目标路径发送到函数，这样空格键确实会激活 link？

Answer 1

我可能会尝试以下目标所有链接，过滤具有角色的链接，然后在 space 的 keyup 上，将 url 设置为任何 href他们通常会去。

$(function() {
    $("a").filter('[role="button"]').on('keyup', function(e) {
        if (e.which === 32) {
            window.location = e.target.href;
        }
    });
});

将 role=button 全局设置为 onkeypress spacebar 用于带有 hrefs 的伪按钮

Globally set role=button to onkeypress spacebar for pseudo buttons with hrefs

javascript

jquery

accessibility

keypress

button