无障碍交互可能需要了解的3件小事

       无障碍设计能够赋予残障人士感知,理解,并与网络世界发生碰撞的能力。我们可以构思一下这样的世界,开发人员和设计人员知道无障碍的知识,并理解且贯彻到设计的思考过程中,或许只有设计本身才会让残障人士遇到麻烦。

作者:杰西·豪斯勒(Jesse Hausler)

原文:https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b

引用:Web内容可访问性指南2.0中508节

翻译:LOEME.COM

1.可用性不是创新的障碍

可用性不会迫使你制作出丑陋,无聊或者混乱的产品。在设计的思考过程中,可将它引入作为约束。这些设计的约束可以提供新的思路,以探索出为用户带来更好的产品。

当你阅读这些准则时,请记住我们不是为了同行做设计。是为了将要与你的产品发生互动的人而设计。这可能包括盲人,色盲,视力低下的人,听力障碍的人,行动不便的人或认知障碍的人。为年轻人,老年人,超级用户,休闲用户以及仅享受优质体验的人们而设计。

就像对待任何设计准则一样,都应遵循这些可用性准则。它们是我们挑战创造出色产品中的一部分。

 

2.不要将颜色作为传达信息的唯一视觉手段。

有色盲的人(每12名男性中有1名,每200名女性中有1名),视力低下(30人中有1名)或有盲人(188人中有1名)。

在以灰度显示的此示例中,你说多少个字段处于错误状态?

你说多少个字段处于错误状态?

大部分以灰阶看待此问题的人都说答案是一个,即“人为验证”字段。那是因为里面带有感叹号的三角形表示有些不对劲。

现在,屏幕。多少个字段处于错误状态?

你说多少个字段处于错误状态?

有了颜色,答案就变成了“全部四个”。

可以使用文本来指示和解释给定字段错误的原因。可以使用工具提示,粗边框,粗体文本,下划线,斜体等。选择是无限的,但唯一的规则是不能仅使用颜色。

那么你将如何设计此注册表单,以使颜色不是显示有错误的字段的唯一视觉手段?

3.确保文本与其背景之间有足够的对比。

为应用界面选择的颜色会影响用户阅读和理解的难易程度。足够的色彩对比度可让文字和图片更易于阅读和理解。

除了对有不同程度视觉障碍的用户有益之外,足够的色彩对比度还可以帮助所有用户在极端光照条件(例如阳光直射或低亮度显示屏)下查看设备上的界面。

文本与文本背景之间的对比度应至少为4.5:1。如果您的字体至少为24 px或19 px粗体,则最小值应降至3:1。

该指南可帮助弱视,色盲或视力恶化的用户查看和阅读屏幕上的文本。

这意味着当文本为24像素,粗体为19像素或更大时,您可以在白色背景上使用的最浅的灰色是#959595。

 

在白色背景上的文字#959595
在白色背景上的文本#767676。

有一些很棒的工具可以帮助您找到适合您的设计的调色板,包括Color Safe。还有WebAIM的颜色对比度检查器,它可以让您测试已经选择的颜色。

当前处于禁用状态的徽标或元素不受此标准约束。这包括不活动的按钮或菜单项。占位符或文字鬼表单字段不从这个标准免除。