先决条件:	基本的计算机知识，对HTML，CSS和JavaScript的基本了解，了解课程中的以前的文章。
目的:	了解移动设备上的辅助功能存在哪些问题，以及如何克服这些问题。

移动设备上的辅助功能

可访问性的状态 - 和对一般的web标准的支持 - 在现代移动设备中是好的。 移动设备运行完全不同的网络技术到桌面浏览器，迫使开发人员使用浏览器嗅探并为他们完全独立的网站(尽管有不少公司仍然检测到移动设备的使用并为他们提供单独的移动域)的日子已经过去了。

近来，移动设备一般可以处理"全胖"网站，而主平台甚至还内置了屏幕阅读器，以使盲人用户成功使用它们。 现代移动浏览器对 WAI-ARIA 也有很好的支持。

要使网站在移动设备上可访问和可用，您主要只需要遵循一般的良好网络设计和辅助功能的最佳做法。

有一些例外，需要特别考虑移动; 主要有:

• Control mechanisms — Make sure that interface controls such as buttons are accessible on mobiles (i.e. mainly touch screen), as well as desktop/laptop (mainly mouse/keyboard).
• User input — Make user input requirements as painless as possible on mobile (e.g. in forms, keep typing to a minimum).
• Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about provision of images for high resolution screens.

Android和iOS上的屏幕阅读器测试摘要

最常见的移动平台具有全功能的屏幕阅读器。 这些功能与桌面屏幕阅读器的功能大致相同，只是它们主要使用触摸手势而不是按键组合来操作。

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

Android TalkBack

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

要开启此功能，请选择设置> 辅助功能> TalkBack ，然后按滑块开关将其打开。 按照显示的任何其他屏幕提示进行操作。

当TalkBack开启时，您Android设备的基本控件会有所不同。 例如:

1. Single tapping an app will select it, and the device will read out what the app is.
2. Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.
3. Double-tapping anywhere will open the app/select the option.
4. You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.

如果您想关闭TalkBack:

1. Navigate to your Settings app using the above gestures.
2. Navigate to Accessibility > TalkBack.
3. Navigate to the slider switch and activate it to turn it off.

Unlocking the phone

当"话语提示"打开时，解锁手机有点不同。

您可以从锁定屏幕底部向上滑动两个手指。 如果您已设置解锁设备的密码或模式，则会进入相关输入屏幕进行输入。

您也可以触摸浏览，找到屏幕底部中间的解锁按钮，然后点按两次。

Global and local menus

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

要访问这些菜单:

1. Access the global menu by quickly swiping down then right.
2. Access the local menu by quickly swiping up then right.
3. Swipe left and right to cycle between the different options.
4. Once you've selected the option you want, double click to choose that option.

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

Browsing web pages

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

例如，启用"话语提示"后:

1. Open your web browser
2. Activate the URL bar
3. Enter a web page that has a bunch of headings on it, like the front page of bbc.co.uk. To enter the text of the URL:
   1. Select the URL bar by swiping left/right till you get to it then double tapping.
   2. Hold your finger down on the virtual keyboard until you get the character you want, then release your finger to type it. Repeat for each character.
   3. Once you've finished, find the Enter key and press it.
4. Swipe left and right to move between different items on the page.
5. Swipe up and right with a smooth motion to enter the local content menu
6. Swipe right until you find the "Headings and Landmarks" option.
7. Double tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
8. To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", then double tap to activate.

iOS VoiceOver

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

要开启此功能，请转到您的设置应用，然后选择常规> 辅助功能> VoiceOver 。 按 VoiceOver 滑块即可启用(此页面上还会显示与VoiceOver相关的其他选项)。

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

1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
2. You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move around items (when you find the item you want, you can remove your finger to select it).
3. To activate the selected item (e.g. open a selected app), double tap anywhere on the screen.
4. Swipe with three fingers to scroll through a page.
5. Tap with two fingers to perform a context-relevant action, for example taking a photo while in the camera app.

要再次关闭它，您必须返回到设置> 一般> 辅助功能> VoiceOver 使用上述手势，然后将 VoiceOver 滑块切换回关闭。

Unlock phone

要解锁手机，您需要按照主页按钮(或滑动)照常。 如果您设置了密码，您可以通过滑动/滑动(如上所述)选择每个号码，然后在找到正确的号码后双击输入每个号码。

Using the Rotor

当VoiceOver打开时，您有一个称为Rotor的导航功能，您可以从中快速选择一些常见的有用选项。 使用它:

1. Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
2. Once you've found the option you want:
   1. Release your fingers to select it.
   2. If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.

Rotor下可用的选项是上下文相关的 - 它们将根据您所在的应用程序或视图而有所不同(参见下面的示例)。

Browsing web pages

让我们使用VoiceOver进行网络浏览:

1. Open your web browser
2. Activate the URL bar
3. Enter a web page that has a bunch of headings on it, like the front page of bbc.co.uk. To enter the text of the URL:
   1. Select the URL bar by swiping left/right till you get to it then double tapping.
   2. For each character, hold your finger down on the virtual keyboard until you get the character you want, then release your finger to select it. Double-tap to type it.
   3. Once you've finished, find the Enter key and press it.
4. Swipe left and right to move between items on the page. You can double tap an item to select it (e.g. follow a link).
5. By default, the selected rotor option will be Speaking Rate — you can currently swipe up and down to increase or decreate the speaking rate.
6. Now turn two fingers around the screen like a dial, to show the rotor and move between its options. Here are a few examples of the options available:
   1. Speaking Rate: change speaking rate.
   2. Containers: Move between different semantic container on the page.
   3. Headings: Move between headings on the page.
   4. Links: Move between links on the page.
   5. Form Controls: Move between form controls on the page.
   6. Language: Move between different translations, if they are available.
7. Select Headings. Now you'll be able to swipe up and down to move between headings on the page.

控制机制

在我们的CSS和JavaScript无障碍文章中，我们研究了特定类型的控件机制的事件的概念(请参见鼠标特定事件 )。 总而言之，这些引起辅助功能问题，因为其他控制机制无法激活关联的功能。

例如，点击事件在访问方面很好 - 相关联的 事件处理程序可以通过单击处理程序设置的元素，标签到它并按Enter / Return或在触摸屏设备上点击它来调用。 请尝试我们的 simple-button-example.html 示例(查看它正在运行 >)看看我们的意思。

另一方面，特定于鼠标的事件(如 mousedown 和 "https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseup\"> mouseup 创建问题 - 无法使用非鼠标控件调用其事件处理程序。

如果您尝试控制我们的简单框 -drag.html ( see example live / a>)示例与键盘或触摸，你会看到的问题。 这是因为我们使用的代码如下:

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

document.onmouseup = stopMove;

要启用其他形式的控制，您需要使用其他等效事件，例如触摸事件在触摸屏设备上工作:

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

panel.ontouchend = stopMove;

我们提供了一个简单的示例，说明如何同时使用鼠标和触摸事件 - 请参阅 -box-drag.html"class ="external"> multi-control-box-drag.html ( multi-control-box-drag.html"class ="external">查看示例live 也)。

响应设计

响应式设计是让您的应用的布局和其他功能动态 根据诸如屏幕尺寸和分辨率的因素而改变，因此它们对于不同设备类型的用户是可用的和可访问的。

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

• Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies like media queries, viewport, and flexbox.
• Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they will be more likely to be on slow network connections. It is therefore wise to serve smaller images to narrow screen devices as appropriate. You can handle this using responsive image techniques.
• Thinking about high resolutions. Many mobile devices have high resolution screens, and therefore need higher resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers these days. SVG has a small file size and will stay sharp whatever size it is being displayed at (see Adding vector graphics to the web for some more details).

具体移动注意事项

在网站在移动设备上更容易访问时，还有其他重要的注意事项。 我们在这里列出了一对夫妇，但是当我们想到他们时会增加更多。

Not disabling zoom

使用视口，可以在您的 href ="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head"title ="HTML头元素提供有关文档的一般信息(元数据)，包括其标题和指向 其脚本和样式表。"> < head> :

<meta name="viewport" content="user-scalable=no">

你应该永远不要这样做，如果在所有可能 - 许多人会依靠放大，以便能够看到你的网站的内容，所以把这个功能远离他们是一个很糟糕的主意。 在某些情况下，缩放可能会破坏UI; 在这种情况下，如果你觉得你绝对需要禁用缩放，你应该提供一些其他类型的等效，例如增加文本大小的控件，以不破坏你的UI。

Keeping menus accessible

由于移动设备上的屏幕窄得多，因此在移动设备上查看网站时，使用媒体查询和其他技术使导航菜单缩小到显示屏顶部的小图标是非常常见的，这可以是 按下以仅在需要时显示菜单。 这通常由"三水平线"图标表示，并且设计模式因此被称为"汉堡包菜单"。

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

请参阅此处查看好汉堡菜单示例。

用户输入

在移动设备上，输入数据对于用户来说比在台式计算机上的等同体验更加恼人。 使用桌面或笔记本电脑键盘，比触摸屏虚拟键盘或微型移动物理键盘更方便地将文本输入到表单输入中。

出于这个原因，值得尝试最小化所需的打字量。 例如，您可以改为提供 / HTML / Element / select"title ="HTML选择元素表示提供选项菜单的控件。"> < select> 菜单包含最常用的选项 有助于数据输入的一致性)，并提供一个"其他"选项，显示一个文本字段以输入任何离群值。 您可以在 external"> common-job-types.html (请参阅 "external">普通工作示例live )。

还值得考虑使用HTML5表单输入类型，如移动平台上的日期，因为它们处理得很好 - 例如Android和iOS都显示适合设备体验的可用小部件。 请参见 html5-form-examples.html (有关示例，请参见 HTML5表单示例 ) - 尝试加载这些内容并在移动设备上进行操作。 例如:

• Types number, tel, and email display suitable virtual keyboards for entering numbers/telephone numbers
• Types time and date display suitable pickers for selecting times and dates.

如果您想为桌面设备提供不同的解决方案，您可以随时使用功能检测为移动设备提供不同的标记。 有关检测不同输入类型的原始信息，请参见输入类型，并查看我们的 功能检测文章了解更多信息。

概要

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

也可以看看

• Guidelines For Mobile Web Development — A list of articles on Smashing Magazine covering different techniques for mobile web design.
• Make your site work on touch devices — Useful article about using touch events to get interactions working on mobile devices.