无障碍设计(二)-视觉无障碍设计

发表于: UI设计者 – 一个免费自学UI设计APP · 2018-1-30  · UI设计师投稿  ·  694 views  · 

「视觉障碍」包括:从难以区分颜色到完全失明。

设计要点:

确保文字、可交互控件和背景的对比度(contrast ratio threshold),满足最低标准。
别只用颜色传达信息(using solely color) ,让文字字号可调( resizable)。
确保界面上所有的控件都可借助辅助技术(assistive technologies)使用,如屏幕阅读器,放大镜和盲文显示器(screen readers, magnifiers and braille displays)。 这就意味着必须让 accessibility APIs 可以通过程序确定每个控件的角色、状态、价值、标题。
详细阐述关键点:

1. 确保文字和背景的颜色有足够高的对比度

根据According to the WCAG 标准,

文字和背景色的对比度至少是4.5:1;如果是大于等于24 px/ 19 px bold 的文字,对比度至少是3:1 。这项规范可以帮助视力障碍用户更好地使用互联网产品。

 

images这是一个满足对比度标准的好案例:

imagesInput 是常被人忽略的一个方面。下图7个 input 的例子,只有「Search Twitter」的对比度足够高,满足「无障碍设计标准」让人看得清。

images

2. 别只依靠颜色传达信息

不能单单只依靠颜色传达诸如「 状态指示、区分视觉控件、实时响应」等信息。如果只用颜色区分,可能会让一些用户不方便、甚至不能分辨2中颜色的区别。这些用户包括色盲患者(1/12 的男性,1/200 的女性)、视力低下患者(1/30 的人)、甚至盲人(1/188 的人)。

 

images

推荐的做法是:同时使用多种视觉线索传达重要信息;只使用颜色强调或补充已经能看明白的信息。

举个例子,下面的 input 中,视力正常用户能轻易分清 Email 是错误状态,但色盲用户就完全看不出。

images

左:正常用户所见;右:色盲用户所见

解决办法有很多种,比如:同时使用「颜色区分+标签+说明」,来表明哪个是错误状态。

images

办法是无尽的,原则是唯一的:别只用颜色区分。

Facebook 的 input 是个很好的例子:

同时使用了 3 种视觉线索区分错误状态:

  • 红色边框。
  • 叹号 icon。
  • tooltip 提示,解释为什么出现错误。

3. 注意表单的设计

近几年,表单输入框的形式有了不小转变。现代风格的表单设计倾向于往极简主义发展,抛弃了传统表单的一些基本属性,比如清晰的边框,明显的标签——这大大降低了使用体验。

下图是传统输入框样式,界限明晰,标签清楚。中间可填充颜色也可不填充。

清晰的表单边框对于有认知障碍、视力低下的用户非常重要。清晰的视觉线索,会让他们很容易弄清楚输入框在哪,面积有多大。

下图是一个很流行的笔记app的输入框。

△ 如果我想搜索,我该点哪?用于强调位置的光标都被移除了。

上面这个界面中,点击「searching your notebooks」的任意一处,都可以开始搜索。

下面这个界面中,有 2 个 input field, 如果我想 「 tell your story」,我该点哪?

答案是只有点击蓝框框里,才能输入文字。点击蓝框以外的区域,没任何反应。

下图这个笔记输入界面的例子,也没有传统的输入框。但标题是限定在2条水平线内的,并且用户可以点击下面的任意处开始输入笔记内容。

4. 没标签的输入框

Text label 能告诉用户输入框的目的,placeholder 没这么大作用。

不推荐 placeholder 代替 text label 的输入框,输入内容时placeholder消失,会让用户忘记输入目的。

推荐把 lable 拿到输入框外侧,时刻提醒用户自己输入的是什么。

5. 可以用屏幕阅读器顺利使用你的 UI 控件吗?

这这主要针对:使用 Dragon NaturallySpeaking 等语音识别工具的视觉障碍用户。(有数据显示大概 1–2% 的用户会使用 屏幕阅读器(screen reader)

举个例子,如果你的「menu」只呈现一个图像icon,像这样:

为了说明这是一个「菜单按钮」,它需要一个「文字替代方案」,比如「menu」来传达和图像相同的信息。可以使用 aria-label attribute, aria-labelledby attribute,或者直接写上「菜单」。 WebAIM Quick Reference 里提供了一些 general technical tips。

(aria-label 是一個 HTML attribute,用來告訴讀屏軟件某個元素是什麼,提升 Web Accessibility)

任何图像形式的 UI 控件,都需要为图像提供一个「文字替代方案」。

6. 别让用户到处 hover 才能找到答案

这主要针对:

  • 使用 Dragon NaturallySpeaking 等语音识别工具的视觉障碍用户。
  • 有行动障碍的用户,包括视力正常的 keyboard-only user。

键盘用户和诸如 Dragon 这样的辅助技术,依靠的是屏幕上可见的交互组件。如果一个链接或按钮在屏幕上不可见,则不可能口头告知「clidked」。如果一个 keyboard-only user 在一个页面上看不到按钮,怎么才能通过一个空白区域导航去想去的地方?

下图是使用 Dragon Naturally Speaking 的 Gmail 截图,叠了一层有数字编号的超链接。用户可以说出数字,并与相应的链接交互。如果一个链接默认不显示,只有 hover 时才显示,那可能就只能在空白处显示一个数字。

这种「hover 后才显示」的可操作控件的做法很受欢迎。它可以作为计算机科学家艾伦·凯(Alan Kay)所提出的成熟的可用性启发法(well-established usability heuristic)的解决方案。

这种启发法(heuristic)说得对,但所谓的复杂性应该对所有用户(包括残疾人)都是可能的。

尽量在设计中采用更有包容性的做法,比如:

  • 将辅助操作(secondary action)放置在菜单内,或非模态对话框 (non-modal dialog) 内,而不是只有 hover 才能触发。
  • 适当减轻次要图标(secondary icon)的对比度,并在 hover 时加强对比度。
  • 在 hover 时,采用更加明显的、或比 normal 尺寸更大的形状显示。
  • 一个意义明确的图标(info icon)是比一片空白( white space) 更好的触发「填写内容」的 hover 方式。

当我在某一项上 hover 时,那一项就变成蓝色,告诉我它准备好被点击了。

也许,多数设计师看到我的修改方案时,都会问:这会不会太重了啊?(“That’s kind of heavy, isn’t it?”)

也许是的。但这只是这个问题的其中一种解决办法。

更进一步说,这只存在于我自己的 porfile page。一个人会花多少时间看自己的 LinkedIn profile?这种所谓的「感觉重」,和是全局的无障碍设计是同等重要的吗?如果我们不喜欢加铅笔图标这种解决办法,我们还可以想出其他什么解决方案呢?

案例2:Evernote 笔记列表

下面是另一个例子,Evernote。这是笔记列表。只有 hover 时,才会显示 4 个操作图标。

△ Evernote list

在这个案例中,我希望 4 个图标常驻显示在每条笔记 card 上。也许图标可以是绿色,hover 时反色。

△ One solution to the hovers used in Evernote

这个解决方案也许还是会被评价「太重了」!

但请记住,我们并不只为设计师而设计,我们是为各种各样的、有着不同需求、不同条件、不同电脑使用方式的用户而做设计的。

7. 移动、闪烁的内容是否是可停止的?

界面上一直移动、滚动、闪烁超过5秒的内容,都应该可以被暂停、停止,或隐藏。

一般的,对于闪烁内容,每秒闪烁次数不宜超过3次。

8. 盲人用户如何使用只能聊天的机器人(Chatbot)

尤其像 Facebook 、 Google 、Twitter 等这样的用户遍布全球的公司,越来越关注无障碍设计,Caio Calado相信这一切在不久的将来终将会被改善,

 

Angelaaa 产品设计 | 公号「漫声细语」UI设计者APP整理

本文链接: http://www.shui-mai.com/wuzhangaishejier-shijuewuzhangaisheji/