通过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();
    });
}

我缺少了什么？

Answer 1

<span>通常情况下，按钮是不能被聚焦的；如果没有聚焦，就不能捕捉到按键。

你可以把 tabindex 上讨论过的。MDN按钮角色页.

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

Answer 2

为什么不直接使用一个 <button> - 你可以把他们打扮得像个 <span> 并受益于所有的本地功能。

我可能漏掉了某个浏览器可能需要的样式，因为在我的头顶上做了，但你懂的。

重要的 - 下面介绍了如何 "重置 "一个 <button> - 请不要在没有在按钮和周围文字之间添加一些区别的情况下在生产中使用。

html{
   font-size: 1em;
}
.like-span{
  background: none; /*essential*/
	border: none; /*essential*/
	padding: 0; /*essential*/
	font: inherit; /*important as otherwise the text will look slightly different*/
  color: inherit; /*if you want the span the same colour as the rest of the sentence*/
	cursor: pointer; /*make sure you add this, but if you really want it to behave like a span you would leave this out*/
	outline: inherit; /*I would not recommend this as it removes focus indicator, but is fine as part of a reset if you are adding your own style */
}
.blue{
    color: blue;
}

<p>This is a sentence with a <button class="like-span">button</button> that looks just like a span</p>
<p class="blue">This is a sentence with a <button class="like-span">button</button> that looks just like a span</p>