检查 Pull Request 的可访问性时，我会考虑以下 5 件事。
（图片来自Unsplash用户Cookie the Pom）
开发可靠、易用的应用程序确实需要整个团队的努力，而我以前很少写到的是，当我不亲自编写代码时，我是如何处理这些问题的。
这绝非一份完整的无障碍功能实现或测试指南，但希望能为审核 Pull Request 时提供一些思路 🙂 欢迎在评论区留下您的任何技巧、建议或问题！
如果您想直接跳转到某个章节：
1. 这到底是什么功能？🤔
我发现退一步思考我们正在尝试引入/重构的 UI 模式非常有用，并查看WAI ARIA 创作实践，以提醒自己这种 UI 模式应该如何运作。
这些文档对于开发来说也非常好，值得收藏，因为它们列出了预期行为、aria 属性，并链接到示例实现。
退后一步，问问自己“这是什么？”也能帮助你发现div用更语义化的替代词替换“s”的机会。我已经数不清有多少次灵光一闪，意识到“哦等等，这其实是[此处插入一个显而易见的东西]！”
2. 用斧头进行初步检查🪓
Axe浏览器扩展程序可以帮助我们捕捉很多唾手可得的信息，例如颜色对比度、缺失的地标或标签。
如果该功能可以处于多种状态，我会尝试在每种状态下重新运行 axe （例如，下拉菜单的折叠状态与展开状态），因为 axe 只能检查当前的 DOM。
3. 键盘操作性👩🏻💻
注意：如果您使用的是 Mac 和/或 Safari 浏览器，请确保您的设置允许使用 Tab 键切换到交互元素。请参阅macOS 中的浏览器键盘导航。
所有功能都应仅通过键盘即可操作，包括：
- 按
Tab顺序逐个浏览交互元素（例如，通常是从上到下，从左到右）。 - 努力
Shift + Tab倒退着穿过这些元素 - 当前聚焦的元素应该清晰可见（例如，带有聚焦轮廓）。
- 您应该能够按照WAI ARIA 创作实践中的约定与可聚焦元素进行交互。例如，使用 激活链接
Enter，使用 浏览组合框建议Up Arrow/Down Arrow。 - 能够显示原本会在鼠标悬停时触发的内容（例如，鼠标悬停时显示辅助文本的工具提示）
额外提示：隐形的注意力问题
如果你在调试焦点不可见的问题时遇到困难，可以在控制台中添加以下代码，以便在焦点元素发生变化时记录下来：
document.addEventListener('focusin', () => console.log(document.activeElement))
4. 屏幕阅读器检查🤖
我曾多次被问到“你是否总是使用屏幕阅读器进行检查？”，而我的回答是“不”。
我个人认为，在以下情况下必须进行屏幕阅读器检查：
- 我们引入了一项新的交互功能（而非内容变更）：事物会动态更新/出现/消失。
- 任何
aria属性的更改或新增：这些仅通过辅助技术显示，因此，如果我们不使用屏幕阅读器进行检查，实际上就等于没有进行任何检查。
一些初始设置
我通常使用 VoiceOver 和 Safari 来进行屏幕阅读器测试。这主要是因为 VoiceOver 是 Mac 的默认屏幕阅读器，而且与 Safari 搭配使用效果最佳（如果您尝试与其他浏览器一起使用，您会注意到一些错误/异常情况）。
如果你使用的是Mac电脑，我有一篇帖子提供了一些初始设置说明：
如果您不使用 Mac，我建议您使用NVDA和 Firefox/Chrome，纯粹是因为 NVDA 是免费下载的，而且使用非常广泛（查看最新的屏幕阅读器用户调查）。
切换 VoiceOver 的开启/关闭
如果你的键盘顶部一排是功能键，你可以用它打开和关闭 VoiceOver Cmd + F5。
如果没有功能键，您可以快速连续按三次 Touch ID 按钮，调出辅助功能选项，您可以在其中选中/取消选中“启用 VoiceOver”。
转子
我通常使用 VoiceOver Rotor（通过快捷键打开）来启动屏幕阅读器检查ctrl + option + u——它是一个交互式菜单，按类型列出不同的元素（例如地标、链接、表单控件）：
按左右箭头键可在不同的菜单中移动，快速查看页面上的相关地标和元素名称。在上面的示例中，您可以很快发现“首页”链接被错误地命名了两次！
要跳转到特定元素/部分，请使用上下箭头突出显示并Enter选择。
如果你觉得转子没有用，完全可以不用它。我只是觉得它比翻阅很多页才能找到我感兴趣的部分要方便得多。
无障碍名称
Axe 通常可以帮助标记这类问题，但当我在使用屏幕阅读器浏览某个功能时，我往往会特别留意以下元素：
- 没有可访问的名称（例如，我们使用了一个没有 aria 标签的图标按钮）
- 无障碍名称不够清晰（例如“点击这里”——点击这里做什么？）
- 辅助功能名称重复出现（例如，很多“切换下拉菜单”——到底是哪个下拉菜单？）
额外提示：关闭旁白
有时，在浏览界面时，听到各种语音播报可能会有点烦人，尤其是在调试某个特定部分时。您可以按一下按键来静音任何正在进行的 VoiceOver 播报ctrl🙂
5. 关于焦点管理和动态内容呈现的思考 ✨
我通常会特别关注任何涉及内容动态出现/消失的功能——例如：下拉菜单、警告横幅、模态框。
我主要会考虑以下几点：
- 低视力用户如何知道内容已经出现/消失？屏幕阅读器会播报任何信息吗？
- 如果新内容包含任何可聚焦的元素（例如链接），我该如何点击它？如果我需要点击
Tab20 次，那肯定有问题。 - 如果我的键盘焦点原本在某个内容上，而该内容现在已经消失了——那么焦点现在在哪里？
通常aria需要使用 JavaScript 添加一些属性或手动焦点管理功能，才能使这类组件易于访问。同样，您通常可以在WAI ARIA 创作实践中找到所需的内容。