借助 Material Design，搀扶帮助您打造更好的无障碍利用 (中篇)

跟着时代的开展，"无障碍体验" 对开发者的意义也愈发严重，在上一篇文章 中，我们为您介绍了辅助手艺，条理构造，颜色和比照度等内容。本文将进一步为您介绍无障碍规划和排版、案牍等相关的内容。

规划和排版

Material Design 的触摸目标指南能够搀扶帮助无法看到屏幕或难以处置较小的触摸目标的用户点按利用中的元素。

1.1 触摸目标和指针目标

1.1.1 触摸目标

触摸目标是屏幕上响利用户输进的部门。它们会超出元素的可视鸿沟。例如，一个图标的大小看上往可能是 24 x 24dp，但加上它四周的内边距，构成的完全触摸目标大小是 48 x 48dp。

关于大大都平台，请考虑将触摸目标的大小至少设置为 48 x 48dp。不管屏幕尺寸若何，那一大小的触摸目标的现实尺寸都是大约 9 毫米。定见的触摸元素目标尺寸为 7 到 10 毫米。为足够考虑更普遍的用户群体，定见您利用较大的触摸目标。

请重视，在 iOS 上，定见的触摸目标尺寸是 44 x 44pt。如需获取特定平台实现指南，您能够拜候开发者资本页面:

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) 为单元停止丈量。

确保有足够的空间包容大号字体和外文字体。如需领会定见的外文字体大小，您能够参阅行高相关内容:

案牍

您能够查看相关博文，搀扶帮助您领会那部门内容:

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 开发者重视事项

假设控件类型或形态未准确读出，则阐明控件的无障碍角色可能是自定义控件或设置不妥。

无障碍角色联系关系: 能够将每个元素与网站上的无障碍角色相联系关系或对其停止编码，以使其可以准确通信。那意味着将按钮设置为按钮，将复选框设置为复选框。

原生元素: 假设您扩展或沿用原生界面元素，可能会找到准确的角色。不然，要针对各个平台笼盖无障碍信息，您能够参阅适用于网站的 ARIA 和适用于 Android 的 AccessibilityNodeInfo 。

ARIA

AccessibilityNodeInfo

您能够拜候官方文档，领会构建更契合无障碍原则的自定义视图的相关内容:

2.4 通过操做指示元素

操做动词会指明点按一个元素或链接可施行什么操做，而不是阐明元素是什么样子。那描述了一个元素所代表的操做，不依靠于视敏度。

准确做法通过被高声读出的描述可指明图标代表的是什么操做。

重视描述图标外看可能无法阐明操做是什么。

准确做法导航菜单的无障碍文本能够是 "展现导航菜单" 和 "隐躲导航菜单" (首选) 或 "展现主菜单" 和 "隐躲主菜单" (可承受)。

重视定见修改未指明将发作什么操做的无障碍文本，例如 "侧面抽屉式导航栏"。

2.5 具有形态改变的元素

关于会在值或形态之间切换的图标，根据它们向用户闪现的体例停止声明。例如，假设一个星形图标代表向心愿单添加内容的操做，利用能够读出 "添加到心愿单" 或 "从心愿单中移除"。

假设图标代表某个项目标属性，且已编码为复选框，屏幕阅读器将读出当前形态 (如 "启用" 或 "停用")。

假设图标代表一项操做且已抉择，文本标签能够指定发作的操做，例如 "添加到心愿单"。

2.6 控件交互

用户可能利用键盘或其他设备停止导航，而不是用手指或鼠标，在向用户阐明若何与控件互动时，应该考虑到那一点。无障碍软件将为用户描述准确的互动体例。

准确做法"语音搜刮" 号令描述了与输进体例 (语音) 相共同的用户使命 (搜刮)。

重视定见修改未能足够阐明若何激活控件的号令。此语音指令描述的激活体例是 "点按"，但其实能够通过键盘按键、开关设备或盲文展现器停止抉择。因为那是一项施行搜刮的使命，所以能够提到操做，而不是 "说话"。

您能够拜候官方文档，领会 Android 自定义操做的相关内容:

)

2.7 提醒语音

提醒语音为不了了的操做供给额外的信息。例如，Android 的 "双击抉择" 功用提醒用户点按两次。Android TalkBack 也会声明与元素相关的任何自定义操做。

以上就是无障碍 设想的第二篇内容，敬请继续存眷下一篇文章，届时我们会为您带来图片、声音和运动、实现无障碍的相关内容。也欢送您继续存眷我们，及时领会更多开发手艺和产物更新等资讯动态。

点击屏末| 阅读原文| 即刻领会无障碍功用更多相关内容