随着通过手机设备访问网络越来越受欢迎，例如iOS和Android等流行的平台都拥有了完善的无障碍工具，在这些平台上考虑你网页的无障碍访问性是一件很重要事情。本文将着重介绍移动端无障碍的注意事项。
| 前置条件: | 基本的计算机素养, 对Javascript,html,css有基本的认识, 对之前的课程有一定的理解。 |
|---|---|
| 目标: | 了解移动端上无障碍的存在的问题，即如何解决他们。 |
现代移动设备对无障碍和大多数Web标准有很好的支持。那个因为移动设备和桌面设备使用了完全不同的技术而强制要求开发者根据设备不同将用户分发到不同的域名的时代已经结束了（虽然现在还有一些公司仍然在检测用户移动设备的使用，并为他提供一个独立的手机域名）。
目前，移动设备一般都可以处理“full fat”的网站了，同时，为了能够让盲人成功的使用网站，主流平台甚至还内置了阅读器。移动设备也倾向于对“WAI-ARIA”有个好的支持。
你只要需要遵守好的web设计规范和最佳的无障碍实践，就可以让你的网站在手机上可用且无障碍。
移动设备需要特别考虑一些例外情况; 主要的是:
最常见的移动端平台具有功能全面的屏幕阅读器。这些功能和桌面端屏幕阅读器大致相同，除了移动端屏幕阅读器大量的使用手势操作而不是按键组合操作。
让我们来看看最主要的两个 - Android上的TalkBack和iOS上的VoiceOver。
TalkBack是运行在Android系统上的。
在菜单中选择 设置 > 无障碍 > TalkBack，打开开关即可打开TalkBack。按照屏幕提示操作即可。
注意: 旧版本的TalkBack的打开方式有一点不同。
当TalkBack打开时，你的android设备的基本操作将有一点点不同。举个例子：
如果你想关掉TalkBack:
注意: 你可以通过向左上方滑动返回桌面，如果你有多个桌面，你可以通过两个手指在屏幕上左右滑动来切换桌面。
注意: 关于“TalkBack”的收拾完整列表，查看使用TalkBack手势。
当TalkBack处于打开状态时，解锁手机有一点点不同。
你可以通过双根手指从底部向上滑动去锁定手机。如果你设置了密码或者手势，你将会进入相关的入口页去输入密码或手势。
你可以通过触摸屏幕的中下部去找到解锁按钮，然后双击它解锁手机。
TalkBack允许你使用全局和本地菜单，无论你已经导航到哪个位置。前者提供和设备相关的全局选项，后者提供和当前你所在的应用或屏幕相关的选项。
要进入这些菜单：
想要查看全局和本地上下文菜单的详细选项，请查看使用全局和本地上下文菜单
你可以在浏览器中使用本地上下文菜单来查看仅使用标题，或者表单控件，或者链接，或者逐行浏览的方式浏览网页。
例如，当“TalkBack”处于开启状态：
注意: 查看TalkBack入门获取更完整的文档。
它是在iOS系统上的一个移动端VoiceOver。
要打开它，请在设置中选择 常规 > 无障碍 > VoiceOver。按下VoiceOver的开关去启动它（你还会在页面中看到很多和VoiceOver相关的其他选项）。
一旦开启VoiceOver，iOS的基本操作手势将有所不同：
要再次将其关闭，你必须使用上述手势导航到 设置 > 常规 > 无障碍 > VoiceOver，然后将VoiceOver切换回关闭状态。
你需要正常的按下HOME键（或划过）就可以解锁手机了。如果你设置了密码，你可以通过滑动来选择每一个数字，然后在找到合适的数字后双击输入每一个数字。
当VoiceOver打开时，您可以使用一种名为“转子”的导航功能，该功能可让您快速从多种常用选项中进行选择。 要使用它:
转子上的提供的选项是上下文相关的，他们会根据你所在的APP或者试图不同而不同。（参见下面的例子）
让我们用VoiceOver浏览网页：
注意: 有关iOS上可用的VoiceOver手势以及有关辅助功能的其他提示的更完整资料可以查看在你的设备上用VoiceOver测试辅助功能
在我们的CSS和JavaScript可访问性文章中，我们研究了特定于某种控制机制的事件的概念（请参阅鼠标特定的事件）。 回顾一下，因为其他控制机制不能激活相关的功能，将会导致辅助功能的问题。
举例来说，点击事件在可访问性方面是好的 - 通过点击处理器设置的元素，选中它并按下回车或返回，或者在触摸屏设备上点击它，可以调用关联的事件处理程序。试试我们的例子simple-button-example.html(查看在线例子)来看看我们是什么意思。
另一方面，像mousedown和mouseup这些特定的鼠标事件会产生一些问题 - 他们的事件处理程序不能使用除了鼠标意外的设备操作。
如果你尝试通过键盘或触摸来试试我们的simple-box-drag.html(查看在线例子)，你将发现问题。它发生的原因是我们用了下面的代码：
div.onmousedown = function() {
initialBoxX = div.offsetLeft;
initialBoxY = div.offsetTop;
movePanel();
}
document.onmouseup = stopMove;
为了能其他表单空间起作用，你需要使用其他同等的事件代替，比如在触屏设备上用touch事件：
div.ontouchstart = function(e) {
initialBoxX = div.offsetLeft;
initialBoxY = div.offsetTop;
positionHandler(e);
movePanel();
}
panel.ontouchend = stopMove;
我们提供了一个简单的例子来展示如何使用鼠标和触摸事件 - multi-control-box-drag.html (查看在线例子)
注意: 你可以看到一个功能完善的例子，展示如何在实现游戏控制机制中实现不同的控制机制。
响应式设计是根据屏幕大小和分辨率等因素动态更改您的应用程序的布局和其他功能的做法，因此对于不同设备类型的用户来说，它们是可用和可访问的。
特别是，移动端设备需要解决的最常见的问题是：
注意: 我们不会在这里对响应式设计进行完整的讨论，因为他们在MDN其他地方都有涉及（参考上面的链接）。
这里有很多其他重要的需要考虑的点，他们可以让我们通过移动设备访问网站时更无障碍。
我们可以利用viewport来禁止用户缩放，在你的<head>中加入下列代码即可：
<meta name="viewport" content="user-scalable=no">
如果可能的话，你绝对不应该这么做 - 很多人都会依靠缩放来看你网站的内容，所以不使用缩放这个功能是一个很糟糕的主意。在某些情况下缩放会破坏UI；这种情况下，你觉得你绝对需要缩放，你可以提供一些别的近似的方法。例如增加一个控制文字大小的控件，通过这种方式就不会破坏UI了。
因为移动设备上的屏幕非常窄，所以使用媒体查询和其他技术使得导航菜单缩小到显示屏顶部的一个小图标，只有在需要的时候才展示菜单，这种方式在移动设备上很常见的。 这通常由“三横线”图标表示，并且设计模式因此被称为“汉堡菜单”。
在实现这样的菜单时，需要确保显示控件的控件可以通过适当的控制机制（通常为移动触摸）进行访问，如上面的控制机制中所讨论的，并且页面的其余部分被移开 或在菜单被访问时以某种方式隐藏，以避免与导航混淆。
让我们来看一个很好的“汉堡包菜单”的例子
在移动设备上，输入数据往往比在台式计算机上的同等体验更令用户恼火。使用桌面或笔记本电脑键盘输入文本到表单输入比触摸屏虚拟键盘或微小的移动物理键盘更方便。
出于这个原因，值得尽量减少所需的输入量。作为一个例子，与其让用户每次使用常规文本输入来填写他们的工作标题，而是可以提供一个<select>菜单，其中包含最常见的选项（这也有助于数据输入的一致性），并提供一个“其他”选项，显示一个文本字段来输入任何异常值。你可以在common-job-types.html中看到这个想法的一个简单的例子（查看在线例子）。
也值得考虑在移动平台上使用HTML5格式输入类型（如日期），因为它们可以很好地处理它们 - 例如，Android和iOS都会显示可用于设备体验的可用小部件。有关示例，请参阅html5-form-examples.html（请查看HTML5表单示例） - 尝试加载这些内容并在移动设备上对其进行操作。例如：
如果你想为桌面端提供不同的解决方案，则可以使用功能检测为您的移动设备始终提供不同的标记。有关检测不同输入类型的原始信息，请参阅输入类型，还可以查看我们的功能检测文章获取更多信息。
在本文中，我们向您提供了有关常见移动设备可访问性问题的一些细节以及如何克服这些问题。我们还通过使用最常用的屏幕阅读器来帮助您进行无障碍测试。