基础知识

大多数时候，使用 JavaScript 来增强组件的键盘可访问性的工作只需使用少数工具即可完成，包括使用事件侦听器和几个 Web API 的某些 JavaScript 方法，这些方法可以帮助我们完成此任务。

我们必须为项目添加交互性的最重要的工具之一是事件的存在，即执行当您正在检查的元素收到更改时触发的函数。

keydown EVENT

可以使用此 Web API 侦听的事件的一个示例是事件，该事件检查何时按下某个键。keydown

现在，这不用于为按钮或链接等元素添加键盘辅助功能，因为默认情况下，当您向它们添加事件侦听器时，当您使用 （for 按钮和链接） 和 键（仅限按钮）时，这也将触发事件。相反，当您需要向其他键添加功能时，事件的实用程序就会出现。clickEnterSpacekeydown

我提到过当您按键时需要关闭此工具提示。我们需要一个事件侦听器来检查按下的键是否是 .为此，我们需要检测事件的按下键。在这种情况下，我们将检查事件的属性。EsckeydownEsckey

我们将使用 keycode.info 来检查此键的事件转储。如果按此页面上的键，您会注意到 等于 。Esce.key"Escape"

注意： 还有另外两种方法可以检测按下的键，它们是检查和。他们将返回一个数字。在钥匙的情况下，它将是e.keyCodee.whichEsc 27.但是，请记住，这些是已弃用的替代方案，虽然它们有效，但这是首选。e.key

有了这个，我们需要选择我们的按钮并添加事件侦听器。我解决这个问题的方法是使用此事件侦听器向按钮添加一个类，并将此类添加为例外以使用伪类显示它。让我们开始稍微改变一下我们的 CSS：:not()

button:not(.hide-tooltip):hover + [role="tooltip"],
button:not(.hide-tooltip):focus + [role="tooltip"],
[role="tooltip"]:hover {display: block;
}

现在，添加此例外后，让我们创建事件侦听器！

const buttons = [...document.querySelectorAll("button")]buttons.forEach(element => {element.addEventListener("keydown", (e) => {if (e.key === "Escape") {element.classList.add("hide-tooltip")}})
})

你有它！只需少量 JavaScript，我们就在工具提示中添加了一个辅助功能。而这只是我们可以用事件侦听器做的开始。这将是改善多个组件的键盘可访问性的关键工具，但我们应该考虑另一个事件侦听器。keydown

blur EVENT

还有另一个事件我们将经常使用。这个检测元素何时停止接收焦点。此事件侦听器很重要，大多数情况下，您将使用它来撤消对事件侦听器所做的可能更改。keydown

让我们回到工具提示。现在，它有一个问题：如果按键关闭工具提示，然后再次关注同一元素，则工具提示不会出现。为什么？因为我们在你按键时添加了类，但我们从未删除过这个类。这就是发挥作用的地方。让我们添加一个事件侦听器来还原此功能。Eschide-tooltipEscblur

element.addEventListener("blur", (e) => {if (element.classList.contains("hide-tooltip")) {element.classList.remove("hide-tooltip");}
});

其他事件侦听器（以及为什么您可能不需要它们）

我提到我们的工具包中需要两个事件侦听器，但您可以使用其他事件侦听器，例如 or 。但是，我认为它们的用例非常稀缺。特别值得一提的是，即使你能找到好的用例，你也需要非常小心。毕竟，如果你没有正确使用它，你可能会导致上下文的变化。focusoutfocusfocus

WCAG将上下文更改定义为“如果在用户没有意识到的情况下进行的重大更改，可能会使无法同时查看整个页面的用户迷失方向。上下文更改的一些示例包括：

• 打开一个新窗口;
• 显着更改您网站的布局;
• 将焦点移动到网站的另一部分。

记住这一点很重要，因为在关注元素的那一刻创建上下文更改是 WCAG 标准 3.2.1 的失败：

当任何用户界面组件获得焦点时，它不会启动上下文更改。

— 成功标准 3.2.1：焦点顺序

如果不小心，不当使用侦听事件的函数可能会导致上下文发生变化。这是否意味着您不应该使用它？不是真的，但说实话，我几乎找不到这个事件的用途。大多数情况下，您将使用伪类来创建类似的功能。focus:focus

话虽如此，在某些情况下，至少有一个组件模式可以从此事件侦听器中受益，但是当我开始讨论组件时，我将在稍后介绍它，因此现在让我们在该主题上放置一个引脚。

focus() METHOD 

现在，我们将以一定的频率使用此功能！来自 HTMLElement API 的这种方法允许我们将键盘焦点带到特定元素上。默认情况下，它将在元素中绘制焦点指示器，并将页面滚动到元素的位置。可以使用几个参数更改此行为：

• preventScroll
  当设置为 时，将使浏览器在以编程方式聚焦的元素之前不会滚动。true
• focusVisible
  设置为 时，它将使以编程方式聚焦的元素不显示其焦点指示器。此属性目前仅适用于火狐浏览器。false

请记住，要聚焦元素，它必须是可聚焦的或可制表的。如果需要将焦点带到通常不可选项卡的元素（如对话框窗口），则需要添加带有负整数的属性以使其可聚焦。

Bring focus
Modal content

然后，我们将向按钮添加一个事件侦听器，以使对话窗口聚焦：click

const button = document.querySelector("#openModal");
const modal = document.querySelector("#modal")button.addEventListener("click", () => {modal.focus()
})

你有它！此方法在与属性相关的许多组件中非常方便，因此了解它们的工作原理至关重要。keydown

使用 JAVASCRIPT 更改 HTML 属性

某些 HTML 属性需要使用 JavaScript 进行修改，以便在复杂的组件模式中创建可访问性。键盘可访问性最重要的两个是 和 最近添加的 . 可以使用 进行修改。此属性需要两个参数：tabindexinerttabindexsetAttribute

• name
  它会检查要修改的属性的名称。
• value
  如果此属性不需要特定属性，它将添加此属性所需的字符串（例如，如果添加属性或 ，则需要使用空字符串）。hiddencontenteditable

让我们检查一下如何使用它的快速示例：

const button = document.querySelector("button")button.setAttribute("tabindex", "-1")

setAttribute一般而言，对可访问性有很大帮助。（我经常使用它来在需要时更改 ARIA 属性！但是，当我们谈论键盘辅助功能时，几乎是您使用此方法修改的唯一属性。tabindex

我之前提到过这个属性，这个属性的工作方式有点不同，因为它在 HTMLElement Web API 中有自己的属性。 是一个布尔值，它将允许我们切换属性。inertHTMLElement.inertinert