考虑键盘辅助功能设计应用程序的 5 个步骤

当我们想到“普通”用户时，我们倾向于想象他们在使用计算机时使用鼠标或触控板。 但是，如果他们的首选或唯一选择是使用键盘怎么办？ 您是否考虑过在设计应用程序时考虑键盘辅助功能？

有些人可能不想或无法操作鼠标或触控板来使用他们的计算机，原因有很多。 他们可能有永久性、慢性或暂时性的疾病，这些疾病限制了他们的灵活性或肌肉控制，导致他们的手腕或手敏感，或者难以跟随屏幕上的鼠标光标。 他们也可能是“超级用户”，他们正在寻找更多的捷径来简化他们的工作流程。 在任何这些情况下，键盘可能是个人首选或必要的与技术交互的方式。

在本文中，您将了解键盘辅助功能准则，以及设计应用程序时要牢记的五个步骤，以确保它们可以通过键盘访问。

键盘辅助功能如何工作？

如果应用程序可通过键盘访问，则意味着人们可以选择仅使用键盘来操作控制元素。 控件元素是页面上的任何交互式组件，例如按钮、链接、表单输入、视频和其他交互式内容。

键盘导航基础知识

以下是用于键盘导航的一些基本键：

• 导航到下一个控制元素： Tab（或相关单选按钮的向右或向下箭头键并选择选项）
• 导航到上一个控制元素： Shift + Tab（或相关单选按钮和选择选项的向左或向上箭头键）
• 单击控制元素： Enter 和/或空格键
• 在相关单选按钮或选择选项之间导航：箭头键

焦点顺序

控制元素响应键盘事件的顺序称为焦点顺序。 当一个元素获得焦点时，您可以使用某些键盘控件与其进行交互。 当元素失去焦点时，它会变得模糊。 浏览器呈现默认焦点状态，以帮助用户跟踪当前处于焦点的元素。

您可能还喜欢：通用设计：使您的网站和应用程序更易于访问的 11 个实用技巧。

键盘辅助功能和 Web 内容辅助功能指南 (WCAG)

Web 内容可访问性指南 (WCAG) 概述了三个级别的合规性 - A 级、AA 级和 AAA 级 - 已被采纳为全球区域或国家网络可访问性法律的标准。

键盘可访问性是 A 级合规性的成功标准之一。 A 级标准描述了所有 Web 内容的必备功能。 它们也被认为是最容易实施的。

“如果我们不小心，键盘辅助功能也很容易出错。”

也就是说，如果我们不小心，键盘可访问性也很容易出错。 以下是在网络上发现的常见键盘辅助功能问题的示例：

• 难以察觉的焦点状态
• 对焦顺序不正确
• 无法获得焦点的交互元素
• 不接收键盘交互的复杂组件

幸运的是，我们可以使用很多技巧来记住键盘用户并避免在我们自己的应用程序中犯这些错误。

构建键盘可访问应用程序的 5 个步骤

1. 设计直观的交互

当我们呈现没有自定义行为的简单控制元素时，我们通常可以利用它们内置的键盘辅助功能。 但是，如果我们不知道与按钮、链接或输入相关的标准键盘行为，我们可能会无意中为键盘用户创造令人困惑的体验。

“如果我们不知道与按钮、链接或输入相关的标准键盘行为，我们可能会无意中为键盘用户创造令人困惑的体验。”

例如，开发人员有时会使用 CSS 来隐藏原生 HTML 单选按钮，以支持更具风格的视觉效果。 输入是幕后的单选按钮并不明显，因此键盘用户可能没有意识到他们应该使用箭头键——而不是 Tab 键——在相关选项之间切换焦点。

为了避免这个问题，我们应该显示一些至少类似于原生 HTML 元素的东西，以便为任何想要或需要使用键盘与之交互的人提供视觉提示。

2. 构建你的应用程序，让键盘可以做鼠标可以做的一切

请注意没有内置键盘辅助功能的元素。 默认情况下，布局元素、列表、表格、标题、段落和非语义 HTML 标记不支持键盘快捷键。 然而，它们经常用于构建更复杂的组件，例如选项卡、拖放列表或模式。

JavaScript 使我们能够添加事件监听器，使非控制元素响应鼠标点击或手势。 例如，在 React 中，我们可以使用onClick属性为列表项元素添加交互性。

每当我们向非控件元素添加交互性时，我们需要将它们的tabIndex属性设置为0 。 这将允许元素在按下 Tab 键时以正确的焦点顺序接收焦点。 我们还需要实现 keypress 或 keydown 事件处理程序，以通过 Enter 键和/或空格键注册“点击”（可以使用这两种键单击链接，而按钮仅支持 Enter 键）。

我们可以通过使用锚标记或按钮元素等控件来避免一些额外的工作。 我们总是可以使用 CSS 来覆盖默认的链接和按钮样式，并使交互元素跨越其非交互父元素的整个宽度以最大化目标区域。

无论我们是否将控制元素用于非本机功能，我们可能仍需要为箭头键（在选项卡组件中的选项卡之间导航）或 Escape 键（关闭覆盖）添加事件侦听器以使我们的组件 100百分比键盘可访问。

如果我们为更复杂的组件实现非标准键盘行为，提供可见的说明来描述人们可以用来与组件交互的键盘控件会很有帮助。

3.覆盖默认焦点顺序时做额外的工作

焦点顺序是另一个与键盘可访问性密切相关的 WCAG 要求。 为满足 A 级标准，焦点顺序应与页面上交互元素的视觉顺序一致。 键盘用户应该能够在屏幕上从上到下并在与文本内容相同的水平方向（从左到右或从右到左）中浏览控制元素。

满足此标准的最简单方法是保留默认的焦点顺序，它由元素在标记中的排列顺序决定，因为它是。 当我们在控制元素的视觉顺序和它们在源代码中的布局方式之间引入差异时，我们就有可能无法满足此标准。

您可能还喜欢：使用 Liquid 和 Shopify 构建可访问的面包屑导航。

如果我们使用上面的屏幕截图作为示例，假设我们希望“更新标签”卡在为较窄的视口堆叠时与“更新描述”卡交换位置。 如果卡片呈现为弹性项目，我们可能会考虑使用 order CSS 属性在特定断点处更改它们的顺序。

虽然order属性影响弹性项目的视觉顺序，但它不会更新它们在源代码中的排列。 因此，当用户按 Tab 键在每个按钮之间导航时，“更新标签”按钮仍将在“更新描述”之前获得焦点，即使它们在屏幕上的显示顺序相反。 这会导致焦点意外地在页面上上下移动，从而给用户带来一种迷失方向的体验。

避免此问题的一种方法是在标记中呈现两个版本的卡片：一个按较宽视口宽度的预期顺序排列，另一个按较窄视口宽度所需的顺序排列。 我们可以使用display属性在某些断点处在它们之间切换。

如果我们不想在标记中保留两个版本，我们将需要使用 JavaScript 来更新卡片在页面上堆叠时的tabIndex属性。 根据我们正在呈现的控制元素的数量，这种方法可能比在标记中维护不同版本的卡片更难获得正确的结果。

4.自定义焦点状态时，为最需要的用户设计

浏览器使用outline CSS 属性来呈现元素处于焦点的某种视觉指示。 焦点状态旨在帮助用户在使用键盘导航页面时识别哪个元素将注册键盘事件。

设计人员和开发人员替换浏览器呈现的默认焦点状态是很常见的。 这可能涉及更新默认outline ，或完全删除它并用另一个 CSS 属性替换它，例如background 、 border 、 box-shadow 、 color或transform 。

您可能还喜欢：使用 Liquid 创建可访问的分页。

无论我们决定在我们的应用程序中呈现自定义焦点状态，我们应该确保它们满足以下可访问性要求：

• 足够的颜色对比度：我们的焦点状态和它周围的颜色之间应该有足够的对比度，以便视力受损的用户可以轻松地跟踪当前聚焦的元素。
• 颜色的变化与其他视觉指标相结合：色盲用户可能不会注意到元素边框、字体或背景颜色的变化。 它应该与其他不需要用户能够区分颜色的视觉变化搭配使用。 这也适用于涉及颜色变化的悬停和错误状态。
• 在高对比度主题中可见：在 Windows 设备上启用高对比度模式时，一些 CSS 属性（包括background和box-shadow ）将被忽略。 颜色的变化也可能不会被记录下来，这就是为什么依赖额外的指示器非常重要，这些指示器对于需要背景和前景颜色之间更多对比度的人来说是可感知的。

虽然覆盖默认outline属性是可以接受的，但切勿在不提供替代品的情况下删除默认焦点状态。

5.为键盘用户提供快捷键

如果有人使用鼠标浏览网页，他们可以在页面加载时滚动到无关的标题内容，以找到他们正在寻找的信息。 对于键盘用户来说，这个过程不是很流畅，他们可能需要在多个导航链接或页面主要内容之前的任何其他控制元素之间切换。

作为开发人员，我们可以在应用程序每个页面的顶部提供一个“跳过链接”，以允许键盘用户绕过页面主要内容之前的控制元素。 跳过链接通常是隐藏的，直到它获得焦点。 使用鼠标与您的应用程序交互的人看不到它，但对于使用键盘的人来说，它将是第一个获得焦点的元素。

单击链接时，焦点转移到主要内容容器，键盘用户可以立即开始在页面上的主要控制元素之间切换。

跳过链接不仅仅是方便的快捷方式。 它们是旁路块的示例，需要满足 A 级 WCAG 标准。

自己成为键盘用户，经常测试您的应用

对于不习惯使用辅助技术或设备的人来说，测试键盘可访问性的学习曲线相对较低。 您只需要使用键盘、熟悉标准键盘行为以及使用 Windows 高对比度模式（通过获取 Windows 设备或安装虚拟机）。

在测试我们的应用程序的键盘可访问性时，请记住以下一些问题：

• 我能否使用我的键盘与任何响应鼠标点击和手势的东西进行交互？
• 当它获得焦点时，有人会知道如何与这个元素交互吗？
• 焦点顺序是否与页面上交互元素的视觉顺序相匹配？
• 我能否跟踪当前聚焦的元素，即使我需要更高的颜色对比度？
• 我可以很容易地到达页面的主要内容吗？

对所有这些问题都回答“是”并不需要付出很多努力，并且在任何情况下都能对用户产生积极影响：无论他们有身体残疾、正在寻找节省时间的方法，还是需要使用他们的电脑用一只手。

辅助功能测试是应用程序开发的重要组成部分。 具体来说，键盘可访问性与为使用屏幕阅读器的人提供替代文本或为无法听到音频内容的人提供字幕一样重要。 归根结底，如果您希望您的应用程序可以完全访问，那么使用该应用程序不需要使用鼠标的能力。