使用 Enter/Space 键单击 <a> 元素不起作用，即使它已获得焦点（辅助功能）

Question

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

当我使用 Tab 键浏览网页中的可聚焦元素时，由于 tabindex 属性设置为“0”，元素也被聚焦。但无法使用空格键或 Enter 键单击它。有什么解决办法吗？

Answer 1

简答

要调用函数，您应该使用<button>事件侦听器。使用按钮进行同一页面交互（调用 JS 函数），并用于<a href="some-location"...导致 URL 更新的任何内容（导航到新页面或当前文档中的某个位置）。

这对于可用性很重要！

更长的答案

正如您已标记此可访问性，我将重点关注这一点。

任何锚点都<a>必须具有有效的href焦点才能作为超链接。

我看到有人提出建议<a href="javascript:void(0)"，永远不要这样做，这是一种反模式。

Also<a href="#"也是一种反模式，因为它不提供任何导航。

这都是 HTML4 的后遗症，在 HTML4 中你无法设置<button>元素的样式，而且是一种现在需要消失的糟糕做法。

那么我应该使用什么呢？

如果您尝试制作用户可以在同一页面上交互的东西（调用 JavaScript 函数的东西），那么使用<button>.

如果您尝试制作一些导致导航的内容（导航到新页面或当前文档中的某个位置），请使用有效的锚点<a href="some-location">Some Location</a>或<a href="#document-fragment">Place in current document</a>.

为什么这有关系？

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

具有有效值的锚点href告诉屏幕阅读器用户“单击此按钮将导致导航”。它还让他们知道他们需要按下Enter才能激活链接。

<button>另一方面，A告诉屏幕阅读器用户“我将在此页面上执行操作”。它还让他们知道他们可以按 `Enter 或 Space来激活按钮。

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

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

那么如何从页面调用函数呢？

首先，正如我所说，使用<button>.

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

在下面的示例中，我给了按钮一个id="searchJavaScript，然后用来document.querySelector('#searchJavaScript');抓取该按钮。

实际上，您可以querySelector根据您的标记使用更好的选择器。

然后我们用来.addEventListener('click'监听该按钮上的任何点击事件。

您可以在这里了解更多信息addEventListener。

let jsButton = document.querySelector('#searchJavaScript');


jsButton.addEventListener('click', function(){
    alert("You clicked the JavaScript Search Button");
});

<button id="searchJavaScript">JavaScript</button>

但我需要在导航发生之前做一些事情？

它应该仍然是一个有效的锚点！

如果您需要在导航发生之前运行某些功能，我们仍然可以轻松地使用event.preventDefault().

您应该仍然有一个有效的超链接。

let link = document.querySelector('a');

link.addEventListener('click', function(e){
    e.preventDefault();
    console.log("I will appear before navigation so you can set up whatever you need");
    alert("I will appear before navigation");
    window.location.href = this.href;    
});

<a href="https://google.com">Go to Google but run a function first</a>