从一开始的无障碍设计｜Kia的图书馆

设计师只需付出大约 20% 的努力就可以解决数字界面高达 80% 的无障碍挑战。请继续阅读，了解大量实用技巧，这些技巧可以帮助您在模型阶段为 a11y 打下良好的基础。

为屏幕界面获得完美的可访问性分数是一项艰巨的任务，需要整个产品团队的单独协调努力，产品所有者的负责任的方法，以及最好是精通a11y的专业人士。然而，在产品的早期阶段，一个人就可以为可访问性奠定坚实的基础。

请留下来，看看负责模型的设计师如何以最少的努力来设计界面，以实现最佳的可访问性。

认为只有一小部分屏幕用户需要视觉、听觉或运动调节的想法是错误的。

对于许多人来说，视力在学校就开始恶化，

，美国只有大约三分之一的成年人在不戴眼镜、隐形眼镜或眼科手术的情况下视力为 20/20。远视会影响大约一半40 岁以后的人，对于任何不戴眼镜或隐形眼镜的人来说，远视都会让你的界面显得模糊。

如果你过于依赖听觉提示，那么在任何嘈杂的环境中你的努力都会白费。

用户的运动技能可能会因与创伤或疾病无关的原因而暂时受损：如果您曾经一只手拎着沉重的杂货袋，而另一只手尝试使用智能手机，那么您就会知道，您操纵物体的能力会受到影响。屏幕可以显着缩小。以这种方式触及错位的 CTA 按钮需要采取危险的操作，可能会使您的手机正面朝下掉在地上。

这仅证明可访问性应该从一开始就融入到您的设计中，以使大多数用户的生活更轻松。

为“替代”设计留下可访问性是没有意义的。无法保证您会获得实施它的批准或时间。在你的主要设计中考虑 a11y 会容易得多，而且最终肯定会投入生产。

下面，我们分享了一系列关于如何在设计模型时为界面做好准备以提高可访问性的实用技巧。您可以一次性阅读全部内容，也可以从下面的目录中进行选择：

1.

a.

b.

c.

d.

e.

f.

g.

2.

a.

b.

c.

d.

3.

4.

a.

b.

5.

a.

b.

c.

d.

1. 文本感知

1.1 正文要足够大

对于大多数现代无衬线字体，这意味着尺寸在 14 到 18 像素之间。没有神奇的数字，因为在不同的字体中，字形将占据边界框内更大或更小的区域（在传统排版中称为“排序”或“类型”），从而导致不同的默认字母

。请记住，选择 14 到 18 之间的数字是不会出错的。

1.2 如有必要，将文本样式分为段落和 UI

界面的用途影响可访问性要求。在某些情况下，密度可以提高可达性。在其他情况下，情况恰恰相反。

在设计系统中使用单独的文本样式可能是个好主意：

• 段落：更大的尺寸和行距（相对于字体大小最小 ✕1.5）——为了“可读”文本。

• UI：对于界面元素来说，尺寸更小，行距尽可能最密。这种方法会带来一个困境，您需要根据项目要求来解决：在“专业”应用程序（XCode、Figma 等）中，较大的文本会提高可读性，但代价是占用控件中的宝贵空间区域：用户将不得不滚动更多，这对运动提出了挑战。否则，您可能会牺牲易读性并降低“电机”要求。

左侧需要较少的滚动，右侧需要较多的滚动

1.3 界面中90%的文本坚持4.5:1的对比度

如下：

•

(CR) 至少应为4.5:1（AA 级），更好的是 7:1（AAA 级）。

• 大文本的 CR 可以为 3:1 (AA)，但最好以 4.5:1 (AAA) 为目标。

• 非文本用户界面组件或图形对象应遵循至少 3:1 的 CR。如果您界面的受众不需要任何特殊调整，则您不必自始至终遵循 AAA 要求。

然而，对于用户花费最多时间的主界面元素来说，4.5:1 的对比度是一个合理的中间值。

请记住，CR 是相对于背景计算的，因此使用彩色背景会显着降低对比度。

相同深浅的蓝色在不同背景下有不同的CR

在为新项目设计调色板时，我建议从背景开始：对于所有可能的卡片、控件和面板，这样它们的 CR（相对于主背景）约为 1.2:1。对于白色背景，这些通常是较浅的灰色阴影。对于控件的文本色调和强调色，您应该选择 CR 至少为 1.2 + 4.5 = 5.7:1 的颜色，这意味着即使在 1.2:1 背景下，其 CR 仍至少为 4.5： 1.

请毫不犹豫地依靠 Figma 或 Sketch 插件来帮助您检查颜色的对比度。就我个人而言，我推荐Alex Carr 开发的 Figma

Figma 对比插件

要检查实时网站上的颜色，只需查看Chrome 中内置的

您还可以在 Chrome 开发者工具的“样式”选项卡中检查任何颜色的对比度。

Chrome DevTools 中弹出颜色属性

公平地说，WCAG 当前使用的对比度公式

。例如，有时对于特定背景颜色的公认不太幸运的颜色，CR 会被计算得更高。

你永远无法说服我在白色背景下正确的更好

换句话说，你不应该盲目依赖CR。我还建议花一些时间学习感知亮度和

。

1.4 分割视觉图层时避免文本太小或太亮

通常，您必须将主要文本与辅助文本分开：您可以通过调整颜色或大小来做到这一点，但我建议使用这两种方法 - 两者都适度。

例如，对于文章中的旁注，您可以尝试只小一点、轻一点的文本——通常，这就足够了。

好方法：旁注稍微小一点，稍微轻一点

不太好的方法：文字太小

不太好的方法：文字太轻

此外，您可以尝试其他方法根据“重要性”分隔文本：

• 替代字体样式：斜体或压缩体；

• 配套字体：例如，PT Sans 与 PT Serif 相对应，反之亦然；

• 不同的字体。在下图中，使用尺寸稍小的压缩字体变体可以使文本保持黑色，这有利于可访问性。

通过简洁的风格和较小的尺寸实现视觉分离

1.5 对于小文本使用更大的间距和稍微粗体的样式

如果您的设计有很多视觉层次，并且您正在冒险进入一个小文本区域（12px 或更小），那么您能做的最好的事情就是选择一种标题样式（如果它出现在您选择的字体中）。通常，标题样式针对小文本进行优化：具有更宽和更大的字母、更粗的笔划以及更宽的字母间距。

左侧为常规字体，右侧为特定说明文字

如果标题样式不适用于您的字体，您可以执行以下操作：

1. 增加间距。Adobe 将此设置称为“跟踪”，在 Figma 和纯 CSS 中称为“字母间距”。

2. 如果字体允许，请选择更粗的样式。例如，如果您的主要文本是常规文本，请为小文本选择“中粗体”或“半粗体”。

两个旁注都很小，但第二个更易读

反之亦然：减少文章标题和前导段落等大文本中的字母间距。

1.6 不要仅在选择控件中依赖颜色

为了帮助患有不同类型色盲的人，请始终依靠颜色以外的东西来传达选择：替代字体样式、增加对比度或象形图都可以。

左边的设计比右边的设计更难理解

iOS 或 macOS 的本机应用程序可以检查用户是否打开了“增加对比度”设置。这意味着您可以使您的设计适应此设置，特别是当您不想在“主要”设计中在美观和可访问性之间进行权衡时。例如，您可以使用边框进一步突出显示所选内容，该边框仅对喜欢增加对比度的用户可见：

如果在操作系统设置中启用了增加对比度，则会出现边框

但是，我建议不要过度使用这种方法。首先，这将导致设计的单独版本，我们已经确定要避免这种情况。其次，不能保证每个有视力障碍的人都会启用此设置。第三，低能见度可能是根据具体情况而定的：想象一下送货员试图在明亮的阳光下导航应用程序。

1.7 在颜色代码中考虑色盲

在设计界面时，我们经常依赖

始终确保您使用的色调足够清晰，能够通过色盲模拟器中的测试。如果您在 Mac 上工作，我强烈推荐

对于色盲用户来说，某些色调可能无法区分

其次，考虑在颜色编码之上使用其他指示：您可以使用图案或添加符号：

Trello 中的色盲模式

2. 考虑系统字体缩放

所有现代操作系统都允许用户增加界面的基本字体大小；所有现代浏览器都支持页面缩放。考虑缩放很少需要设计者单独的努力（前提是正确实现了布局）。可以通过操作系统自由调整字体大小的本机应用程序则不同：如果您希望界面保持形状，则必须考虑到这一点。

2.1 始终在 200% 浏览器缩放下测试您的 Web 应用程序

如果您的布局遵循长期以来一直是 Web 开发规范的自适应原则，那么您几乎可以肯定您的页面将支持缩放。但是，在审核实施的布局时，请确保缩放至 200%，以防万一。

2.2 对于本机应用程序，始终测试最大系统文本大小

设计水平容器时要格外小心：表格行、工具栏、菜单和过滤器。在“放大”字体设置下，它们几乎肯定会超出容器宽度：

大字体的典型问题

深入您的设备设置来检查：

• iOS：

• Android：

与您的开发人员就在 iOS 上使用

或在 Android 上

这些功能允许控制应用程序在不同的系统范围文本设置下的外观。如果您在设计中使用自定义字体，请务必检查不同默认尺寸（从 xSmall 到 xxxLarge）的布局。

iOS 动态字体的字体大小表

2.3 将文本放在自己的“地板”上

文本容器是一个动态实体。在任何时候，它都可能比最初的模型中占用更多或更少的空间。用户可以在系统级别增加字体大小。产品负责人可以在不通知您的情况下更改按钮上的措辞。最后，您的应用程序可能需要国际化，并且文本长度因语言而异。

最可靠（但并不总是最美观）的方法是将每个文本元素分配给容器内自己的“地板”。

让我们回到前面的示例，其中包含图标、应用程序名称和价格。如果我们为每个文本元素分配一定的垂直空间，那么我们的水平容器将能够承受更大的字体、“更长”的价格或更冗长的语言的翻译。

每一段文字都有它的底线

2.4 优先选择多行文本而不是截断行

如果可能，请避免截断文本行。这对于视障用户所依赖的屏幕阅读器来说效果不佳。请参阅上面的示例，了解如何避免文本容器的“变形”，以便它们可以在必要时容纳多行文本。

如果由于某种原因截断是不可避免的，请记住某些类型的数据，如文件名、卡号和帐号、长数字 ID，应在中间截断，理想情况下，仅应省略重复字符。如果这太难实现，请采用一种截断方法，在字符串末尾留下一些字符。

对于a11y来说，没有一种截断方式是理想的，但是下面两种稍微好一些

我还建议使用等宽字体来显示需要截断的数据。

3.考虑添加对深色主题的支持

您应该始终考虑为您的界面添加“夜间”主题。不是因为时尚，而是因为在黑暗中很难从浅色背景中阅读。此外，有些对光敏感的用户肯定会喜欢较暗的色调。

然而，支持多个主题并不总是有意义。例如，如果您正在设计一个大量使用光栅图像（尤其是用户生成的图像）的内容网站，那么您的深色主题可能仍然有明显的浅色斑点，具体取决于用户上传的内容。也许，在这种情况下，提供替代主题会达不到目的。

深色主题的完美案例是应用程序中唯一的图形是 SVG 图标：它们的颜色可以通过代码轻松调整。

如果您决定提供夜间主题，请不要忘记使用三向切换：浅色主题、深色主题或依赖于操作系统的设置（因为现代操作系统可以根据时间和其他设置动态切换主题）。

Figma DIY：构建颜色系统插件

2022 年 6 月 2 日

另请阅读

我们建议从一开始就在您的设计工具中设置灵活的颜色系统，这将使实现界面主题变得更加容易。请阅读我们博客中的

它也适合初学者，因此，如果您是一名编码经验很少的设计师，您仍然可以遵循。

在 Figma 中为您的颜色样式选择“功能”名称，这将使主题会计变得更容易

4. 屏幕阅读器帐户

4.1 根据内容的重要性在空间上调整内容

在考虑给定屏幕上的界面结构时，请考虑空间结构并确保您的视图以最重要的元素“开始”：标题、CTA 按钮。按对用户的重要性排列所有元素，将最重要的信息放在左上角，将最不重要的信息放在右下角。对于 LTR（从左到右）书写系统来说确实如此，因为屏幕阅读器将首先阅读最上面和最右边的内容。如果您的用户主要来自 RTL（从右到左）文化，请进行相应调整。

4.2 提供模型和替代文本

优秀的设计师在他们的工作中从不依赖“lorem ipsum”。一个好的模型应该包含实际的文本：与客户验证、校对并准备好复制到应用程序代码中。

这同样适用于非文本控制元素的替代文本：基于图标的按钮和分段控件。向开发人员提供模型时，请确保指定每个没有文本的控件应使用哪个动词（使用动词作为按钮的替代文本是一个很好的风格）——这是看不见的用户会听到的从他们的屏幕阅读器。

4.3 避免行截断

参见

。

5 杂项

5.1 考虑动画中的运动敏感性

对于患有前庭系统疾病的用户来说，动画可能会导致头晕。截至 2019 年，所有主要浏览器都支持prefers-reduced-motion媒体查询，旨在帮助对运动敏感的人应对复杂的动画。

关于该主题的一些进一步阅读：

•

5.2 增加链接和非文本按钮的点击区域

此外，在一个好的设计系统中，即使没有可见“主体”（工具栏、导航）的按钮也必须“继承”更通用的父按钮元素，因此继承其可点击区域以避免用户感到意外。

可点击区域大于可见区域

5.3 设置按钮的合理最小宽度

这样，当界面大小调整时，带有短标签的控件（普通的“确定”按钮）就不会变得太小。

5.4 不要搞乱默认的“焦点”设计

标准键盘控件是辅助功能的重要组成部分，元素的默认“焦点”状态将帮助那些使用 Tab 键而不是（或除了）指针进行导航的用户区分交互式和非交互式元素。

如果您绝对必须为焦点状态创建自定义设计，请确保它在所有控件中保持一致，并且可以在界面上轻松读取。

我们的提示收集到此结束：现在。尽管看起来有太多的细节需要记住，太多的事情需要实现，但我们相信上面的建议将帮助您创建一个易于访问且易于使用的良好界面：慢慢开始，专注于第一个重点介绍字体大小和对比度的章节。您会惊讶地发现，您能够如此迅速地掌握无障碍设计艺术，并使 a11y 成为您设计过程中不可或缺的一部分。

不要忘记：无障碍设计是必需品，而不是奢侈品。每个用户都需要它。

如果您需要评估当前设计的可访问性，或者您想聘请 Martian 设计师来帮助您从头开始构建功能齐全且可访问的界面，请随时给我们留言