javascript - 使用 Enter/Space 键单击 元素不起作用，即使它已聚焦(可访问性)

Question

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

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

Answer 1

简答

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

这对可用性很重要!

更长的答案

由于您已标记此辅助功能，我将重点关注它。

任何 anchor <a>必须有一个有效的 href成为焦点并作为超链接工作。

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

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

这完全是 HTML4 的后遗症，您无法在其中设置 <button> 的样式。元素和一种现在需要消失的不良做法。

那我应该用什么？

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

如果您正在尝试制作导致导航(到新页面或当前文档中的位置)的内容，请使用有效的 anchor <a href="some-location">Some Location</a>或 <a href="#document-fragment">Place in current document</a> .

为什么重要？

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

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

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

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

它还有助于 SEO，使您的标记更易于理解等。

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

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

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

在下面的例子中，我给按钮一个 id="searchJavaScript然后使用 document.querySelector('#searchJavaScript');捕获那个按钮。

实际上，您会在 querySelector 中使用更好的选择器基于您的标记。

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

您可以 learn more about addEventListener here .

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


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

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

但是我需要在导航发生之前做些什么？

它应该仍然是一个有效的 anchor !

如果您需要在导航发生之前运行某些功能，我们仍然可以使用 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>