对带有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

为什么不使用<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>

Answer 2

<span>s通常不可聚焦；没有焦点，它就无法捕捉按键。

您可以在上面放一个tabindex，如MDN按钮角色页面所述。

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