移动可访问性

移动设备上的可访问性

现代移动设备上的可访问性状况以及对 Web 标准的总体支持都很好。移动设备运行与桌面浏览器完全不同的 Web 技术，迫使开发人员使用浏览器嗅探并为它们提供完全独立的站点（尽管仍有相当多的公司检测移动设备的使用并为它们提供单独的移动域）的日子已经一去不复返了。

如今，移动设备通常可以处理功能齐全的网站，主要平台甚至内置了屏幕阅读器，使视障用户能够成功使用它们。现代移动浏览器也倾向于很好地支持 WAI-ARIA。

要使网站在移动设备上易于访问和使用，您只需遵循一般的良好 Web 设计和可访问性最佳实践。

有些例外情况需要对移动设备进行特殊考虑；主要有：

• 控制机制 — 确保按钮等界面控件在移动设备（即主要是触摸屏）以及台式机/笔记本电脑（主要是鼠标/键盘）上都可访问。
• 用户输入 — 使移动设备上的用户输入要求尽可能无痛（例如，在表单中，尽量减少打字）。
• 响应式设计 — 确保布局在移动设备上正常工作，控制图像下载大小，并考虑为高分辨率屏幕提供图像。

Android 和 iOS 上的屏幕阅读器测试总结

最常见的移动平台都具有功能齐全的屏幕阅读器。它们的功能与桌面屏幕阅读器大致相同，只是它们主要通过触摸手势而不是组合键进行操作。

让我们看看主要的两个：Android 上的 TalkBack 和 iOS 上的 VoiceOver。

Android TalkBack

TalkBack 屏幕阅读器内置于 Android 操作系统中。

要打开它，请查找您的手机型号和 Android 版本，然后查找 TalkBack 菜单的位置。它在 Android 版本之间甚至不同手机型号之间差异很大。一些手机制造商（例如三星）甚至在较新的手机中没有 TalkBack，而是选择了自己的屏幕阅读器。

找到 TalkBack 菜单后，按下滑动开关以打开 TalkBack。按照您看到的任何其他屏幕提示进行操作。

当 TalkBack 打开时，您的 Android 设备的基本控件会有些不同。例如：

1. 单击应用程序将选中它，设备将读出该应用程序是什么。
2. 左右滑动将在应用程序之间移动，或者如果您在控制栏中，则在按钮/控件之间移动。设备将读出每个选项。
3. 双击任何位置将打开应用程序/选择选项。
4. 您还可以“通过触摸探索”——将手指按在屏幕上并拖动它，您的设备将读出您移动经过的不同应用程序/项目。

如果您想关闭 TalkBack

1. 使用当前启用的不同手势导航回 TalkBack 菜单屏幕。
2. 导航到滑动开关并激活它以将其关闭。

有关 TalkBack 手势的更完整列表，请参阅 使用 TalkBack 手势。

解锁手机

当 TalkBack 打开时，解锁手机会有些不同。

您可以从锁定屏幕底部向上滑动两根手指。如果您已为解锁设备设置了密码或图案，您将被带到相关的输入屏幕以输入它。

您还可以通过触摸探索找到屏幕底部中间的“解锁”按钮，然后双击。

全局和本地菜单

无论您在设备上导航到何处，TalkBack 都允许您访问全局和本地上下文菜单。前者提供与整个设备相关的全局选项，后者提供仅与您当前所在的应用程序/屏幕相关的选项。

要访问这些菜单

1. 快速向下然后向右滑动以访问全局菜单。
2. 快速向上然后向右滑动以访问本地菜单。
3. 左右滑动以循环浏览不同的选项。
4. 选择所需的选项后，双击以选择该选项。

有关全局和本地上下文菜单下所有可用选项的详细信息，请参阅 使用全局和本地上下文菜单。

浏览网页

您可以在网络浏览器中使用本地上下文菜单，以查找仅使用标题、表单控件或链接来导航网页的选项，或逐行导航等。

例如，在 TalkBack 开启的情况下

1. 打开您的网络浏览器。

2. 激活 URL 栏。

3. 输入一个包含大量标题的网页，例如 bbc.co.uk 的首页。要输入 URL 的文本

   • 左右滑动直到到达 URL 栏，然后双击以选择它。
   • 将手指按在虚拟键盘上直到获得所需的字符，然后松开手指以键入它。对每个字符重复此操作。
   • 完成后，找到 Enter 键并按下它。

4. 左右滑动以在页面上的不同项目之间移动。

5. 向上和向右平滑滑动以进入本地内容菜单。

6. 向右滑动直到找到“标题和地标”选项。

7. 双击以选择它。现在您将能够左右滑动以在标题和 ARIA 地标之间移动。

8. 要返回默认模式，请再次通过向上和向右滑动进入本地上下文菜单，选择“默认”，然后双击以激活。

iOS VoiceOver

VoiceOver 的移动版本内置于 iOS 操作系统中。

要打开它，请转到您的“设置”应用程序并选择“辅助功能”>“VoiceOver”。按下“VoiceOver”滑块以启用它（您还将在此页面上看到与 VoiceOver 相关的其他几个选项）。

一旦启用 VoiceOver，iOS 的基本控制手势会有些不同

1. 单次轻触将导致您轻触的项目被选中；您的设备将读出您轻触的项目。
2. 您还可以通过左右滑动在屏幕上的项目之间导航，或者通过在屏幕上滑动手指在不同项目之间移动（当您找到所需项目时，您可以移开手指以选择它）。
3. 要激活选定的项目（例如，打开选定的应用程序），请双击屏幕上的任意位置。
4. 用三根手指滑动以滚动页面。
5. 用两根手指轻触以执行与上下文相关的操作——例如，在相机应用程序中拍照。

要再次关闭它，请使用上述手势导航回“设置”>“通用”>“辅助功能”>“VoiceOver”，并将“VoiceOver”滑块切换回关闭。

解锁手机

要解锁手机，您需要像往常一样按下主页按钮（或滑动）。如果设置了密码，您可以通过滑动/滑动（如上所述）选择每个数字，然后在找到正确的数字后双击以输入每个数字。

使用转子

当 VoiceOver 开启时，您可以使用一个称为转子的导航功能，它允许您快速从一些常用的有用选项中进行选择。要使用它

1. 用两根手指在屏幕上旋转，就像您正在转动拨盘一样。当您进一步旋转时，每个选项都会被朗读出来。您可以来回切换以循环浏览选项。
2. 一旦找到所需的选项
   • 松开手指以选择它。
   • 如果这是一个您可以迭代其值的选项（例如音量或语速），您可以向上或向下滑动以增加或减少所选项目的值。

转子下的可用选项是上下文相关的——它们会根据您所在的应用程序或视图而有所不同（请参阅下面的示例）。

浏览网页

让我们尝试使用 VoiceOver 浏览网页

1. 打开您的网络浏览器。

2. 激活 URL 栏。

3. 输入一个包含大量标题的网页，例如 bbc.co.uk 的首页。要输入 URL 的文本

   • 左右滑动直到到达 URL 栏，然后双击以选择它。
   • 对于每个字符，将手指按在虚拟键盘上直到获得所需的字符，然后松开手指以选择它。双击以键入它。
   • 完成后，找到 Enter 键并按下它。

4. 左右滑动以在页面上的项目之间移动。您可以双击一个项目以选择它（例如，点击链接）。

5. 默认情况下，选定的转子选项将是语速；您当前可以向上和向下滑动以增加或减少语速。

6. 现在用两根手指在屏幕上像拨盘一样旋转以显示转子并在其选项之间移动。以下是一些可用选项的示例

   • 语速：更改语速。
   • 容器：在页面上的不同语义容器之间移动。
   • 标题：在页面上的标题之间移动。
   • 链接：在页面上的链接之间移动。
   • 表单控件：在页面上的表单控件之间移动。
   • 语言：在不同的翻译之间移动，如果它们可用。

7. 选择“标题”。现在您将能够上下滑动以在页面上的标题之间移动。

控制机制

在我们的 CSS 和 JavaScript 可访问性文章中，我们探讨了特定于某种控制机制的事件（请参阅 鼠标特定事件）的概念。回顾一下，这些事件会导致可访问性问题，因为其他控制机制无法激活相关功能。

举例来说，click 事件在可访问性方面表现良好——相关的事件处理程序可以通过单击设置了处理程序的元素、通过 Tab 键切换到它并按下 Enter/Return 键，或者在触摸屏设备上轻触它来调用。尝试我们的 simple-button-example.html 示例（查看实时运行）以了解我们的意思。

或者，鼠标特定事件（例如 mousedown 和 mouseup）会产生问题——它们的事件处理程序无法使用非鼠标控件调用。

如果您尝试使用键盘或触摸控制我们的 simple-box-drag.html（查看实时示例）示例，您就会看到问题。这是因为我们使用了以下代码：

div.onmousedown = () => {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  movePanel();
};

document.onmouseup = stopMove;

为了启用其他形式的控制，您需要使用不同但等效的事件——例如，触摸事件在触摸屏设备上起作用：

div.ontouchstart = (e) => {
  initialBoxX = div.offsetLeft;
  initialBoxY = div.offsetTop;
  positionHandler(e);
  movePanel();
};

panel.ontouchend = stopMove;

我们提供了一个简单的示例，展示了如何同时使用鼠标和触摸事件——请参阅 multi-control-box-drag.html（也请参阅实时示例）。

响应式设计

响应式设计是一种根据屏幕尺寸和分辨率等因素动态更改应用程序布局和其他功能的做法，以便它们对不同设备类型的用户可用且易于访问。

特别需要为移动设备解决的最常见问题是：

• 布局是否适合移动设备。例如，多列布局在狭窄的屏幕上效果不佳，并且可能需要增加文本大小才能清晰可读。这些问题可以通过使用 媒体查询、视口 和 弹性盒 等技术创建响应式布局来解决。
• 节省下载图像的大小。一般来说，小屏幕设备不需要像桌面设备那样大的图像，而且它们更有可能处于较慢的网络连接中。因此，明智的做法是根据需要向窄屏幕设备提供较小的图像。您可以使用 响应式图像技术 来处理这个问题。
• 考虑高分辨率。许多移动设备都具有高分辨率屏幕，因此需要更高分辨率的图像，以便显示效果保持清晰锐利。同样，您可以使用响应式图像技术根据需要提供图像。此外，许多图像需求可以使用 SVG 矢量图像格式来满足，该格式在当今的浏览器中得到了很好的支持。SVG 文件大小小，无论显示尺寸如何都能保持清晰（有关更多详细信息，请参阅 在 HTML 中包含矢量图形）。

移动设备特定注意事项

在使网站在移动设备上更易于访问时，还有其他重要问题需要考虑。我们在这里列举了一些，但当我们想到更多时会添加。

不要禁用缩放

使用 视口，可以禁用缩放。始终确保启用调整大小，并在 <head> 中将宽度设置为设备的宽度。

<meta name="viewport" content="width=device-width; user-scalable=yes" />

如果可能的话，永远不要设置 user-scalable=no——许多人依赖缩放才能看到您网站的内容，因此取消此功能是一个非常糟糕的主意。在某些情况下，缩放可能会破坏 UI；在这种情况下，如果您觉得需要禁用缩放，则应提供其他等效功能，例如在不破坏 UI 的情况下增大文本大小的控件。

保持菜单可访问

由于移动设备屏幕窄得多，因此当网站在移动设备上查看时，通常会使用媒体查询和其他技术，使导航菜单缩小为显示屏顶部的一个小图标——只有在需要时才能按下该图标以显示菜单。这通常由一个“三条水平线”图标表示，因此这种设计模式被称为“汉堡包菜单”。

实现此类菜单时，您需要确保显示它的控件可通过适当的控制机制访问（通常是移动设备的触摸），如上述控制机制中所述，并且在访问菜单时，页面的其余部分被移开或以某种方式隐藏，以避免导航时的混淆。

点击此处查看一个好的汉堡包菜单示例。

用户输入

在移动设备上，输入数据往往比在台式计算机上更让用户感到烦恼。使用台式机或笔记本电脑键盘输入表单文本比使用触摸屏虚拟键盘或微型移动物理键盘更方便。

因此，尽量减少所需的打字量是值得的。例如，您可以不让用户每次都使用常规文本输入填写他们的职位，而是提供一个包含最常见选项的 <select> 菜单（这也有助于数据输入的一致性），并提供一个“其他”选项，显示一个文本字段以输入任何异常值。您可以在 common-job-types.html 中看到此想法的简单示例（查看常见职位示例实时运行）。

还值得考虑在移动平台上使用 HTML 表单输入类型（例如日期），因为它们处理得很好——例如，Android 和 iOS 都显示可用的小部件，这些小部件与设备体验非常契合。请参阅 html5-form-examples.html 以获取一些示例（请参阅 HTML5 表单示例实时运行）——尝试在移动设备上加载和操作这些示例。例如：

• number、tel 和 email 类型显示适合输入数字/电话号码的虚拟键盘。
• time 和 date 类型显示适合选择时间和日期的选择器。

如果您想为桌面提供不同的解决方案，您总是可以使用功能检测向移动设备提供不同的标记。请查看我们的功能检测文章以获取更多信息。

总结

在本文中，我们向您提供了一些关于常见移动辅助功能特定问题的详细信息以及如何克服这些问题。我们还向您介绍了最常用屏幕阅读器的使用方法，以帮助您进行辅助功能测试。

另见

• 移动 Web 开发指南 — 《Smashing Magazine》中涵盖不同移动 Web 设计技术的文章列表。
• 让您的网站在触屏设备上运行 — 关于使用触摸事件使交互在移动设备上运行的有用文章。

• 上一页
• 概述：Web 上的可访问性
• 下一页