[可访问性10理论很美丽，但开发人员和设计师真正需要的是示例。了解代码如何工作、界面如何运行以及公司在哪里犯了错误（并把事情做对）是最好的学习方法。
在本实用指南中，我们将离开思想领域，深入研究在移动应用程序（iOS 和 Android）中实现[辅助功能11]的真实示例，剖析 UI 模式并展示如何使其具有包容性。
示例 1：“幽灵”按钮（图标按钮）
您知道屏幕一角的放大镜图标用于搜索某些内容吗？或者用于设置的齿轮图标？对于视力正常的用户来说，图标就足够了。对于使用屏幕阅读器（VoiceOver/TalkBack）的盲人用户，如果该按钮没有标签（标签），他们只会听到：“按钮”。
“按钮”什么也没说。按钮什么？要删除帐户吗？买？
错误的方式（无法访问）
0
屏幕阅读器将读取类名称或只是“未标记的按钮”。
正确的方式（无障碍）
1
在 iOS (SwiftUI) 上：
2
结果：用户将听到“设置，按钮”。简单但必不可少。
示例2：表单中的错误反馈
您填写了一份表格，单击“提交”，但没有任何反应。密码字段变成红色，但您没有看到它，因为您是色盲（红色盲）。
黄金法则：切勿仅使用颜色来传达信息。
正确的方法
除了将边框设为红色之外，还在字段下方添加警报图标和解释性文本消息。
- ❌ 坏：红色边框。
- ✅ 好：红色边框+图标⚠️+文本“密码必须是8个字符长”。
此外，对于屏幕阅读器，焦点必须转到错误字段，否则必须宣布错误。
3
示例 3：触摸目标
您是否曾经尝试过点击那个小“x”来关闭广告，但最后却点击了该广告？这对每个人来说都是令人沮丧的，但对于那些手部颤抖的人（例如帕金森病）来说则是不可能的。
WCAG 和 Apple/Google 指南建议最小触摸区域为 44x44 dp (iOS) 或 48x48 dp (Android)。
实施提示：您不需要在视觉上放大图标。你只能增加它周围的隐形填充。
4
示例 4：装饰图像与信息
并非每个图像都需要描述。如果你描述一切，就会污染用户的聆听体验。
- 信息图片：您正在销售的产品的照片。
- 行动：6。
- 装饰图像：“阅读更多”文本旁边的箭头图标，或标题底部的图形波浪。
- 操作：对屏幕阅读器隐藏。
在颤振中：
5
示例 5：加载状态
用户点击“支付”。屏幕冻结。旋转器出现旋转。 对于任何看到它的人来说，都很清楚：“正在加载。” 对于那些看不到它的人来说，沉默是令人痛苦的。 “崩溃了？应用程序关闭了？我的网络瘫痪了？”
始终提供充电状态的听觉反馈。
- Android：使用7和8。
- iOS：使用9。
结论
可访问性并不是要记住抽象规则。这是关于理解代码如何转化为不同人的体验。
通过应用这些标准（按钮标签、冗余颜色、慷慨的触摸区域、正确的语义和状态反馈），您可以解决阻止人们使用您的应用程序的 90% 的障碍。
最好的代码并不是最复杂的。这是一种为最多人服务的方法。
另请阅读
- [移动应用程序的辅助功能 - 完整的实践指南12
- [移动应用程序的辅助功能-日常生活完整指南13
- [数字辅助用户体验 - 扩展完整指南14
- [数字无障碍用户体验 - 初创公司完整指南15
- [数字辅助用户体验 - 小团队完整指南16
- [移动应用程序的辅助功能17