单击<；a>；使用Enter/Space键的元素不工作，即使它是焦点（可访问性） JavaScript

当我使用Tab键浏览网页中的可聚焦元素时，元素也会聚焦，因为tabindex属性设置为“0”。但无法使用空格或输入键单击它。

---

有什么解决方案吗？

Focus+enter将触发click事件，但前提是锚点具有

href

属性（至少在某些浏览器中，如最新的Firefox）。使用jQuery完成。作品：

$（文档）。按键（功能（e）{
if（（e.keyCode | | e.which）==13）{
//按回车键
$（'a'）。触发器（'click'）；
}
});
$（'a'）。单击（函数（e）{
e、 预防默认值（）；
警报（“链接已单击”）；
});
Focus+enter将触发单击事件，但前提是锚点具有
href
属性（至少在某些浏览器中，如最新的Firefox）。使用jQuery完成。作品：


$（文档）。按键（功能（e）{
if（（e.keyCode | | e.which）==13）{
//按回车键
$（'a'）。触发器（'click'）；
}
});
$（'a'）。单击（函数（e）{
e、 预防默认值（）；
警报（“链接已单击”）；
});

简短回答
要调用函数，应使用
和事件侦听器。使用按钮进行相同的页面交互（调用JS函数）并使用
或

为什么这很重要？
对于辅助技术用户（主要是屏幕阅读器用户），使用的元素类型很重要。为作业使用正确的元素称为语义

带有有效的
href
的锚告诉屏幕阅读器用户“单击此将导致导航”。这也让他们知道他们需要按Enter键来激活链接

另一方面，一个
告诉屏幕阅读器用户“我将在此页面上执行一个操作”。它还让他们知道，他们可以按“回车”或“空格”来激活按钮

这种预期行为对于屏幕阅读器用户在使用您的网站/web应用程序时不会感到困惑或沮丧至关重要

它也有助于搜索引擎优化，使你的标记更容易理解等

那么如何从页面调用函数呢？
首先，如我所说，使用

不要内联
单击
处理程序，而是将其添加到JS文件中

在下面的示例中，我给了按钮一个
id=“searchJavaScript
，然后使用
document.querySelector（“#searchJavaScript”）
来抓取该按钮

实际上，根据您的加价，您应该在
querySelector
中使用更好的选择器

然后我们使用
.addEventListener（'click'
）来监听该按钮上的任何单击事件

你可以


let jsButton=document.querySelector（'searchJavaScript'）；
jsButton.addEventListener（'click'，function（）{
警报（“您单击了JavaScript搜索按钮”）；
})；
JavaScript
简短回答
要调用函数，应使用
和事件侦听器。使用按钮进行相同的页面交互（调用JS函数），并使用
或

为什么这很重要？
对于辅助技术的用户（主要是屏幕阅读器用户），使用的元素类型很重要。为工作使用正确的元素称为语义

带有有效
href
的锚告诉屏幕阅读器用户“单击此按钮将导致导航”。它还让用户知道需要按Enter键激活链接

另一方面，一个
告诉屏幕阅读器用户“我将在此页面上执行一个操作”。它还让用户知道他们可以按“回车或空格”来激活按钮

这种预期行为对于屏幕阅读器用户在使用您的网站/web应用程序时不会感到困惑或沮丧至关重要

它也有助于搜索引擎优化，使你的标记更容易理解等

那么如何从页面调用函数呢？
首先，如我所说，使用

不要内联
单击
处理程序，而是将其添加到JS文件中

在下面的示例中，我给了按钮一个
id=“searchJavaScript
，然后使用
document.querySelector（“#searchJavaScript”）
来抓取该按钮

实际上，根据您的加价，您应该在
querySelector
中使用更好的选择器

然后我们使用
.addEventListener（'click'
）来监听该按钮上的任何单击事件

你可以


let jsButton=document.querySelector（'searchJavaScript'）；
jsButton.addEventListener（'click'，function（）{
警报（“您单击了JavaScript搜索按钮”）；
})；
JavaScript
它不起作用，因为您没有在那里添加键盘功能。只需添加
（按键）
事件，它就会起作用。如下所示：

<a (click)="searchExample()" tabindex="0">JavaScript</a>

JavaScript
另外请注意，锚定标记（）不需要TABINDEX=0
即使删除tabindex，锚定标记也将按焦点顺序排列，因为它们就是这样工作的。
它不起作用，因为您没有在那里添加键盘功能。只需添加
（按键）
事件，它就会起作用。类似如下：

<a (click)="searchExample()" tabindex="0">JavaScript</a>

JavaScript
另外请注意，锚定标记（）不需要TABINDEX=0
即使删除tabindex，锚定标记也将按焦点顺序排列，因为它们就是这样工作的。
Hmm是一个问题，当你真的应该使用
按钮时，你正在使用
a
元素。出于可访问性的目的，我认为锚定标记除了是一个真正的链接外，不应该做任何事。如果你使用的是一个点击处理程序，它应该是一个按钮（如果需要，你可以将按钮设计成与链接完全相同的样式）。尝试
JavaScript
尝试将其作为功能链接：
JavaSc