针对纯键盘和辅助技术用户的 UX 优化
已发表: 2022-03-10（这是一篇赞助文章。）关于可访问性的一个很酷的事情是，它迫使您超越典型的有视力的、基于鼠标的用户体验来看待和思考您的应用程序。 仅通过键盘 (KO) 和/或辅助技术 (AT) 导航的用户不仅在很大程度上依赖于您的应用程序的信息架构是否周到，而且您的应用程序为保持所有类型用户的体验尽可能简单而提供的功能。
在本文中，我们将讨论一些可以让您的 KO/AT 用户体验更好的功能，而不会真正改变其他人的体验。
添加到您的应用程序的用户体验
这些是您可以添加到应用程序中的功能，以改善 KO/AT 用户的 UX。
跳过链接
跳过链接是一种导航功能，不可见地位于网站或应用程序的顶部。 当它存在时，它会被唤起并在应用程序的第一个制表位上可见。
跳过链接允许您的用户“跳过”到应用程序中感兴趣的各个部分，而无需循环切换到它。 如果您的应用程序有多个感兴趣的领域，您认为您的用户应该可以快速访问您的应用程序的入口点，则跳过链接可以有多个链接。
对于 KO/AT 用户来说，这是一个有用的工具，既可以让他们快速遍历您的应用程序，又可以帮助他们适应应用程序的信息架构。 对于所有其他用户，他们甚至可能永远不会知道此功能的存在。
这是我们如何处理跳过链接的示例。 单击链接后，点击Tab ⇥并查看左上角。 跳过链接有两个链接： Main Content和Code Samples 。 您可以使用Tab ⇥在它们之间移动，按 Enter导航到链接。
快捷方式/热键菜单
这是我想每个人都熟悉的一个功能：快捷键和热键。 您可能不时使用它们，它们在应用程序的高级用户中非常受欢迎，并且有多种形式。
对于 KO/AT 用户来说，快捷键/热键是无价的。 它们允许他们按预期使用应用程序，而无需通过应用程序直观地定位任何内容或选项卡来访问元素或内容。 虽然在快捷方式/热键菜单中表示频繁的操作和内容总是很受欢迎，但您可能还需要考虑一些可能隐藏在您的 UI 中的不太频繁的操作（有充分的理由），但仍然是用户想要的东西能够访问。
为这些功能制作快捷方式对 KO/AT 用户非常有帮助。 您可以使命令更复杂一些，例如使用 (3) 击键来唤起它，以暗示它是一个不太常用的功能。 如果您有快捷方式/热键菜单，请确保找到一种在您的应用程序中推广它的方法，以便您的用户，尤其是您的 KO/AT 用户，可以找到并有效地使用它。
用户教育
用户教育是指指导用户做什么、去哪里或期望什么的功能。 工具提示、指出、信息气泡等都是用户教育的例子。
在为您的用户教育设计、放置和/或编写副本时，您应该问自己一件事：
“如果我看不到这一点，了解______还有价值吗？”
很多时候，它只是通过这个镜头重新定位用户教育，这可以为每个人带来更好的体验。 例如，与其说“下一步，单击下面的按钮”，不如写成“要开始，请单击开始按钮”。 第二种方法消除了视觉方向，而是专注于有视力的和 KO/AT 用户都可以使用的公共信息。
注意：我应该提一下，使用用户教育功能（例如指出）在应用程序上直观地指出事物是完全可以的，只需确保伴随文本让您的 KO/AT 用户理解视觉上提到的相同事物。
请参阅 Harris Schneiderman 的 Pen ftpo 演示。
增强应用程序的用户体验
您可以对常用组件/功能进行更改或调整，以改善 KO/AT 用户的 UX。
模态聚焦
现在我们进入细节。 可访问性的一大优点是它如何打开通往解决您以前可能没有考虑过的问题的新方法的大门。 您可以使某些东西完全可访问 WCAG 2.0 AA，并使用非常不同的方法解决问题。 对于模态，我们在 Deque 提出了一种有趣的方法，大多数有视力的用户完全看不到这种方法，但 KO/AT 用户几乎会立即注意到它。
为了使模态可以访问，它需要在被调用时宣布自己。 执行此操作的两种常见方法是：在模态打开后聚焦模态正文或在模态打开后聚焦模态标题（如果有）。 您这样做是为了让用户的 AT 可以读出模态的意图，例如“编辑个人资料”或“创建新订阅”。
在您聚焦正文或标题后，点击Tab ⇥会将焦点发送到模式中的下一个可聚焦元素 - 通常是一个字段，或者，如果它在标题中，有时它是关闭按钮 (X)。 继续使用选项卡将带您浏览模式中的所有可聚焦元素，通常使用终端按钮（如保存和/或取消）完成。
现在我们进入有趣的部分。 将焦点放在模态中的最后一个元素后，再次点击Tab ⇥将“循环”回到第一个制表位，在模态的情况下，这将是正文或标题，因为这是我们开始的地方。 但是，在我们的模态中，我们“跳过”最初的制表位并带您到第二个停止位（在我们的模态中，它是上角的关闭 (X)。我们这样做是因为模态不需要不断宣布自己一遍又一遍地重复每个循环。它只需要在初始调用时执行此操作，而不是在任何后续行程中执行此操作，因此我们有一个特殊的程序化停止，它会在第一次后自行跳过。
这是我们专门为 KO/AT 用户提出的一个小的（但值得赞赏的）可用性改进，其他人完全不知道。
请参阅 Harris Schneiderman 的 Pen modal 演示。
导航菜单遍历和焦点/选定管理
导航菜单很棘手。 它们可以以多种方式构建，分层、嵌套，并具有无数的唤起、披露和遍历机制。 这使得在设计阶段考虑如何与 KO/AT 用户交互和代表它们变得很重要。 好的菜单应该是“进入”和“退出”的，这意味着你进入一个菜单来使用它，然后退出它来退出它（如果你不使用它）。
这个想法最好用一个文字示例来说明，所以让我们看一下来自 Cauldron 的 2 层垂直导航。
- 转到 https://pattern-library.dequelabs.com/；
- 点击Tab ⇥三次。 第一个制表位是跳过链接（我们之前讨论过），第二个是作为“返回主页”链接的标志，第三个制表符进入菜单；
- 现在您在菜单中，使用箭头键（ →和↓ ）移动和打开菜单部分；
- 在任何时候点击Tab ⇥都会让您退出菜单并转到页面内容。
导航菜单还可以与前面的一些主题（例如快捷方式/热键菜单）结合使用，以提高使用菜单的效率。
逻辑焦点保留（IE删除行，返回页面）
专注力保持非常重要。 大多数人都熟悉，至少在概念上，以页面上的逻辑预期顺序聚焦元素。 但是，当元素或内容更改/出现/消失时，它会变得模糊不清。
- 当您所在的字段被删除时，焦点在哪里？
- 当您被发送到应用程序具有新上下文的另一个选项卡时怎么办？
- 由于 SAVE 之类的终端操作而关闭模式后会怎样？
对于有视力的用户，有视觉提示可以告知他们发生了什么。
这是一个示例：您有一个Edit Recipe模式，可让您的用户添加和删除任何成分。 有一个成分字段，其下方有一个“添加另一种成分”按钮。 （是的，它的样式是链接，但这是另一天的主题。）您的重点是按钮。 单击按钮，按钮和第一个字段之间会出现一个新字段。 重点应该放在哪里？ 很可能您的用户添加了另一种成分来与之互动，因此焦点应该从按钮转移到新添加的字段。
请参阅 Harris Schneiderman 的钢笔焦点保留。
所有这一切的最大收获不是具体的例子，而是支持它们的心态——通过 KO/AT 用户的镜头考虑您的应用程序的 UX，以及有远见的、仅使用鼠标的用户。 一些最好和最聪明的想法来自最有趣和最重要的挑战。
如果您需要帮助确保您的功能可访问，则可以使用 Deque 的免费 Web 可访问性测试应用程序：ax pro 对上述所有示例以及无数其他示例进行测试。 它是免费的，您可以在这里注册。