发布时间：2019-11-10 分类： 行业资讯
当我整理出“颜色对比”相关内容时，我学会了“可访问设计”的知识，并且这次共享了它。共有四个方面的视觉，听觉，行动和认知。
1.什么是“无障碍设计”，为什么它如此重要？
在这个多元化的世界中，并非每个人都可以毫无障碍地顺利使用各种产品。
卓越的无障碍设计不仅允许残疾用户正常地与产品交互;它还为普通人提供了更好的体验。
例如，住宅楼入口处的坡道适用于对轮椅友好的用户。然而，在实际使用中，大多数老年人，骑自行车的人，甚至普通人更愿意乘坐坡道而不是楼梯，因为走坡道更省力。
因此，坡道的设计不仅解决了残疾人的问题，而且为普通人提供了更好的体验。
△住宅楼入口坡道
可访问性设计不是创新的障碍
无障碍设计不会迫使设计师将设计变得丑陋，乏味和凌乱。相反，如果您考虑各种设计约束并考虑“可访问性设计规范”，您将通过一些限制激发新想法，并鼓励设计师为每个人制作更好的产品。
我们必须努力为每个人设计——包括失明，色盲，低视力患者;听力聋或听力受损的人;患有认知障碍的患者;专为年龄较大的年轻人设计;这个人的目的，只是徘徊的人，只为那些享受良好用户体验的人设计。
△为每个人设计。
在进行无障碍设计时，需要考虑以下四个主要方面：
视觉可访问的设计（视觉）
听力辅助设计（听证会）
无移动设计（移动性）
认知可及性设计
视觉可访问的设计
“视觉障碍”包括：从难以区分的颜色到完全失明。
设计要点：
确保文本，交互式控件和对比度阈值符合最低标准。
不要只使用颜色来传达文本大小以使其可调整大小。
确保界面上的所有控件都可以与辅助技术一起使用，例如屏幕阅读器，放大镜和盲文显示器。这意味着可访问性API必须能够通过程序确定每个控件的角色，状态，值和标题。
详细解释关键点：
1.确保文本和背景颜色具有足够高的对比度
根据WCAG标准，文本和背景颜色之间的对比度至少为4.5: 1;如果它大于或等于24 px/19 px粗体，则对比度至少为3: 1。该规范可以帮助视障用户更好地使用互联网产品。
△Web应用程序的推荐对比度。
这是满足对比度标准的一个很好的例子：
△在Salesforce1中传递颜色。
输入是一个经常被忽视的方面。在下面七个输入的示例中，只有“搜索推特”的对比度足以满足“可访问性设计标准”。
△只有“搜索Twitter”。占位符具有最低要求的对比度。
我在另一篇文章《色彩无障碍设计(Color Accessibility)之「对比度」的探索》中有关于对比的详细知识，包括概念介绍，实现方法和推荐工具。
2.不要仅仅依靠颜色来传达信息
您不能仅仅依靠颜色来传达诸如“状态指示，区分视觉控制，实时响应”之类的信息。如果只使用颜色来区分，可能会使一些用户不方便甚至无法区分两种颜色之间的差异。这些用户包括色盲患者（1/12男性，1/200女性），低视力患者（1/30人），甚至盲人（1/188人）。
△不同视力障碍患者的图片
建议的方法是使用各种视觉线索来传达重要信息;仅使用颜色来强调或补充已经可见的信息。
例如，在下面的输入中，普通视觉用户可以轻松区分电子邮件处于错误状态，但色盲用户根本看不到它。
△左：普通用户看到的内容;右：色盲用户看到的内容
有许多解决方案，例如使用“颜色区分+标签+描述”来指示哪个是错误的状态。
△使用颜色，标签和辅助指令同时区分
方法是无止境的，原则是独特的：不要仅仅通过颜色来区分。
Facebook的输入就是一个很好的例子：
△facebook表格界面
同时，使用三个视觉提示来区分错误状态：
红色边框。
感叹号图标。
工具提示会提示解释错误发生的原因。
3.注意表格的设计
近年来，表单输入框的形式发生了很大变化。现代风格形式倾向于向极简主义发展，放弃传统形式的一些基本属性，例如清晰的边界，明显的标签——这大大减少了经验。
下图显示了传统的输入框样式，边框清晰，标签清晰。中间可以填充或不填充颜色。
△合理的输入框
清晰的边框对于有认知障碍和视力低下的用户非常重要。清晰的视觉提示可以让他们轻松找出输入框的位置和大小。
下图是一个非常受欢迎的笔记应用程序的输入框。
△如果我想搜索，我该怎么办？用于强调位置的光标被删除。
在上面的界面中，单击“搜索笔记本”的任何部分即可开始搜索。
在以下界面中，有2个输入字段。如果我想“讲述你的故事”，我该怎么办？
△点击哪里讲述他们的故事？
答案是您只能通过单击蓝色框来输入文本。点击蓝框外面的区域，没有任何反应。
△如果你点击蓝框外面，什么都不会发生。
以下示例输入界面没有传统的输入框。但是，标题限制为2条水平线，用户可以点击下面的任意位置开始输入注释。
△非标准，但仍为残障用户提供足够的线索
4.未标记的输入框
Text标签告诉用户输入框的用途，占位符不会那么多。
不建议使用占位符代替文本标签的输入框。输入内容时占位符消失，这将导致用户忘记输入目的。
△不推荐表格
建议将标签带到输入框的外部，并提醒用户输入的内容。
△改进方法：具有可见标记的复合区域
5.我可以使用屏幕阅读器顺利使用UI控件吗？
这主要适用于使用Dragon NaturallySpeaking等语音识别工具的视障用户。 （有数据显示约1– 2％的用户将使用屏幕阅读器
例如，如果您的“菜单”仅呈现图像图标，如下所示：
△菜单
为了说明这是一个“菜单按钮”，它需要一个“文本替代”，例如“菜单”来传达与图像相同的信息。您可以使用aria-label属性，aria-labelledby属性或直接编写“menu”。 WebAIM快速参考中提供了一些常规技术提示。
（aria-label是一个HTML属性，它告诉屏幕阅读器元素是什么，并改进Web可访问性。
任何图像形式的UI控件都需要为图像提供“文本替代”。
6.不要让用户在任何地方徘徊寻找答案
这主要是为了：
视觉障碍用户使用Dragon NaturallySpeaking等语音识别工具。
行动不便的用户，包括视力正常的仅限键盘的用户。
键盘用户和Dragon等辅助技术依赖于屏幕上可见的交互式组件。如果屏幕上看不到链接或按钮，则无法口头说出“clidked”。如果只有键盘的用户无法在页面上看到按钮，我如何在空白区域中导航才能到达我想去的地方？
下图是使用Dragon Naturally Speaking的Gmail的屏幕截图，其中包含一层超链接数字。用户可以说出数字并与相应的链接进行交互。如果默认情况下未显示链接且仅在显示悬停时显示，则可能仅在空格中显示数字。
△Dragon自然地说Gmail
这种“悬停后显示”的做法非常受欢迎。它可以用作计算机科学家Alan Kay提出的完善的可用性启发式的解决方案。
简单的事情应该是简单的，复杂的事情应该是可能的。 —— Alan Kay
这种启发式方法是正确的，但所有用户都应该可以实现所谓的复杂性，包括残障人士。
不幸的是，对于无障碍设计，许多人认为它应该符合以下声明（这不是Alan Kay所说的）：
主要事物应该是可见的，应该在悬停时显示次要事物。
尝试对您的设计采用更具包容性的方法，例如：
将辅助操作放在菜单中，或放在非模态对话框中，而不是仅悬停。
在悬停时适当降低辅助图标的对比度并增强对比度。
在悬停中，它以更明显的形状显示或大于正常大小。
定义明确的图标（信息图标）是触发“填充内容”而不是空格的更好的悬停方式。
案例1：Linkedin“我的”个人主页
以下是Linkedin的一个例子。以下是作者个人资料页面的屏幕截图。
△Jesse的LinkedIn个人资料横幅
以下是鼠标悬停时发生的情况：
△他的LinkedIn个人资料横幅显示悬停状态
立即有一些视觉提示告诉我编辑这张卡上的大量信息，包括姓名，职位，以前的工作，教育经历和个人头像照片。
当我将鼠标悬停在某个项目上时，该项目会变为蓝色并告诉我已准备好单击该项目。
△标题在悬停时变为蓝色。
这种方法不符合“可访问设计”原则。
以下是满足“无障碍设计”的改进。我在每个项目后面放了一个小铅笔图标，他们总是显示它。
△一个解决方案。显示较小的灰色铅笔始终用于在线可编辑字段。
当我将鼠标悬停在某个项目上时，整个项目变为蓝色。
△在悬停和键盘焦点上显示相同的蓝色行。
也许，当大多数设计师看到我的修改计划时，他们会问：这太重了吗？ （那是一种沉重的，不是吗？”）
也许。但这只是解决这个问题的方法之一。
此外，这仅存在于我自己的porfile页面上。花多少时间查看他们的LinkedIn个人资料？这种所谓的“感觉沉重”和全球无障碍设计一样重要吗？如果我们不喜欢添加铅笔图标的解决方案，我们仍然可以考虑它。还有什么其他解决方案？
案例2：Evernote笔记列表
这是另一个例子，Evernote。这是一个笔记列表。悬停可用时仅显示4个操作图标。
△记事列表
在这种情况下，我希望每张便条卡上都有4个图标。也许图标可以是绿色，悬停时颜色会反转。
△Evernote中使用的悬停的一种解决方案
该解决方案仍可评估为“太重”！
但请记住，我们不只是为设计师设计，我们正在为不同需求，不同条件和不同计算机使用的各种用户进行设计。
7.移动的闪烁内容是否可以停止？
应暂停，停止或隐藏在界面上移动，滚动和闪烁超过5秒的内容。
通常，对于闪烁内容，每秒闪烁次数不应超过3次。
8.盲人用户如何使用仅限聊天的机器人（Chatbot）
本文探讨了这个问题：我们需要谈谈Chatbots上的辅助功能，作者：Caio Calado（2017.6.30）作者是UX& Chatbot设计师。
文章首先提出问题：盲人如何使用聊天机器人？他或她如何互动？
然后我亲自测试了谷歌的聊天机器人的Allo，Slack，Facebook，VoiceOver等iOS上的产品，效果并不理想。
进一步提议：
如果我们想让全球数十亿人使用聊天机器人，我们需要让每个人都可以访问它们。
作为一名用户体验设计师，我需要进行设计，以便解决人们的需求和痛苦，不仅仅是为了用户’目标
如今，特别是对于像Facebook，谷歌，Twitter等公司来说，世界各地的公司都越来越关注无障碍设计。 Caio Calado认为，这将在不久的将来得到改善，他说：
我不知道怎么做，但如果有的话，他会说不出口。我也来这里帮忙。
4.听取无障碍设计
“听力障碍”包括：来自界面的听不见/听不见的声音。
设计要点：
使文本内容易于理解，并根据需要使用“文本替代”。
当没有声音（没有声音）时，确保接口上的所有空间仍然有效。
V.无动作设计
“移动障碍”包括：您无法操作鼠标，键盘或触摸屏。
设计要点：
确保所有界面控件都是交互式的（只能通过键盘功能访问）或仅使用鼠标;
确保使用辅助技术正确标记接口控件;这些用户可能会使用语音控制软件和物理开关控件等技术，这些技术通常与屏幕阅读器（屏幕阅读器）一起使用。）与其他辅助技术相同的API。
1.使用键盘控制
提供“获取焦点”显示状态一些用户在使用网络产品时不方便使用鼠标。如果网络产品只能通过键盘操作，它将带来更好的体验。
设计师可以设计一个“聚焦”状态指示器，与代购源码网站的风格相匹配，同时提供清晰的视觉线索，而不仅仅是使用浏览器的默认样式。
焦点突出显示应仅用于页面中的交互元素，例如输入框，按钮等。
△Chrome和Firefox的默认视觉焦点状态
问题是许多代购源码网站没有自己的“获得焦点”状态的视觉风格，这对于使用键盘作为主要浏览方法的用户来说是一种糟糕的体验。主要是因为效果太难看，不符合“无障碍设计规范”。
△虽然丑陋，但这并不是“造成的”。通过可访问性。
以下示例适用于BBC。使用“蓝色条”指示哪个选项卡是当前“获取焦点”状态。
△BBC的“聚焦”状态
这是Twitter的一个示例，它使用3种方式的组合来显示“获取焦点”状态：
默认的蓝色框。
图标从灰色变为绿色。
提示。
提供足够的视觉指示。
△推特的“聚焦”状态
2.弹出窗口
使用弹出窗口时，请注意焦点元素位于弹出窗口内，而不是弹出窗口后面。
左边的错误方法：用户无法与弹出窗口进行交互;
正确的方法是右侧：焦点落在2个按钮上，用户可以选择相应的操作，或关闭弹出窗口。
3.将状态聚焦在悬停
如果元素需要悬停以显示更多操作，则当键盘控件焦点落在该元素上时，将显示由悬停触发的更多操作。 （您可以将它与之前的文章结合起来“1.6不要让用户在任何地方悬停以找到答案”）
好的例子：facebook。
△Facebook的“聚焦”状态
仅键盘用户当焦点位于“喜欢”时，显示悬停时会显示更多表达式。
反例：产品搜寻。当焦点落在“共享”“保存”控件上时，不再显示由悬停触发的操作。
△Product Hunt的“Get Focus”状态，不再显示动作
以下是两种方法的比较：
向左的错误方式：焦点状态完全忽略悬停操作并直接跳转到下一个焦点元素。
在右侧更正：焦点状态允许用户与悬停触发的操作进行交互。
另一个很好的例子是Gmail：
△Gmail的“获取焦点”状态，显示更多操作
当每个条目都处于“焦点状态”时：
有特定的，明显的状态区别（左边的蓝色条）。
悬停时的更多操作会自动显示在“焦点状态”中。
只有可操作的控件具有“焦点状态”。
4.快速直接的内容操作
对于仅使用键盘的用户，每次让他们依次选择每个控件来访问内容时，使用它们是非常痛苦的。
例如，这个博客平台：
△中早期主页
一个好的做法是在一开始就提供一个快捷方式，让焦点直接跳转到内容。
例如，AirBnB：
△Airbnb Home
左：获得焦点前的正常状态。
右：激活“获取焦点”以在一开始就提供选项，直接跳转到内容，而无需依次浏览每个选项卡菜单。
5.重新聚焦场景（重新聚焦）
从界面中删除控件时，焦点应显示在“围绕并与删除相关”控件上。
不好的是删除元素并让焦点从当前元素中消失并返回到页面顶部。在这种情况下，用户必须经历将焦点从顶部移动到当前位置的过程。
在左侧，错误的方式：删除“1”后，焦点消失。
在右侧更正：删除“1”后，焦点显示在“2”上。
6.保持使用的一致性
这是“无障碍设计”中非常重要的问题。
有关详细信息，请参阅W3C的设计模式创作实践，以获取详细说明。这是一个关于如何创建许多常见设计组件的“可访问设计”指南，包括菜单，对话框，自动完成内容，树结构等。每个组件模式都有一组相应的HTML语言，键盘操作和ARIA属性。 ARIA属性说明用户如何使用键盘与屏幕上的组件进行交互。
自动完成输入模式（自动完成）：用户在输入框中输入一些内容，并在下面自动显示已过滤的相关结果列表。用户可以使用向上和向下箭头或鼠标来定位或选择列表中的项目。
让我们看一下“自动完成输入”的例子：
△简单的自动完成预先输入
以下是添加了图标的自动完成输入显示列表：
△图标用于强调差异
这是一个令人困惑的自动完成模式案例：用户不仅可以从筛选列表中选择一个项目，还可以通过单击“铅笔”或“垃圾桶”图标来编辑或删除每个列表项。添加这两个按钮会使“自动完成”输入模式混乱。
△具有隐藏功能集的自动完成功能，无法通过标准技术与辅助技术进行通信。
问题主要是由于自动完成输入模式的键盘使用行为的中断。 “选择”+“操作”的双重操作容易引起混淆，并且不便于键盘控制。
类似的规则也适用于菜单。
在以下两个示例中，右侧是实际菜单，左侧实际上是非模态对话框。 （根据W3C’ WAI）
菜单是一个小部件，为用户提供选择列表。如果我们为每一行添加多个操作（如左边的例子），则它不再是菜单。这也将改变键盘的操作行为，从简单使用箭头键到需要使用tab键;它还会改变键盘获得焦点的方式，例如设置下拉菜单时，获得焦点的键盘显示位置不同。
如果您能够理解两者之间的差异，以及对用户体验的影响，非模态对话框也可以满足“可访问性设计”标准。了解小的设计更改，如何更改用户交互模式，将帮助您为产品选择正确的交互模式。
认知可及性设计
“认知障碍”意味着用户可能需要辅助技术来帮助他们阅读文本，因此必须存在文本替代方案。
设计要点：
避免重复或闪烁显示，因为这可能会给认知障碍的用户带来不便。
给用户足够的时间重复。
七。 “辅助功能设计”自检清单
您的UI组件是否可访问？
视觉：界面上的控件和文本的对比度是否符合WCAG最低标准？删除颜色后可以正常使用界面吗？确保无法识别颜色的用户可以使用您的UI组件。名为SEE的Chrome扩展程序可以模拟色盲用户看到的界面，Daltonize扩展程序具有类似的功能。
视觉：界面组件可以在“高对比度模式”下工作吗？当前的操作系统支持高对比度模式。 “高对比度”是一种模拟测试的Chrome扩展程序。
Visual：我可以使用屏幕阅读器的所有UI控件吗？所有可见文本信息都有替代文字吗？您是否在ARIA中添加了语义信息？ （语义信息）
听证会：您的用户界面组件可以无声地工作吗？关闭扬声器以进行全面的工程使用测试。
动作：是否只能通过键盘操作所有UI控件？你能避免用户进入焦点陷阱吗？你能恰当回应键盘动作吗？
最后
网络的主要作用是更好地实现人与人之间的沟通与合作。 “辅助设计”在其中发挥着重要作用。
也许你认为你必须在设计中考虑这些规则并限制你的创造力。
但是，如果这些规范将您的创造力限制在极限，那么您可能会设计既美观又满足更广泛受众需求的设计。如果重点是正确的，您会发现面对任何挑战，您可以找到一系列解决方案，以满足主管，营销团队，Dribbble粉丝和其他用户（包括残障人士）的需求。
“努力工作，以便我们的用户不必“，”是Gov.UK平台的原始设计原则之一。
“英雄看到同样的事情”也是这句话：
努力使服务对每个人都有效，这将使您的服务更好地适合每个人。 —— Tom Loosemore，合作社数字服务集团总监
也许您没有足够的时间和预算去做“无障碍设计”，但只要您将“辅助功能设计”视为您日常工作中需要考虑的标准的一部分，您会惊喜地发现您实际上可以满足许多障碍设计标准。
将问题分解为可以实施的小任务可以逐步接近最终目标。例如，使用对比度测试工具测试您的样本并使用更科学的颜色;写易于理解的文字;使用易于阅读的字体;在不同模块中清晰一致地规划内容最大限度地减少设计中混乱的干扰;写下有用的解释性副本……
改善您可以改进的所有影响团队其他成员的事情，很快您就会感觉到您的产品变得越来越好。不要低估你可以做出的改变。
做事总是比什么都不做要好，每一个小小的改变都只是意味着你的产品得到了更好的优化，更多人能够获得良好的体验。 —— Ian Hamilton，辅助专家
