可用性 无障碍

无障碍

无障碍设计的目的是无论任何人都能成功地浏览、理解和使用应用。

原则 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

一款设计良好的产品可供所有的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性,这是非常值得做的事情。

Material Design 内置的无障碍功能将帮助你的应用适应所有用户。本节内容主要适用于手机端 UI 设计。有关设计和开发完全无障碍的产品的详情,请访问Google 无障碍网站

明确的

使用清晰的布局以及明确的行动召唤设计,来帮助用户浏览你的应用。每添加一个按钮、图片或一行文本都会使界面变得更加复杂,可以通过以下方式简化你的应用:

  • 使可见元素清晰
  • 充足的对比度和尺寸
  • 清晰的重要性等级
  • 关键信息的辨识性一目了然

健全的

设计应用时应尽可能的包容各种用户。当用户第一次看到应用时可能只有短暂的注意力,或者只是使用纯文本的屏幕阅读器(使用语音合成器朗读文本或使用盲文显示器产生的震动触觉)。你的应用应该方便每位用户来:

  • 导航:让用户清楚地知道自己在应用中所处的位置,以及哪些是重要内容。
  • 了解重要任务:通过多重视觉样式和文本提示来强化重要信息。使用颜色、形状、文本和运动来传达正在发生的事情。
  • 访问应用:为内容添加适当的标签,来适应那些使用纯文字版的用户。

具体的

支持特定平台的辅助技术,就像支持触摸、键盘和鼠标的输入方式一样。例如,确保您的 Android 应用可以适配 Google 的屏幕阅读器TalkBack

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

颜色和对比度 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

使用颜色和对比度来帮助用户看到并解读应用的内容,与正确的元素交互,并理解操作。

无障碍调色板

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

对比度比例

基于亮度或光强度,颜色和它的背景色的对比度范围为 1-21,和万维网联盟(W3C)一致。

对比度表示两种颜色之间的差异程度,通常写为 1:1 或 21:1。两个数之间的比值越高,颜色之间的亮度差别就越大。

W3C 推荐在正文文本和图片中使用以下对比度:

  • 小文本和它的背景色之间至少有 4.5:1 的对比度。
  • 大文本(14sp bold/18sp regular 及以上)和它的背景色之间至少有 3:1 的对比度。

遵循推荐对比度的文本和背景色有清晰的对比

未遵循推荐对比度的文本会难以阅读

图标或其他关键元素也应使用上述推荐的对比度。

遵循推荐对比度的图标和背景色有清晰的对比。

未遵循推荐对比度的图标会难以阅读。

Logo 和装饰性的元素

虽然装饰性元素(例如 Logo 和插图)不需要满足推荐的对比度,但如果它们具有重要的功能,那么它们应当有可辨识度。

有辨识度的装饰性元素不需要满足对比度建议。

不需要为了满足推荐对比使 Logo 失真

其他视觉提示

对于色盲或看不到颜色差异的用户,在元素中添加额外的设计元素,以确保他们能接收到和正常人等量的信息。

色盲症分不同的类型(包括红绿色盲、蓝黄色盲和单色色盲)。对于重要的状态,可以同时使用多个视觉提示。使用下划线、指示符、图案或文本等元素来描述操作和内容。

使用多种提示来表达文本字段的错误状态:标题颜色、文本字段下划线、文本框下面的错误提示。

仅使用彩色下划线来表示文本字段的错误状态,可能会被色弱的用户忽略。

声音 & 运动 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

声音

给视觉元素添加声音作为替代方案,反之亦然。添加可隐藏的标题、文本、或其他视觉元素来作为重要声音元素和声音警报的替代方案。

通过在 UI 元素上添加描述性的标签,使用户可以通过声音在应用中导航。当使用屏幕阅读器(如「TalkBack」),并使用触摸浏览来导航时,当用户用手指触碰到元素时,元素的标签会被大声读出来。

应避免使用以下声音:

  • 通过屏幕阅读器播放不必要的声音,例如打开网页时自动播放的背景音乐。如果有背景音乐,请确保用户可以安全的暂停或停止背景音乐。
  • 添加到原生元素上的额外的声音(屏幕阅读器能够正确的理解原生元素)。

运动

Material Design 使用运动来指引用户的注意力,以降低用户因试图转换而分心。用户可以跟踪视觉焦点,视觉焦点由界面转换而来,并且移除了不重要的元素。

为了使具有运动和视觉敏感性的用户能舒适地使用界面,请遵循Material Design 运动规范,该规范支持 W3C 的以下运动指南:

定时控件

应用中的控件可以设置为在一定时间后消失。例如,播放视频 5 秒后,播放按钮控件可能会从屏幕上淡出。

高优先级的控件
避免在非常重要的控件上使用定时器,如果控件消失的太快,用户可能不会注意到控件。例如,当焦点聚焦到控件上时, TalkBack 会大声朗读出控件,如果为其加上了定时器,可能会阻止控件完成既定的任务。

对于有其他重要功能的控件,请确保用户可以再次启用控件、或可以通过其他途径执行相同的功能。更多详情请参考等级 & 焦点

样式 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

布局

Material Design 的触控范围指南使那些无法看到屏幕、或者运动不灵活的用户能够点击应用中的元素。

触控范围

触控范围是屏幕中响应用户输入的部分。它们向外延伸,并超过元素的视觉边界。例如,图标可能显示为 24x24dp,但是加上图标周围的边距,则构成了 48x48dp 的触控范围。

触控范围应该至少为 48x48dp。不管屏幕有多大,这种尺寸的触控范围都相当于大约 9mm 的物理尺寸。推荐的触控范围的尺寸为 7-10mm。可能需要使用更大的触控范围来适配更大范围的用户,例如运动能力还在发展中的儿童。

触控范围间距

在大多数情况下,触控范围应该以 8dp 或更大的间距进行分隔,以平衡的信息密度和可用性。

头像:40dp
图标:24dp
触控范围:48dp

触控范围示例

触控范围高度:48dp
按钮高度:36dp

触控范围和按钮示例

分组项目

把相关的项目放在一起,对那些视力低下或者在聚焦困难的用户非常有帮助。

滑块值和滑块控件非常接近

滑块值和滑块控件之间的距离太远。对于使用了屏幕放大的用户,他们想要同时看到滑块和数值的时候,需要来回平移屏幕。

字体

为了提高可读性,用户可能会增加字体大小。移动设备或浏览器有调整系统字体大小的功能。要在 Android 中使用系统字体大小,使用可缩放像素(sp)来标记文本极其关联容器。

确保为大型字体和外语字体分配了足够的空间。有关推荐的外语字体大小的信息,请参考行高

等级 & 焦点 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

应用应当给予用户反馈,以及让用户了解在应用中所处的位置。导航控件应当易于寻找,其说明应当清晰。视觉反馈(如标签、颜色和图标)和触控反馈向用户说明了 UI 中可用的元素。

导航中应当包含清晰的任务流程,最小化任务的步骤。对于常用的功能,应当使用焦点控制,或者控制键盘和阅读焦点。

屏幕阅读器

屏幕阅读器为用户提供了多种屏幕导航的方法,包括:

  • 屏幕阅读器的触摸界面允许用户在屏幕上移动手指,以听到手指正下方的内容。这使用户能快速了解整个界面。或者用户可以凭借肌肉记忆快速移动到指定 UI 元素。在 TalkBack 中,此功能被称为「触摸浏览」 。用户必须双击才能选择一个项目。
  • 用户也可以在屏幕上向前或向后滑动来移动焦点,从上到下线性地阅读页面。这允许用户在某些元素上进行训练。在 TalkBack 中,这称为线性导航

用户可以在「触摸浏览」和「线性导航」模式之间切换。当页面使用合适的语义化标签时,一些无障碍技术允许用户在页面的这些标记(例如标题)之间导航。

硬件或软件方向控制器(例如 D-pad、轨迹球或键盘)允许用户以线性的方式从一个选择的元素跳到另一个元素。

等级

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

  • 重要操作:将重要操作放在屏幕的顶部或底部(可以用快捷方式访问)。
  • 相关项目:将相似层级的相关项目放在彼此相邻的位置。

把重要的操作放在屏幕顶部,使它们在层次结构中显得更重要。

当把重要的操作嵌入到其他内容中时,就不清楚什么是页面中最重要的元素。

焦点顺序

输入焦点应当按照视觉布局的顺序排列,从屏幕顶部到底部。它应该从最重要的项目到最不重要的项目进行遍历。通过以下方式来确定的焦点和移动方式:

  • 元素接收焦点的顺序
  • 元素分组的方式
  • 拥有焦点的元素消失时,焦点移动到哪里

通过视觉指示器和辅助文本的组合,来阐明焦点的位置。

分组

在标题下对类似项目进行分组,以告诉用户这个分组代表什么。这些分组利用空间在来组织内容。

转换

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

如果任务在中断后又恢复了,请将焦点放在之前聚焦的元素上。

绿色圆圈表示屏幕中的元素接收焦点的顺序。

实施 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

标准的平台控件中已经包含了无障碍技术所需的标记和代码,使用这些控件来让应用更好的兼容各个平台的无障碍技术(包括快捷操作和应用结构),为用户提供更高效的体验。

使用了标准平台的对话框

使用非标准平台的对话框来执行标准的对话框任务。要适配无障碍技术需要进行额外的编码和测试。

在设计期间和设计完成后,都应当打开系统的无障碍功能来测试。

设计时需要注意的其他事项:

  • 使用可缩放文字和宽松的布局为部分用户兼容大号字体、色彩矫正、放大手势以及其他无障碍功能。
  • 键盘/鼠标界面可以仅通过键盘就能遍历所有任务和悬浮信息。
  • 触摸界面应允许屏幕阅读器和其他无障碍设备读取界面中的所有内容。朗读的文本应该是有意义的和有帮助的。

经过缩放的 UI 能够很好的适配放大手势和大号字体模式

没有经过缩放的 UI 不能适配放大手势和大号字体模式。部分内容被重叠或截断。

为 UI 元素添加标签

使用屏幕阅读器的用户需要知道屏幕中哪些元素是可以点击的。在组件(按钮、图标、只有图标没有文本的选项卡)中添加contentDescription属性,来让屏幕阅读器可以大声朗读组件的名称。

1、标记搜索图标
2、标记麦克风图标

1、标记编辑图标
2、标记聊天图标

帮助文档

帮助文档中应当包含所有的无障碍功能说明。确保帮助文档的相关性、可访问性和可发现性。例如,可以参考这份指南来了解如何在 Google Drive 中使用屏幕阅读器。

测试和研究

遵循这些无障碍指南有助于提升应用的可访问性,但不能保证拥有一个完全可访问的体验。建议你也进行以下操作:

  • 打开各种无障碍功能,从头到尾来测试你的应用。例如,在 TalkBack 中打开「触摸浏览」,并改变文字转语音的语速。
  • 让有障碍的用户测试你的应用。
  • 考虑如何访问独立的元素,以及如何访问流程中的某个元素。
  • 确保每个人都能完成应用的主要任务。

与你的用户进行交流,尤其是使用辅助功能的用户,了解他们的需求,以及他们在应用之外的需求,包括他们使用什么工具以及如何使用。然后去了解这些工具,以此来提供最佳的用户体验。

人们以不同的方式使用无障碍技术。

书面用语 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

清晰且有帮助的无障碍文本,是让 UI 更易访问的主要方法之一。视力障碍或无视力的用户会从清晰的语言描述中获益。无障碍文本是指供屏幕阅读器软件使用的文本,例如 Android 上的 TalkBack、iOS 上的 VoiceOver、桌面端的 JAWS。屏幕阅读器会大声朗读屏幕上所有的文本,包括可见和不可见的文本。

无障碍文本包括可见文本(包括 UI 元素中的标签、按钮中的文字、链接和表单)和不可见的描述(按钮的替代文字)。在有些情况下,可以使用无障碍文本覆盖屏幕中的标签,来为用户提供更多信息。

有些用户会使用页面中的标题和链接进行导航,因此可见和不可见文本的描述都应当有所帮助,且有各自不同的意义。使用屏幕阅读器测试你的应用,来找出没有无障碍文本的区域,以及需要改进的区域。

保持简洁

保持内容和无障碍文本简短,突出重点。使用屏幕阅读器的用户会听到朗读的每个 UI 元素。文本越短,屏幕阅读器用户导航速度越快。

切换到 [email protected]

简洁明了的无障碍文本

账户切换。切换到账户 [email protected]

不要使用太长的无障碍文本

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

屏幕阅读器会通过声音、或通过在无障碍文本前后说出控件名称,来自动声明控件的类型和状态。

搜索

使用简短的说明

搜索字段

不要解释控件类型

开发人员注释:如果控件类型和状态没有被正确读取,则可能是控件的无障碍角色设置不正确,或者是一个自定义控件。网站上的每个元素都应该有一个相关的无障碍角色,或者通过代码为其声明一个角色。这意味着按钮应该设置成按钮、复选框应该设置成复选框,以便将控件的类型和状态正确传达给用户。如果元素是从原生的 UI 元素上扩展或继承的,他会获得父元素的角色。如果不是,你可以在每个平台上为无障碍重写这些信息(ARIA 适用于 Web,AccessibilityNodeInfo 用于 Android)。

在 Android,将控件的 AccessibilityNodeInfo 类名字段设置为「android.widget.Button」。

仅通过 Wi-Fi 下载

使用简短的说明

已选择通过 Wi-Fi 下载

不要解释状态

指示元素的作用

使用操作动词来指明一个元素或链接的作用,而不是一个元素的外观,以便视觉障碍用户能够理解。链接文本应该是:

  • 指明点击链接后将执行的任务
  • 避免含糊不清的描述,例如「点击此处」

确保元素在所有地方都保持一致。

语音描述指明了图标的操作

描述外观无法表明图标的作用

导航菜单的无障碍文本可以是「显示/隐藏导航菜单」(首选)或者「显示/隐藏主菜单」(可接受)。

「侧边抽屉」无法指明会发生什么操作

状态改变的元素

对于可以改变数值和状态的图标,根据向用户呈现内容来朗读图标。

  • 如果图标表示项目的属性,则将其设置为复选框,以便屏幕阅读器能读出当前状态,例如「打开」或「关闭」。
  • 如果图标表示操作,使用文本标签来指明选中图标后会发生的操作,例如「添加到心愿单」。

元素的显示方式会影响功能,例如,如果星形图标表示添加到心愿单,则应用应当说出「添加到心愿单」或「从心愿单中移除」。

不要提及确切的手势和交互

不要告诉用户如何与控件进行肢体交互,因为它们可能使用键盘或其他设备,而不是用手指或鼠标进行导航。无障碍软件会为用户描述正确的交互方式。

「语音搜索」的描述和用户输入法(语音)相匹配的任务(搜索)。

「点击」是不准确的,因为这不是激活此控件的唯一方式(它也可以通过按下键盘、开关切换或盲文显示来激活)。由于本例中用户的主要任务是搜索,所以操作应该使用如上文所提到的文字,而不应该使用「说话」。

确认操作

使用对话框、Toast 或 Snackbar(Android)来让用户确认或确知具有破坏性(例如「删除」或「移除」)或无法撤销的操作。

通过视觉表现来确认的操作(例如,在删除一个项目时重新排列网格的布局)并不需要 Toast。在这些情况下,使用无障碍文本确保让用户得知。

使用提示语音

提示语音为不明确的操作提供额外的信息。例如,Android 的「双击以选择」功能,提示用户在选择项目时需要点击两次。Android 的 TalkBack 也会提醒用户与元素相关的自定义操作。谨慎使用提示语音,确保只在复杂的 UI 上使用。