手动测试网页可访问性的准备工作

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

基础知识

当我坐到崭新的工作电脑前时，我想尽可能多地使用不同的浏览器手动测试其辅助功能。这意味着需要注意一些关键事项并完成一些额外的步骤。以下步骤适用于在 Mac 开发环境下使用免费屏幕阅读器。

我将逐条阐述：

• 免费屏幕阅读器
• 浏览器/屏幕阅读器组合
• 需要额外配置才能在不同平台上测试您的项目

虽然本文将只关注设置，但本系列的后续文章将涵盖无障碍手动测试的其他部分。

如果您还有其他想了解的话题，请随时联系我们！

屏幕阅读器

视窗

• 旁白（由微软制作，预装）
• NVDA（最流行的免费解决方案）

OSX

• VoiceOver（苹果公司出品，预装）

iOS

• VoiceOver（苹果公司出品，预装）

安卓

• TalkBack（谷歌出品，预装）

浏览器/屏幕阅读器最佳搭档

在之前一家公司从事无障碍设计工作时，我曾与微软的一个团队密切合作。他们建议我只测试 Internet Explorer 搭配 NVDA，Edge 搭配 Narrator。这种技术搭配的概念对于测试至关重要，因为有些组合兼容性不佳，有些组合的使用并不广泛。

以下是根据 2019 年 9 月对屏幕阅读器用户的调查，按使用频率排序的配对（不包括付费屏幕阅读器）：

• NVDA 和 Firefox
• NVIDIA 和 Chrome
• VoiceOver 和 Safari
• VoiceOver 和 Chrome
• NVDA 和 Internet Explorer

Narrator 和 Edge 虽然没有明确列入调查范围，但我认为随着 Edge 的普及，仍然值得进行测试。

额外配置

浏览器

Safari 需要额外设置才能允许键盘导航：

1. 在 Safari 浏览器中打开“偏好设置”>“高级”。
2. 在“辅助功能”部分下，选中“按 Tab 键突出显示网页上的每个项目”。

移动设备

如果您有想要用来测试移动屏幕阅读器和其他辅助应用程序的现实移动设备，您也可以通过该设备访问 localhost！

安卓

要从您的 Android 设备访问 localhost，您需要执行（不止）以下几项操作：

1. 首先，请确保您的手机已启用开发者选项。您可以通过依次Settings > System > About Phone点击“版本号”（最底部的选项）七次来完成此操作。
2. 现在应该会出现一个新的设置列表Settings > System > Advanced > Developer Options。点击这里启用USB 调试。
3. 通过 USB 将设备连接到开发机器。
4. 在 Chrome 浏览器中，访问 DevTools 中的远程设备面板（位于More Tools > Remote Devices）。
5. 您应该会在设备列表顶部看到一个待处理的设备。您的手机应该会弹出提示，询问您是否允许远程调试。请在您的手机上允许远程调试。
6. 现在，您需要在 DevTools 的“远程设备”选项卡中的“设置”中启用端口转发。（设置位于设备列表的最底部，您可能需要向下滚动才能找到它。）选中复选框以启用端口转发，然后单击“添加规则”按钮，为您的手机创建一个端口，以便访问浏览器中的内容。在规则的一侧输入您希望在手机上使用的端口（例如 802.1 3000），另一侧输入您希望从计算机访问的本地地址（例如，localhost:9000对于已部署的 Gatsby 站点）。
7. 砰！如果你用localhost:3000手机访问，就能看到你的网站了！

编辑（2020 年 1 月 9 日）：设备设置以前位于开发者工具中，但现在已移至更方便的位置。chrome://inspect/#devices

iOS

1. 请确保您的设备和电脑连接到同一个WiFi网络。
2. 0.0.0.0运行服务器时，请务必指定主机。（例如gatsby serve --host=0.0.0.0）
3. 在你的 Mac 上，前往 [此处应填写路径Settings > Sharing]。你可以在“计算机名称”下方的小字中找到你电脑本地主机的地址。它的格式为 [此处应填写格式] computer-name.local。你可以点击“编辑…”按钮来编辑这个地址。（例如，我把它改成了 [gatsby.local此处应填写格式]，这样在我的设备上输入起来就方便多了。）
4. 在您的 iOS 设备上，导航至上一步中确定的地址，并指定您的端口。（例如gatsby.local:9000）

注意：我的设备尝试在 URL 开头添加“-” 。如果您无法访问本地主机，请确保地址栏中www.没有“-” 。www.

虚拟环境

VirtualBox

我从Windows 开发中心下载了一个 Windows 10 虚拟机。

您可以从以下位置访问主机计算机的本地主机10.0.2.2：

平行线

Parallels 是一款付费产品，但由于访问 localhost 需要额外的配置，所以我想在这里也介绍一下。

在部署网站时，请确保将其托管在 . 上0.0.0.0。例如，如果我运行的是一个 Gatsby 网站，我会这样做：gatsby serve --host=0.0.0.0

然后，您可以从您的 Parallels 虚拟机访问 localhost。10.211.55.2

接下来

本系列后续文章将帮助您掌握手动测试网站可访问性的方法。目前，文章主题和发布时间尚未确定。

我希望涵盖以下主题：

• 使用键盘浏览网页
• 屏幕阅读器使用技巧和快捷键
• 测试技术和方法
• 其他辅助技术

你想看到什么？你有什么建议想分享吗？