无障碍

一款设计精良的产品应能服务于能力各异的用户，包括存在视力、听力、认知或运动障碍的用户。改进产品的无障碍性可提升所有用户的可用性，这也是应有的设计之道。

Material Design 内置的无障碍考量将帮助你适配所有用户。本节主要适用于移动端界面设计。有关设计和开发完全无障碍产品的更多信息，请访问Google 无障碍网站。

清晰的

通过设计布局清晰、操作明确的界面来帮助用户浏览应用。每添加一个按钮、图片或一行文本都会增加界面复杂度。可通过以下方式简化应用界面：

• 清晰可见的元素
• 足够的对比度和尺寸
• 明确的重要性层级
• 关键信息一目了然

稳健的

设计应用以适应各种用户。用户可能注意力短暂、不熟悉你的产品，或使用纯文本屏幕阅读器（通过语音合成器朗读文本或通过盲文显示器产生触觉的程序）。你的应用应便于每位用户：

• 浏览：让用户清楚自己在应用中的位置及重要内容
• 理解重要任务：通过多种视觉和文本提示强化重要信息。运用颜色、形状、文本和动效传达当前状态。
• 访问你的应用：包含适当的内容标签，以适应使用纯文字版本的用户

具体的

支持特定平台的辅助技术，如同支持触摸、键盘和鼠标输入方式一样。例如，确保你的 Android 应用能与 Google 的屏幕阅读器“TalkBack”配合使用。

辅助技术通过屏幕阅读器、放大设备、轮椅、助听器或记忆辅助设备等，帮助增强、维持或改善残疾人士的功能。

通过合理的颜色和对比度设计，可以帮助用户清晰地查看和解读内容、与正确的元素交互，并理解各项操作的含义。

无障碍调色板

为应用选择支持可用性的主色、辅助色和强调色。确保元素间有足够的颜色对比度，以便视力低下的用户也能看清和使用应用。

对比度

根据万维网联盟（W3C），基于亮度或发光强度，颜色与其背景的对比度范围为 1 至 21。

对比度表示两种颜色之间的差异程度，通常写作 1:1 或 21:1。比值越高，颜色间的相对亮度差异越大。

W3C 为正文文本和图片文本推荐以下对比度：

• 小文本与其背景的对比度至少为 4.5:1
• 大文本（14pt 粗体/18pt 常规及以上）与其背景的对比度至少为 3:1

图标或其他关键元素也应遵循上述建议的对比度。

徽标和装饰元素

虽然装饰性元素（如徽标或插图）无需满足对比度要求，但如果具备重要功能，则应可识别。

其他视觉提示

对于色觉障碍用户，不应仅依赖颜色来传递信息，还需辅以其他视觉设计元素（如图标、形状、纹理、文字），以确保他们能获取完整的信息。

色盲有多种类型（包括红绿色盲、蓝黄色盲和单色色盲）。对于重要状态，可使用多种视觉提示。运用描边、指示器、图案、纹理或文本等元素描述操作和内容。

声音

为视觉元素提供声音替代方案，反之亦然。为关键音频元素和声音提示提供隐藏式字幕、文字记录或其他视觉替代方案。

通过在界面元素上添加描述性标签，让用户可通过声音导航应用。使用 TalkBack 等屏幕阅读器并通过触摸探索导航时，用户指尖触摸界面元素时会朗读标签文本。

应避免以下声音：

• 通过屏幕阅读器播放不必要的声音，例如进入网页时自动播放的背景音乐。若有背景声音，请确保用户能安全暂停或停止。
• 添加到原生元素的额外声音（屏幕阅读器能正确解读原生元素）

标记用户界面元素

为输入控件和其他元素添加可朗读的描述

动效

Material Design 运用动效在不同视图间引导焦点，有助于减少用户分心。表面转变为用户可跟随的焦点，并移除不重要的元素。

为了让对运动和视觉敏感的用户也能舒适使用界面，请遵循Material Design 动效规范；该规范支持 W3C 的以下动效指南：

• 若自动移动、滚动或闪烁的内容持续超过五秒，应允许暂停、停止或隐藏
• 将闪烁内容限制在一秒内三次以内，以满足闪烁和红色闪烁阈值
• 避免闪烁屏幕的较大中心区域

定时控件

应用中的控件可设置为在一定时间后消失。例如，开始播放视频五秒后，播放控件可能会从屏幕淡出。

高优先级控件
避免对执行高优先级功能的控件使用定时器，因为若控件消失太快，用户可能无法察觉。例如，TalkBack 会朗读获得焦点的控件，为其设置定时器可能会阻碍控件完成任务。

对于启用其他重要功能的控件，请确保用户能再次开启控件或通过其他方式执行相同功能。在层次和焦点中了解更多。

自动朗读文本

阅读有关在活跃区域放置文本的信息。

布局

Material Design 的触摸目标指南让无法看到屏幕或运动灵活性欠佳的用户也能点击应用中的元素。

触摸目标

触摸目标是屏幕中响应用户输入的部分。它们延伸至元素的视觉边界之外。例如，图标可能显示为 24 x 24dp，但其周围的内边距构成了完整的 48 x 48dp 触摸目标。

触摸目标应至少为 48 x 48dp。无论屏幕尺寸如何，该尺寸的触摸目标对应的物理尺寸约为 9mm。触屏元素的推荐目标尺寸为 7-10mm。可考虑使用更大的触摸目标以适应更广泛的用户，例如运动能力尚在发育的儿童。

触摸目标间距

多数情况下，触摸目标应间隔 8dp 或以上，以确保信息密度均衡且可用性良好。

分组项目

将相关项目放在一起，有助于视力低下或难以聚焦屏幕的用户。

字体

为提高可读性，用户可能会增大字体。移动设备或浏览器提供了系统级字体大小调整功能。要在 Android 应用中支持系统字体大小，请使用可缩放像素（sp）来标记文本及其关联容器的尺寸。

确保为大字体和外语字体分配足够的空间。有关推荐的外语字体大小，请参阅行高。

应用应给予用户反馈，并让其了解在应用中的位置。导航控件应易于定位且文字清晰易懂。视觉反馈（如标签、颜色和图标）和触摸反馈向用户展示了界面中的可用内容。

导航应具备清晰的任务流和最少步骤。对于频繁使用的任务，应实现焦点控制或控制键盘及阅读焦点的能力。

启用焦点导航

使用焦点控制导航

屏幕阅读器

屏幕阅读器为用户提供多种导航屏幕的方法，包括：

• 触摸界面屏幕阅读器允许用户用手指划过屏幕，聆听正下方的内容。这让用户快速了解整个界面。用户也可凭借肌肉记忆快速移至特定界面元素。在 TalkBack 中，此功能称为“通过触摸浏览”。要选择项目，用户必须双击。
• 用户也可在屏幕上向前或向后滑动来移动焦点，从上到下线性阅读页面。这使用户能专注于某些元素。在 TalkBack 中，这称为线性导航。

用户可在“通过触摸浏览”和“线性导航”模式间切换。当页面使用适当的语义标记时，一些辅助技术允许用户在地标（如标题）间导航。

硬件或软件方向控制器（如 D-pad、轨迹球或键盘）允许用户以线性方式在选项间跳转。

层次

根据项目的相对重要性将其放置在屏幕上。

• 重要操作：将重要操作放在屏幕顶部或底部（可通过快捷方式访问）
• 相关项目：将相似层次的相关项目放在彼此相邻的位置

焦点顺序

输入焦点应遵循视觉布局的顺序，从屏幕顶部到底部。它应从最重要的项目遍历至最不重要的项目。确定以下焦点和移动方式：

• 元素获得焦点的顺序
• 元素的分组方式
• 焦点所在元素消失时焦点移至何处

通过视觉指示器和无障碍文本的组合来阐明焦点位置。

分组

在标题下对类似项目进行分组，以传达分组的含义。这些分组在空间上组织内容。

过渡

屏幕和任务之间的焦点遍历应尽可能连续。

若任务中断后恢复，请将焦点放在先前聚焦的元素上。

清晰且有用的无障碍文本是提升界面无障碍性的主要方法之一。视力有限或无视力的用户将从明确的文字描述中受益。无障碍文本指供屏幕阅读器无障碍软件（如 Android 上的 TalkBack、iOS 上的 VoiceOver、桌面端的 JAWS）使用的文本。屏幕阅读器会朗读屏幕上所有文本，包括可见和不可见的替代文本。

无障碍文本包括可见文本（如界面元素标签、按钮文字、链接和表单）和不可见的描述（如无文本标签按钮的替代文本）。有时，界面标签可被无障碍文本覆盖，以为用户提供更多信息。

可见和不可见的文本都应具有描述性且独立有意义，因为有些用户通过页面中的所有标题或链接进行导航。使用屏幕阅读器测试应用，以识别缺失或需要改进无障碍文本的区域。

避免在文本中包含控件类型或状态

屏幕阅读器可能会通过声音或在无障碍文本前后读出控件名称，自动声明控件类型或状态。

搜索

推荐做法

使用简短描述。

搜索字段

不推荐做法

勿写出控件类型。

开发人员注释：若控件类型或状态未被正确读取，可能是控件的无障碍角色设置不当，或它是自定义控件。网站上每个元素都应具有相关的无障碍角色，或通过代码正确声明。这意味着按钮应设为按钮，复选框应设为复选框，以便将控件类型或状态正确传达给用户。若从原生界面元素扩展或继承，你将获得正确的角色。否则，可在各平台为无障碍重写此信息（Web 用ARIA，Android 用AccessibilityNodeInfo）。

在 Android 上，将控件的 AccessibilityNodeInfo 类名字段设为 “android.widget.Button”。

构建无障碍的自定义视图

仅通过 Wi-Fi 下载

推荐做法

使用简短描述。

已选择仅通过 Wi-Fi 下载

不推荐做法

勿写出状态。

指示元素的作用

使用动作动词指示元素或链接的作用，而非外观，以便视障用户理解。链接文本应：

• 指明点击链接后将执行的任务
• 避免模糊描述，如“点击此处”

确保元素在所有使用处描述一致。

状态可变的元素

对于可在值或状态间切换的图标，根据其向用户的呈现方式确定如何通告。

• 若图标是项目的属性，将其设为复选框，以便屏幕阅读器读出当前状态，如“开启”或“关闭”
• 若图标是操作，编写文本标签以指明选中图标后将发生的操作，如“添加到心愿单”

元素的使用方式会影响其显示方式。例如，若星形图标代表添加到心愿单的操作，应用应通告“添加到心愿单”或“从心愿单中移除”。

勿提及确切的手势或交互方式

勿告诉用户如何与控件进行物理交互，因为他们可能使用键盘或其他设备而非手指或鼠标导航。无障碍软件会为用户描述正确的交互方式。

确认操作

使用对话框、Toast 或 Snackbar（Android）来确认或反馈破坏性操作（如“删除”或“移除”），或提示操作难以撤销。

对于通过视觉方式确认的操作（如删除项目时网格自动重新排列），无需 Toast。这种情况下，可添加无障碍文本提供确认。

提供提示语音

提示语音为不明确的操作提供额外信息。例如，Android 的“双击以选择”功能会在用户停留于项目但未操作时提示双击。Android TalkBack 也会通告与元素关联的任何自定义操作。请慎用提示语音，仅用于复杂界面。

Android 自定义操作