10种让你的UI设计更易于访问的方法

﹏ヽ暗。殇╰゛Y 2022-08-30 12:58 157阅读 0赞

![8b136d36136bff7cbcffac561fe2a2ef.png][]

原文 | https://betterprogramming.pub/10-ways-to-make-your-ui-designs-more-accessible-5544c1e8d663

原译 | 小爱

UI（用户界面）设计师的主要目标是为所有用户创造良好的用户体验，无论其能力如何。当我们考虑到大约 2.85 亿人有视力障碍、1.1 亿至 1.9 亿成年人有严重的行动不便以及全球 3.6 亿人患有致残性听力损失时，这一点就变得更加重要。

作为开发人员，你应该希望你的网站易于访问、易于浏览、易于理解和可供所有人使用。万维网的创始人蒂姆·伯纳斯·李 (Tim Berners Lee) 也重申了这一点，他说：

*“网络的力量在于它的普遍性。无论是否残疾，每个人都可以访问是一个重要方面。”*

因此，这里有10种方法可以帮助你的用户界面设计更易于访问和更具包容性，并确保你为所有人设计。

**1、使用颜色和对比度来区别**

色彩是设计的主要方面之一。确保背景和前景之间有适当的对比，使用适当的阴影来区分，并突出重要信息是使你的网站更易于访问的一些最简单的方法。

毕竟，为色盲用户或戴眼镜的人设计与为没有这些障碍的人设计一样重要。

你可以使用工具 WebAIM 颜色对比度检查器来实现平衡的颜色对比度。该工具允许你输入特定的十六进制代码或从色轮中进行选择，然后进行增量调整以达到元素之间的 AA（最低对比度）或 AAA（增强对比度）对比度标准。

![12f8fe538e42a66e6909c681f641eb07.png][]

**2、 使用清晰一致的导航选项**

*  在确定网站的可访问性时，导航设计也是最重要的元素设计之一。
 *  确保网站内跨页面的导航具有一致的命名、样式和定位。
 *  为用户提供站点搜索或站点地图。
 *  通过提供方向提示（例如面包屑和清晰的标题）帮助用户了解他们在网站或页面上的位置。

![2fef0a57d1dac8b41414c777efc09823.png][]

**3、不仅仅使用颜色来指示状态变化**

虽然颜色对于传达信息很有用，但它不应该是传达信息的唯一方式。在使用颜色来区分元素时，请确保始终提供不依赖于颜色感知的额外标识，以使你的设计易于访问。

你可以通过以下方式执行此操作：

*  除了颜色之外，还使用星号来指示所需的表单字段。
 *  使用标签来区分图形上的区域。
 *  添加说明文字。

**![82aa670423bd57c81022b5b60a57eeee.png][]**

**4、为键盘用户提供视觉焦点指示**

一些用户使用 Tab 键在可聚焦元素（即链接、表单字段和已添加到带有 HTML tabindex 属性的 Tab 键顺序的任何其他内容）之间跳转。

但是，键盘用户通常很难分辨他们在页面上的位置。因此，设计人员必须始终提供清晰可见的指示，指示用户当前所在页面的哪个元素。

虽然网络浏览器确实有默认的焦点指示器，但它们并不是那么好。因此，修改 CSS 悬停是个好主意：对于可聚焦元素，例如链接、按钮、表单字段、菜单项、小部件、日历选择器等。（可聚焦元素几乎总是交互式的。）

一个有效的焦点指标：

*  有很好的对比度
 *  具有与元素互补的形状和大小
 *  使用互补但引人注目的配色方案
 *  动画以帮助用户跟踪焦点移动
 *  优雅降级（在旧浏览器上可见）
 *  跨浏览器相同

![cba82dfe19ac05575b5fc679329c13a8.png][]

**5、提供图片/媒体选择**

您网页上的所有媒体类型，无论是音频、视频还是图像，都必须具有描述它们所代表的信息或功能的文本替代项（除非图像纯粹是装饰性的）。

**开发人员最佳实践**

所有图像都必须具有描述性的 alt 属性：当图像没有 alt 文本时，提供空 alt 属性而不是根本不使用 alt 属性。这表明图像对它没有功能意义。

将 <fig> 和 <figcaption> 用于图像组和更具表现力的标题。

从辅助技术中隐藏纯粹的装饰性图像：没有任何功能或信息内容的图像是装饰性图像。这些可以通过多种方式对屏幕阅读器隐藏：

*  使用空 alt 属性
 *  使用 ARIA role="presentation"
 *  使用 CSS 背景图片

**6、设计可访问的表单**

没有人喜欢填写令人困惑的输入、不明确的预期格式、神秘的错误消息或缺乏键盘可访问性的表单。现在将此与障碍或残疾配对，你将面临令人沮丧的经历。

为了确保你页面的用户不必经历这些，在设计可访问的表单时，你必须牢记以下几点。

*  所有输入字段都应该有明确关联的标签。始终为此使用实际的标签 HTML 元素，而不是简单的 span 或 div 元素。
 *  使用占位符文本让用户了解输入的格式和性质。但是，切勿将其用作标签的替代品，因为一旦用户输入某些信息，占位符文本就会消失。
 *  始终确保清楚地确定必填和可选字段。
 *  验证表单时，应尽快显示错误消息，最好在客户端显示，而不是等到整个表单提交。错误消息应尽可能有意义和清晰。
 *  键盘用户应该可以通过 Tab 键访问表单的所有元素。Tab 键顺序应该是连续的，并且应该对用户有意义。

![e88bf0d032a041c46c033abc33e04ca4.png][]

**7、确保交互元素易于识别**

为交互元素（例如链接和按钮）提供不同的样式，使其易于识别。例如，更改鼠标悬停、键盘焦点和触摸屏激活时链接的外观。确保在整个网站中一致地使用交互元素的样式和命名。

**8、用视觉层次组织内容**

建立视觉层次结构涉及密切关注 UI 元素在你的网页设计中的定位方式，并在这些相应元素之间建立连贯性以驱动意义。

*  不要挤满你的屏幕，否则你最终会吓到用户。
 *  视力受损的人可能需要放大屏幕上的项目，因此请使你的内容具有可扩展性。
 *  号召性用语按钮应该清晰而独特。
 *  将重要信息放在视线水平附近。
 *  使用合适的标题将相关内容分组。
 *  使用空格和邻近度使内容之间的关系更加明显。

![f44667747e1030c7e08a2246c0e971e0.png][]

**9、进行用户测试**

即使在你尽最大努力使你的网站尽可能易于访问后，使用辅助技术的人可能会发现某些领域可能不像你预期的那样友好。

识别和纠正此类问题区域的最佳和最有效的方法是通过用户测试。在整个产品开发项目中进行非正式评估比在项目结束时进行正式的可用性测试更有效。

用户测试有很多好处。至关重要的是，你将能够了解设计的功能限制范围，然后针对这些限制提供解决方案。

测试让你有机会探索、调查和了解真实的人如何处理你的设计。

**10、知道无障碍不是创新的障碍**

创建无障碍设计最重要的部分之一在于知道它绝不是创新的障碍。设计限制不会让你的产品变得乏味，而是让你有新的想法去探索如何为你的所有用户打造更好的产品。

像对待任何设计约束一样接受可访问性指南。它们是为不同的受众创造令人惊叹的产品的挑战的一部分。

#  #

**学习更多技能**

**请点击下方公众号**

![bed7457bb7b098d9d66f3e51175e5d98.gif][]

![680ba5647cb0062218b9e842f46f9e10.png][]

![b254c0a21f378002a37ae263fddd6c96.png][]

[8b136d36136bff7cbcffac561fe2a2ef.png]: /images/20220829/6d73d6f0a956438ea0e29030bf14f699.png
[12f8fe538e42a66e6909c681f641eb07.png]: /images/20220829/02a42909588744d3980da0aeb7f1a70d.png
[2fef0a57d1dac8b41414c777efc09823.png]: /images/20220829/547121d3dde04e4a8027f5567b145a62.png
[82aa670423bd57c81022b5b60a57eeee.png]: /images/20220829/38118cf43f684877a12bc50d8374ecea.png
[cba82dfe19ac05575b5fc679329c13a8.png]: /images/20220829/cd5651d1357b4f6d831d14dde7c8653f.png
[e88bf0d032a041c46c033abc33e04ca4.png]: /images/20220829/e1f40bf02362418494ec0682bb5f1365.png
[f44667747e1030c7e08a2246c0e971e0.png]: /images/20220829/65797f393e9f4694a23dc8772c83b753.png
[bed7457bb7b098d9d66f3e51175e5d98.gif]: /images/20220829/4c3e6e338e7141c9accf46d86063cf06.png
[680ba5647cb0062218b9e842f46f9e10.png]: /images/20220829/1372a7973fe94eb8b36d5f6257b92c1a.png
[b254c0a21f378002a37ae263fddd6c96.png]: /images/20220829/1408aa2957e542229aa97822ec4a6340.png