移动设备可访问性

现代移动设备的无障碍性状况——以及对Web标准的一般支持——都很好。移动设备完全使用与桌面浏览器不同的Web技术的日子早已过去，迫使开发人员使用浏览器嗅探并为它们提供完全不同的网站（尽管相当多的公司仍然检测移动设备的使用情况并为它们提供单独的移动域名）。

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

要使网站在移动设备上可访问且可用，您只需遵循一般的良好网页设计和无障碍最佳实践即可。

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

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

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

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

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. 选择所需的选项后，双击以选择该选项。

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

浏览网页

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

例如，启用TalkBack后

1. 打开您的Web浏览器。
2. 激活URL栏。
3. 输入一个网页，该网页上有很多标题，例如bbc.co.uk的主页。要输入URL的文本
   • 向左/向右滑动直到到达它，然后双击以选择URL栏。
   • 将手指按在虚拟键盘上，直到得到所需的字符，然后松开手指进行输入。对每个字符重复此操作。
   • 完成后，找到Enter键并按它。
4. 向左和向右滑动以在页面上的不同项目之间移动。
5. 向上和向右平滑滑动以进入本地内容菜单。
6. 向右滑动，直到找到“标题和地标”选项。
7. 双击以选择它。现在，您可以向左和向右滑动以在标题和ARIA地标之间移动。
8. 要返回默认模式，请再次通过向上和向右滑动进入本地上下文菜单，选择“默认”，然后双击以激活。

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

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

启用VoiceOver后，iOS的基本控制手势将略有不同

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

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

解锁手机

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

使用转子

启用VoiceOver后，您可以使用一个名为“转子”的导航功能，它允许您快速从许多常用的有用选项中进行选择。要使用它

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

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

浏览网页

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

1. 打开您的Web浏览器。
2. 激活URL栏。
3. 输入一个网页，该网页上有很多标题，例如bbc.co.uk的主页。要输入URL的文本
   • 向左/向右滑动直到到达它，然后双击以选择URL栏。
   • 对于每个字符，将手指按在虚拟键盘上，直到得到所需的字符，然后松开手指以选择它。双击以输入它。
   • 完成后，找到Enter键并按它。
4. 向左和向右滑动以在页面上的项目之间移动。您可以双击一个项目以选择它（例如，遵循链接）。
5. 默认情况下，所选转子选项将是朗读速度；您目前可以向上和向下滑动以增加或减少朗读速度。
6. 现在像拨动一个拨盘一样在屏幕上旋转两个手指以显示转子并在其选项之间移动。以下是一些可用选项的示例
   • 朗读速度：更改朗读速度。
   • 容器：在页面上的不同语义容器之间移动。
   • 标题：在页面上的标题之间移动。
   • 链接：在页面上的链接之间移动。
   • 表单控件：在页面上的表单控件之间移动。
   • 语言：在不同的翻译之间移动（如果可用）。
7. 选择“标题”。现在，您可以向上和向下滑动以在页面上的标题之间移动。

在我们的CSS和JavaScript无障碍性文章中，我们研究了特定于某种类型的控制机制的事件的概念（请参阅鼠标特定事件）。概括地说，这些会导致无障碍性问题，因为其他控制机制无法激活关联的功能。

例如，click事件在无障碍性方面很好——关联的事件处理程序可以通过单击设置处理程序的元素、切换到它并按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（也请 查看示例）。

响应式设计 是一种实践，它使您的布局和其他应用程序功能能够根据屏幕尺寸和分辨率等因素动态更改，从而使不同设备类型的用户都能使用和访问它们。

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

• 布局对移动设备的适用性。例如，多列布局在窄屏幕上效果不佳，并且可能需要增大文本大小以使其可读。可以通过使用 媒体查询、视口 和 Flexbox 等技术创建响应式布局来解决此类问题。
• 节省下载的图像大小。通常，小屏幕设备不需要与桌面设备一样大的图像，并且更有可能处于缓慢的网络连接中。因此，明智的做法是根据需要为窄屏幕设备提供较小的图像。您可以使用 响应式图像技术 来处理此问题。
• 考虑高分辨率。许多移动设备具有高分辨率屏幕，因此需要更高分辨率的图像，以便显示屏能够保持清晰锐利。同样，您可以使用响应式图像技术根据需要提供图像。此外，许多图像需求可以使用 SVG 矢量图像格式来满足，该格式如今已得到广泛的浏览器支持。SVG 文件大小较小，无论显示尺寸如何，都能保持清晰（有关更多详细信息，请参阅 将矢量图形添加到 Web）。

在使网站在移动设备上更易访问时，还需要考虑其他重要问题。我们在这里列出了几个，但我们会想到更多时再添加。

不禁用缩放

使用 视口，可以禁用缩放。始终确保启用调整大小，并在 <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 设计的不同技术。
• 使您的网站在触摸屏设备上正常工作——一篇关于使用触摸事件使交互在移动设备上正常工作的有用文章。

• 上一个
• 概述：可访问性
• 下一个