移动设备已经成为人们日常生活中必不可少的一部分。从购物、社交到阅读新闻，人们都倾向于使用手机或平板电脑。随着移动设备使用的不断扩大，无障碍设计变得越来越重要。无障碍设计可以帮助残疾人群体方便地使用移动设备，并且对所有用户来说也有许多好处，比如增强用户体验和提高可达性。
在本文中，我们将探讨如何通过无障碍技术优化移动端 APP 设计。我们将涵盖以下主题：
- 视觉无障碍
- 功能无障碍
- 音频和视频无障碍
视觉无障碍
1. 包容性设计
包容性设计（Inclusive Design）是一种设计方法，可以确保您的设计对所有用户都易于使用，而不仅仅是能够像您一样看到和听到的用户。
个性化设定
根据用户的个性化配置，自适应调整应用的字体大小、颜色风格、大小比例。例如，使用较大的字体大小，可以方便当用户室外或者光线暗淡的环境下使用应用。
避免使用过于鲜艳的颜色
存在少部分用户无法辨别过于鲜艳的颜色，这些用户也包括色盲用户。在应用设计中可以使用 color contrast 进行检查。如果颜色比色差过大，建议考虑修改颜色，并使用黑白的色调。
2. 图像优化
图片 ALT 属性
屏幕阅读器在阅读网页时，会读取所有的文本和图像标签。在移动设备中，无论是无障碍用户还是普通用户都希望快速加载图片。同时，ALT 属性也能辅助人工智能识别图片内涵。所以，在所有的图片标签中提供 alt 属性是一个好的实践。
字母与背景对比度
将文字与背景对比度调整到一定的水平，可以提高老年人和视力有问题的用户的查看体验。字体颜色与背景颜色对比度需要满足 WCAG 2.0 标准，一般来说，比例应该是 4.5：1。
TIP：可在 chrome 插件 Flatpack-秉持透过性设计，便捷验证颜色对比度。
功能无障碍
1. 自适应布局
在移动设备上，用户界面的布局对应用程序的可用性至关重要。使用自适应布局，使应用程序适应不同的移动设备尺寸和方向变化。
2. 可访问的表单
表单最为常用的交互方式之一，因此考虑使用标准的 HTML，使屏幕阅读器能够读取到表单的所有数据。确保表单输入框有必需的标签，如 label 与 input，可以帮助用户更好的输入。
音频和视频无障碍
1. 字幕
在视频中添加字幕可以帮助那些无法听到声音的观众或者观众不同国籍的观众更好的理解内容。提供包括音乐、声效描述及口令在内的字幕，可以让用户有更好的体验。
2. 沉浸式控制
对于音响爱好者来说，对声音的掌控是极为重要的。在音频方面，比如移动设备应用中的音乐播放器，改善音效的体验越来越为用户所重视。在此应用场景下，通过为应用程序启用手势控制等技术，用户可以更轻松地切换曲目、音量、循环等。
3. 无障碍声音
当设计应用时，请确保音频的音量可以调整，这将允许无障碍用户进行定制。此外，考虑添加音频指示时间、当前状态和剩余时长，以便所有用户都可以了解音频的当前状态。
结论
通过无障碍设计，我们可以让更多的人受益。优秀的无障碍设计将对所有用户产生积极影响，这意味着更好的体验，更广阔的用户群体，更深入的参与度等。下面是一些我们在项目开发中的实践。
基于 ARIA 标准实现自适应界面
基于 W3C 的 ARIA 标准，通过 HTML5、CSS3 和 JavaScript 实现无障碍应用的设计与开发，使得应用程序更具扩展性和灵活性。
<section class='button-group'> <button role='button' aria-label='previous'>上一页</button> <button role='button' aria-label='next'>下一页</button> </section>
属性 role 用来为 button 定义角色，即模拟一个按钮的角色。而 aria-label 则为按钮定义了可读性较高、便于阅读和使用的标记。
手势支持
$('.player .volume-up').on('swipeup', function() {
currentPlayer.volume = currentPlayer.volume + .1;
$(this).find('.icon').html('volume_up');
});利用现有手势事件绑定，实现音量控制的手势支持，可以让用户更加很方便地操作应用程序。
在设计时，请考虑到所有的用户，并使用这些技术来提高用户的体验。通过利用最佳实践，我们可以创造出更具包容性、易于使用的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704e0f1d91dce0dc85093ef