|
随着时期的展开，"无障碍体验" 对开发者的意义也愈发严重，在上一篇文章 中，我们为您引见了辅助技术，层次结构，颜色和对比度等内容。本文将进一步为您引见无障碍规划和排版、文案等相关的内容。 规划和排版 Material Design 的触摸目的指南能够辅佐无法看到屏幕或难以处置较小的触摸目的的用户点按应用中的元素。 1.1 触摸目的和指针目的 1.1.1 触摸目的 触摸目的是屏幕上响应用户输入的部分。它们会超出元素的可视边疆。例如，一个图标的大小看上去可能是 24 x 24dp，但加上它周围的内边距，构成的完好触摸目的大小是 48 x 48dp。 关于大多数平台，请思索将触摸目的的大小至少设置为 48 x 48dp。不论屏幕尺寸如何，这一大小的触摸目的的实践尺寸都是大约 9 毫米。倡议的触摸元素目的尺寸为 7 到 10 毫米。为充沛思索更普遍的用户群体，倡议您运用较大的触摸目的。 请留意，在 iOS 上，倡议的触摸目的尺寸是 44 x 44pt。如需获取特定平台完成指南，您能够访问开发者资源页面: https://material.io/develop 1.1.2 指针目的 指针目的相似于触摸目的，但适用于运用运动追踪指针设备 (如鼠标或触控笔) 的情形。倡议将指针目的至少设置为 44 x 44dp。
△ Android 目的尺寸为 48 x 48dp 头像: 40dp 图标: 24dp 头像和图标的触摸目的: 48dp △ 触摸目的 1.1.3 触摸目的间距 大多数状况下，在触摸目的周围设置 8dp 或更大的分隔空间，有助于均衡信息密度和可用性。
△ 触摸目的高度: 48dp 按钮高度: 36dp △ 触摸目的和按钮 1.2 规划 1.2.1 响应式规划 灵活的响应式规划可辅佐内容依据屏幕尺寸中止缩放。这有助于避免截断在特定设备类型上或在不同分辨率下可能无法完整显现的内容。 1.2.2 项目分组 能够将相关项目分到一组或放在临近的位置，以进步可读性。
正确做法 滑块值与滑块控件紧邻。 留意 假如滑块值离滑块控件太远，请思索移动滑块值。运用屏幕放大工具的用户假如不来回平移，可能无法同时查看滑块及相应值。 您能够参考以下内容，了解更多相关信息:
1.3 排版 1.3.1 字体 为了进步可读性，用户可能会放大字体。移动设备和阅读器包含允许用户在系统范围内调整字体大小的功用。如要在 Android 应用中启用系统字体大小，您能够将文字及其相关容器标记为以可缩放像素 (sp) 为单位中止丈量。 确保有足够的空间容纳大号字体和外文字体。如需了解倡议的外文字体大小，您能够参阅行高相关内容: https://material.io/design/typography/language-support.html#language-considerations 文案 您能够查看相关博文，辅佐您了解这部分内容: https://medium.com/google-design/improving-comprehension-through-intuitive-actions-f7e6336e12e6 2.1 无障碍文本 无障碍文本是指屏幕阅读器无障碍软件运用的文本，例如 Google 在 Android 设备上推出的 TalkBack、Apple 在 iOS 设备上推出的 VoiceOver 以及 Freedom Scientific 在桌面设备上推出的 JAWS 等软件。屏幕阅读器会大声读出屏幕上的文本和元素 (例如按钮)，包含可见和不可见的备用文本。 2.1.1 可见文本和不可见文本 无障碍文本包含可见文本 (包含界面元素的标签、按钮、链接和表单上的文本) 和不会显现在屏幕上的不可见阐明 (例如图片的备用文本) 。有时，能够用无障碍文本交流屏幕上的标签，以向用户提供更多信息。 当可见文本和不可见文本都具描画性且有意义时，能够辅佐用户运用屏幕上的题目或链接中止导航。屏幕阅读器能够辅佐您测试无障碍文本，以及肯定能够将其添加到的位置。 2.1.2 备用文本 备用文本有助于将视觉界面转换为基于文本的界面。备用文本是代码中的一个简短标签 (最多 125 个字符)，用于向无法看到图片的用户描画图片内容。由于备用文本仅适用于图片，因而无需向备用文本添加 "图片" 或 "照片"。屏幕阅读器会大声读出备用文原本替代图片。备用文本关于视力正常的用户也很重要，由于假如图片加载失败，系统将会显现备用文本。包含指定关键字，以辅佐用户了解图片的信息。关键字还能够改进搜索引擎优化 (SEO)。
正确做法: 运用备用文本，用信息丰厚的短语传达图片所显现的内容。 (备用文本示例: 夜晚的东京塔和天际线)
留意: 仅运用一两个词来描画图片可能无法提供有效信息。 (备用文本示例: 天际线)
正确做法: 撰写的替代文本要简短精悍、要能被屏幕阅读器快速读出并向用户提供背景信息。 (备用文本示例: 夜晚从屋顶观赏到的东京塔和天际线)
留意: 假如备用文本的描画冗长，则可能会被截断。大多数屏幕阅读器不会读出超越 125 个字符的文本。 (备用文本示例: 东京塔天际线。夜晚从当地一家酒店的屋顶拍摄。这张图片于 2014 年 3 月 7 日满月之际用数码单反拍摄)
正确做法: 包含指定关键字。 (备用文本示例: 日本东京港区芝公园夜晚的天际线)
错误做法: 仅仅为了改进 SEO 而将关键字放入备用文本中可能会使屏幕阅读器用户感到困惑。 (备用文本示例: 东京, 日本, 寿司, 塔, 傍晚, 夜晚, 建筑, 大楼, 天空, 天际线, 风光)
正确做法: 撰写描画图片内容的备用文本，而不运用 "照 片" 或 "图片" 等字词。 (备用文本示例: 城市景色 - 夜晚的东京塔)
留意: 不需求在备用文本中包含 "照片" 或 "图片" 这样的字词。 (备用文本示例: 东京塔图片) 2.1.3 图片阐明、相邻文本和嵌入式文本 关于图片中和周围的文本，应思索无障碍设计，由于这些文本提供关于图片的关键信息。
① 图片 ② 图片阐明 ③ 相邻文本 图片阐明 图片阐明是显现在图片下方的文本。图片阐明用于解说图片的背景信息 - 人物、内容、时间和地点。视力正常的用户和运用屏幕阅读器的用户都依托图片阐明来获取对图片的描画。
正确做法: 关于较长的描画，请运用图片阐明而不是备用文本，由于图片阐明适用于一切用户，而备用文本的长度限制在 125 个字符内。 (图片阐明示例: 这把 20 世纪 20 年代的古董摇椅原本是总统图书馆的重要珍藏品，现寄存在 Black 博士家中。) (备用文本示例: 一把放置在书房里的古董红木摇椅，上面铺有绿色天鹅绒垫子)
留意: 假如备用文本和图片阐明的内容相同，运用屏幕阅读器的用户阅读速度可能会变慢。 (图片阐明和备用文本示例: 一把 20 世纪 20 年代的古董红木摇椅安置在 Black 博士的书房里，上面铺有绿色天鹅绒垫子) 相邻文本 相邻文本或正文文本是图片旁边的文本，能够在叙说过程中对图片中止解释阐明。假如相邻文本对图片中止了解释阐明，则可能不需求备用文本，且能够将 alt 标记留空 (alt=””)。假如将 alt 标记留空，请删除会显现的图片文件名。
图片阐明和左近的正文文本对图片中止了解释阐明。alt 标记为空 (alt=””)。 (图片阐明示例: 这把 20 世纪 20 年代的古董摇椅原本是总统图书馆的重要珍藏品，现寄存在 Black 博士家中。) (相邻文本: 这件古董珍藏品是在佛罗里达州奥兰多市的一个车库售卖活动中发现的，现寄存在 Simone Black 博士的书房里。往常，这把椅子放置在 Black 博士家的数百本图书之间，自然光线悄然洒落在它的周围。) 图片中的嵌入式文本 屏幕阅读器无法阅读嵌入在图片中的文本。假如图片中有以文本方式嵌入的重要信息，请在备用文本中包含这些重要信息。
留意: 在图片中以文本方式嵌入重要信息并将同样的内容作为备用文本时，请务必谨慎。 (嵌入式文本和备用文本示例: 这把 20 世纪 20 年代的古董红木摇椅上面铺有绿色天鹅绒垫子，曾经是总统图书馆的重要珍藏品，现寄存在 Black 博士家中) 分离运用备用文本和图片阐明 备用文本和图片阐明包含不同的信息。只需在以下状况中，备用文本才有用: 相邻文本和图片阐明没有描画图片的特征，而这些特征关于无法看到图片的用户了解图片至关重要，好比对物体的颜色、大小和位置的描画。
正确做法: 关于较长的描画，运用图片阐明。 (图片阐明文本示例: 这把 20 世纪 20 年代的古董摇椅原本是总统图书馆的重要珍藏品，现寄存在 Black 博士家中。它将于今年秋天在波士顿中止拍卖。) (备用文本示例: 一把放置在书房里的古董红木摇椅，上面铺有绿色天鹅绒垫子)
留意: 在图片阐明和备用文本中运用相同的信息可能会降低运用屏幕阅读器用户的阅读速度。 (图片阐明和备用文本示例: 这把 20 世纪 20 年代的古董红木摇椅安置在 Black 博士的书房里，上面铺有绿色天鹅绒垫子。) 2.2 阅读速度 屏幕阅读器会向用户大声朗诵每个界面元素。文本越短，屏幕阅读器用户阅读的速度就越快。 示例 切换到 jeffersonloveshiking@gmail.com 帐号切换器。切换到帐号 jeffersonloveshiking@gmail.com 阐明 正确做法 撰写明晰简短的无障碍文本。 留意 思索重写不够简约且冗长的无障碍文本。 2.3 控件类型和状态 屏幕阅读器能够经过说出控件称号或发出声音，来自动声明控件的类型或状态。 示例 搜索 搜索字段 阐明 正确做法 运用简短阐明。 留意 通常状况下，不应指出控件类型，由于 ARIA 标签会向屏幕阅读器用户声明控件类型，而使该额外的标签成为多余。 示例 仅经过 WLAN 下载 已选择经过 WLAN 下载 阐明 正确做法 运用简短阐明。 留意 倡议不要包含当前状态，在本例中，当前状态为 "已选择" WLAN。 2.3.1 开发者留意事项 假如控件类型或状态未正确读出，则阐明控件的无障碍角色可能是自定义控件或设置不当。
您能够访问官方文档，了解构建更契合无障碍规范的自定义视图的相关内容: https://developer.android.google.cn/guide/topics/ui/accessibility/apps.html#custom-views 2.4 经过操作指示元素 操作动词会指明点按一个元素或链接可执行什么操作，而不是阐明元素是什么样子。这描画了一个元素所代表的操作，不依赖于视敏度。
正确做法 经过被大声读出的描画可指明图标代表的是什么操作。 留意 描画图标外观可能无法阐明操作是什么。
正确做法 导航菜单的无障碍文本能够是 "显现导航菜单" 和 "躲藏导航菜单" (首选) 或 "显现主菜单" 和 "躲藏主菜单" (可接受)。 留意 倡议修正未指明将发作什么操作的无障碍文本，例如 "侧面抽屉式导航栏"。 2.5 具有状态变更的元素 关于会在值或状态之间切换的图标，依据它们向用户呈现的方式中止声明。例如，假如一个星形图标代表向心愿单添加内容的操作，应用能够读出 "添加到心愿单" 或 "从心愿单中移除"。
2.6 控件交互 用户可能运用键盘或其他设备中止导航，而不是用手指或鼠标，在向用户阐明如何与控件互动时，应该思索到这一点。无障碍软件将为用户描画正确的互动方式。
正确做法 "语音搜索" 命令描画了与输入方式 (语音) 相配合的用户任务 (搜索)。 留意 倡议修正未能充沛阐明如何激活控件的命令。此语音指令描画的激活方式是 "点按"，但其实能够经过键盘按键、开关设备或盲文显现器中止选择。由于这是一项执行搜索的任务，所以能够提到操作，而不是 "说话"。 您能够访问官方文档，了解 Android 自定义操作的相关内容: http://developer.android.google.cn/reference/android/view/accessibility/AccessibilityNodeInfo.html#addAction(android.view.accessibility.AccessibilityNodeInfo.AccessibilityAction) 2.7 提示语音 提示语音为不明晰的操作提供额外的信息。例如，Android 的 "双击选择" 功用提示用户点按两次。Android TalkBack 也会声明与元素相关的任何自定义操作。 以上就是无障碍 设计的第二篇内容，敬请持续关注下一篇文章，届时我们会为您带来图片、声音和运动、完成无障碍的相关内容。也欢送您持续关注我们，及时了解更多开发技术和产品更新等资讯动态。 点击屏末| 阅读原文| 即刻了解无障碍功用更多相关内容 |
名表回收网手机版
