谈论[无障碍11]很容易。在实际应用程序中实现可访问性，由于期限紧迫、技术债务和复杂的设计，则是另一回事。
本“实践”指南主要针对需要亲自动手的移动开发人员（Android/iOS/Flutter/React Native）和设计师。让我们跳过原理，直接进入实施工作流程。
移动辅助功能“生存工具包”
在编写代码之前，您需要合适的测试工具。没有它们，你就是在黑暗中编程。
- 辅助功能扫描仪：Play 商店中提供的 Google 应用程序。它会截取屏幕截图并提出修正建议（增加文本、对比度、触摸区域）。
- VoiceOver (iOS) / TalkBack (Android)：学习基本手势。
- 向右滑动：下一项。
- 向左滑动：上一个项目。
- 双击：激活/单击。
- 色盲模拟器：“Sim Daltonism”（Mac/iOS）等应用程序允许您查看应用程序屏幕，就像您患有不同类型的色盲一样。
实际实施清单
1.焦点顺序（遍历顺序）
屏幕阅读器从上到下、从左到右（西方语言）阅读屏幕。但复杂的布局可能会搞砸。
- 问题：读者在主要内容之前阅读页脚。
- 实用解决方案：
- Android：如果 XML 不符合视觉顺序，请使用 0 和 1 强制逻辑顺序。
- iOS：调整视图控制器中的2 数组。
2.内容分组（Grouping）
想象一张产品卡：[运动鞋照片][名称：Nike Air][价格：R$500]。 如果读者分别关注每个项目，则用户必须“滑动”3次才能了解单个产品。这很累。
- 实用解决方案：对容器进行分组。
- Flutter：将 Card Widget 包裹在 3 中并隐藏语义子项 (4)。因此，焦点集中在整张卡上。
3.动态字体（Dynamic Type）
该用户在手机设置中加大了字体，因为他有老花眼（视力疲劳）。你的应用程序尊重这一点还是破坏了一切？
- 练习：切勿以固定像素 (px) 设置字体大小。
- Android：使用5（与比例无关的像素）。
- iOS：使用动态字体 (6)。
- React Native：避免在重要文本中限制 7。如果字体增大，请让文本换行。
4.颜色和对比度（深色模式）
无障碍还涉及视觉舒适度。
- 练习：在深色模式和浅色模式下测试您的应用程序。如果您不使用系统语义颜色（例如 iOS 上的 8 ）而不是硬编码的十六进制颜色，在白色背景上看起来很漂亮的浅灰色文本可能会在黑色背景上消失。
5. 触摸目标
按钮看起来很大，但只有中间的24px图标可以点击。
- 练习：使用Android开发者选项中的“调试绘制”或“显示布局边界”工具来查看可点击框的实际大小。如果小于 48dp，请增加组件的内部内边距。
无障碍开发流程 (DoD)
为了确保[可访问性12]在实践中发生，请将这些项目包含在每项任务的“完成定义”中：
- [ ]所有交互元素都有标签吗？
- 我是否仅使用键盘/屏幕阅读器浏览整个功能？
- 色彩对比度是否通过WCAG AA测试？
- 如果我们增加系统字体，布局是否会调整（滚动）或剪切文本？
WebView 中的可访问性（小心！）
许多应用程序都是混合的，并在其中加载网页。
- 危险：如果做得不好，手机的本机[辅助功能13（TalkBack/VoiceOver）并不总是能够与 WebView 的 HTML 很好地通信。
- 实践：如果使用 WebView，加载的网站必须可访问（语义 HTML、ARIA 标签）。本机应用程序无法神奇地“修复”不良 HTML。
结论
实践中的可及性与英雄主义无关，而与习惯有关。每当你添加10时，它都会产生添加9的肌肉反射。习惯是在发送 Pull Request 之前先打开 TalkBack 2 分钟进行测试。
日常的小行动创造出强大的产品。从今天开始，在下一个屏幕上编码。
另请阅读
- [移动应用程序的辅助功能 - 完整的日常指南14
- [移动应用程序的辅助功能15
- [移动应用程序中的辅助功能 - 带示例的完整指南16
- [数字无障碍用户体验17
- [数字辅助用户体验 - 扩展完整指南18
- [数字无障碍用户体验 - 初创公司完整指南19