高手总结！帮你快速提高页面可用性的8个原则

编者按：不论是设计网页还是 APP，在UI设计的时候，确保产品的可访问性都是一件知易行难的事情。这种细节上的打磨优化，逻辑上是没有上限的，但是在保证基本的可访问性和可用性上，是有下限的。这篇来自资深设计师 Brianna Koch 的文章梳理总结了8个基本的可访问性优化的方向和原则：

四年前，在我刚刚开始倡导设计对用户无障碍的网页和产品的时候，碰到过很多障碍。我的很多同事和朋友都认为，无障碍的、可访问性优秀的设计，太过理想化。他们认为，有时间去优化产品的可访问性，不如花时间去挖掘用户价值或者给企业增加收益，甚至认为可访问性设计和这些是有直接冲突的。

我发现这种想法通常是源自于误解，很多人会认为进行可访问性设计意味着构建高级的、特定的功能，而实际上可访问性设计所需要的是，是在日常设计当中，进行合理的优化就能做到。

这篇文章就帮你梳理8个常见的可访问性设计的设计原则和技巧。

小决策的大影响

很多UX/产品设计师每天的工作，是由一系列的小决定堆叠起来的，这些小决策最终能够积累构建起一个庞大的产品。但是很多小决策带来的问题积累到一起，就能形成巨大的障碍，从而挡住一些特定的用户。

而我们要做的，就是在做特定决策时候，清楚哪里是坑，如何绕过去，换句话来说，就是做对的小决策，提升用户的可用性。

这些小问题通常会影响到每个用户，但是对于有身体、认知有障碍的用户，带来的影响会更大。

做出正确的选择

我整理了8条设计原则，它们会帮助我们在产品的可访问性上，进一步提升。用好它们，不仅能够提升可访问性，还能影响整个产品的可用性。

W3C 的网站对于Web内容的可用性设计 有更加详尽 的指南，而我所总结的 8 个原则则是一个更容易上手的起点。

接下来，我们具体来看看。

1、始终给用户提供较大的目标区域

如果给用户设置的区域或者交互元素太小，也没有提示触发的悬停效果，整体的可访问性会差很多。

在大屏幕上使用光标交互，通常需要精确的操作，如果目标区域较小，也没有悬停触发一类的交互来协助，那么对于有行动障碍的用户而言，会非常的麻烦，甚至是巨大的挑战。

通过提供更大的目标交互区域，可以更少依赖惊喜的操作来定位，可以更方便地同页面元素交互。

每个人面对光标和交互目标的时候，或多或少都会高估或者低估自己交互操作的效率，只是绝大多数健全的用户会在过程中快速地通过微调和校正，来尽可能快地达到交互目标，而这种问题在行为障碍和认知障碍的用户这边，会被放大。通过扩大交互元素和目标，以及悬停的效果，我们可以让用户尽快抵达目标元素，减少不确定性。这些改变可以让每个人都更快，更自信，更准确。

2、使用高对比度的色彩

根据 W3C 的规定，高于 4.5 : 1 的色彩对比度，能够带来更清晰的轮廓，更加便于用户分辨不同的元素和控件的边界。确保色彩对比度正确的工具有很多，比如 WebAIM 这款色彩对比检测工具 。

视力较差、色盲、对比度敏感度较低的用户在阅读和查看低色彩对比度内容的时候，会明显感觉到更多的困难。提高对比度对于降低视觉疲劳有直接的效果。

3、不要只依靠色彩来表达含义

同样的，只使用色彩来传递诸如「禁止」或者「完成」这样的含义，在很多情况下会显得不够清晰，甚至对于特定用户是直接无法识别的。

我们不能假设每个人都有足够强烈清晰的色彩感知能力，你的用户可能会是色弱，可能是色盲，可能是弱视，甚至可能完全失明，他们甚至有可能正在使用屏幕阅读器来阅读 UI 界面，这个时候，色彩是完全失效的。通过更加清晰的文本和符号，来协助色彩完成信息的传达，甚至当你去掉色彩的时候，UI 界面中的内容和文本同样能够发挥作用，这个才是最重要的。

色彩是需要解释的，颜色本身的含义是后天被赋予的，部分是被约定俗成的，但是并不是每个人都有足够清晰的认知，在不同的文化和场景当中，甚至可能代表截然相反的含义。

所以，需要给色彩增加补充说明，让UI的信息传达更加清晰直观。

4、为链接和按钮添加指引性更强的文本标签

按钮和链接上对应的文本不应该是简单的是否、确定、取消，在很多语境之下，这些词汇有多种理解方式，可能会带来误解。最理想的情况，是以更加明确的指向性，来帮助用户了解按钮实际的功能和指向性。

这样可以解决一部分基本认知的问题。但是更重要的地方的地方在于，有明确指向性和描述性的文本，能够让使用屏幕阅读器的视力障碍用户不需要去猜测了。在链接处使用「单击此处」，或者在按钮上使用「完成」这样的非描述性文本，对于这类用户而言，需要通过猜测才能明白它们的实际含义，太麻烦了。所以，修改链接文本和按钮标签最核心的意义就在这里。

除此之外，按钮和链接文本还要控制好色彩对比度，这样确保用户在快速扫读的时候，能够立刻马上注意到它们。所以，提升可访问性的核心，就在于修改成描述性的文本，并且优化它的色彩对比度。

5、使用有意义的标题和结构

对于用户而言，长篇大论的文本的阅读性是有门槛的，而结构化的文本在这方面就强了很多。

即使文本不多，分段清晰，带有明确主题总结的小标题总能让用户能够立刻抓住段落的核心信息，不至于在阅读走神的时候，找不到内容。使用成体系的小标题系统对于使用屏幕阅读器的视力障碍用户而言，也更加明确，让他们能够更加快速地定位到不同的内容。同时，值得一提的是，想要更好契合屏幕阅读器的使用，标题和正文之间一定要通过不同的标签区分开，这样才会发挥作用。

同样的，标题除了具有总结性之外，最好也使用表述性的语句，方便用户理解内容的功能，保证标题和内容的相关度足够高。

6、用占位符演示表单内容

表单也是最为重要的界面组件之一。为了保持界面干净整洁，使用占位符来描述表单内容是一种常见的手段，目前，目前在很多设计当中，都会使用简介的文本来标识出来需要填写的内容是什么，比如「电子邮件」，或者「电话号码」，但是实际上，这些表单字段的填写方式是有详细格式要求的。

当用户开始输入的时候，占位符消失，用户可能会忘记应该输入什么内容或者采用什么样的样式。而用户在开始输入之前，可能仅仅使用了零点几秒快速扫视了一下，压根没记下要填写的内容。对于有阅读障碍的用户，可能一时半会都无法领会文本对应的格式。

为了降低认知负荷，最好是直接使用对应的字段格式的占位符来直接展示给用户，通过字段输入框之外的确定的文本告知用户具体输入的字段是什么，这样不管是在输入之前，过程中，还是之后，都不会存在不清楚填写什么的问题。

7、用清晰的报错指引来帮助用户

在填写表单字段的时候，即使有引导和指示，用户依然有相当大的概率，会填写错误，这个时候，报错的提示就显得非常重要了。

不过在撰写用户的报错提示的时候，依然有很多注意事项。用户在填写表单的过程当中，肯定还是会出错的，这个时候，首先，确保错误提示的色彩对比度要足够强，方便用户能够定位到。与此同时，还需要兼顾到有认知障碍的用户，用尽可能简单的用词，来告诉用户如何解决这些错误，不用用户去猜。

8、使用高对比度的焦点指示器

虽然绝大多数的用户都会使用鼠标和触控板来进行操控，但是依然会有一部分用户习惯使用键盘来进行操作。有的人是为了追求更快的操作，有的则是出于习惯。在进行多字段的表单输入的时候，使用键盘 Tab 按键快速切换也确实比使用鼠标交互来得更快。

而当用户使用键盘进行快速切换的是，选中按键和输入框的焦点指示器，需要使用尽可能清晰的色彩，只有这样才能让用户清楚的知道到底选中了哪个控件，而不会感到疑惑或者觉得模糊不清。

结语

控制界面的可访问性能够兼顾到更大范围的用户，对于产品本身有着更持久的价值。