创意与设计

ux.清单系列:可访问的设计

几个月前,我在膝盖手术后,发现自己的腿上有一个完整的支架。每天我认为理所当然的事情(比如坐在椅子上!)突然变得很有挑战性。

有一些特别紧张的时刻我记得很清楚,但我记得最清楚的时刻是人们为帮助我所做的所有小动作——从我医生办公室的接待员拿出一个小脚凳让我舒服地坐下来,还有公交车司机,他把车“无缝”地停在了高高的路边,让我可以轻松下车——这些人做出了选择,这些选择帮助了我。

作为设计师,我们有能力做出选择,让我们的数字体验更适合每个人。当我们做出无障碍设计选择时,我们的设计不仅对残疾人更有用,对所有人也更有用。


什么是可访问的设计?

新的文字-动作

无障碍设计是指为满足残疾人的需求而设计。它的设计涵盖了所有用户,包括那些有身体或认知障碍的永久性或暂时性用户。

色盲用户与失聪用户之间的互动方式有何不同?或低视力?身体残疾呢?诵读困难吗?流动障碍?失明吗?用户通过屏幕阅读器或键盘导航进行交互?

其他人的需求被排除在传统的设计过程之外?可访问的设计考虑所有这些经验,并主动提供适合每个人的设计解决方案。

通用设计和可访问设计之间有什么区别?

通用设计、包容性设计和可访问性设计通常可以互换使用;那么有什么区别呢?虽然这些术语都是为更广泛的用户增加可用性,但它们的定义有一些细微的差别:

  • 通用设计是最广泛的束。这是指以尽可能最可用的方式设计每个人。普遍设计的一个常用例子是人行道上的创建,因为它会增加每个穿过街道的人的可用性,而不仅仅是那些轮椅的人。
  • 包容性设计是非常相关的,但考虑了人类多样性的全部范围。包容性设计要求我们考虑自己的偏见,看看谁被排除在外。包容性设计的一个例子是,当要求在表单上提供性别信息时,提供通用和定制回复选项。
  • 无障碍设计专门针对那些体验残疾设计,但它经常会导致每个人的用户体验。无障碍设计符合具有永久性或临时残疾人的需求,但通常会满足具有态势限制的需求。例如,封闭的标题为听力损失的人提供了更好的体验,但他们也可以让那些悄悄地看着一张睡觉的婴儿在下一间客房里看电影。

设计可访问性和包容性

作为用户体验设计师,我们的职责是考虑不同需求的用户如何与我们的设计互动。我们可能认为我们在设计时考虑了大多数人,但我们常常忽略了四分之一的成年人患有残疾.这相当于人口的25%,而对于65岁或65岁以上的成年人来说,这一比例将达到40%左右。

作为公众对无障碍环境的意识增强重要的是,在我们设计的时候,我们要开始积极地超越自己的偏见和能力去思考。除了站在道德和伦理的错误一边,在设计中忽视易用性还会对你的品牌声誉产生负面影响,甚至导致昂贵的诉讼和法律战斗.更不用说,这会让25%的客户使用你的产品或服务变得非常困难(如果不是不可能的话)。

以下清单通过设计提示列表来帮助您开始。虽然这不是(并且不应该)替换完整的可访问性审核,但它可以用于一些快速的胜利,使您的设计有点更包容。

当我们基于易用性进行设计时,我们便能够为所有人提供更好的体验。

用户体验易用性检查表和指南

颜色

  • 文本颜色和对比度:使用对比度检查器,例如Webaim在线工具,以确保文本的颜色相对于背景色是可读的。文本越小,颜色组合通过无障碍标准所需的对比度就越高。根据我的经验,颜色对比是一个非常常见的易访问性违反者,并且是向客户介绍易访问性最佳实践的好方法。

无障碍性01颜色对比

  • 消息传递:不要仅仅依靠颜色来传达信息。考虑使用颜色、形状和文字来进一步强调你的信息。例如,在可视化地传达表单字段错误时,请尝试在错误消息中包含图标,而不仅仅是颜色。
  • 链接:链接的颜色在视觉上应该与正文不同。然而,和上面一样,不要仅仅依靠颜色来设计链接的样式。Jakob定律这也告诉我们,人们喜欢他们熟悉的设计模式。通过使用熟悉的设计模式,给链接加下划线可以提高一般的可用性,但也可以提高低视力或色盲用户的可访问性。

文本

  • 文字大小:确保你的文字足够大,让人们在不紧张或眯着眼的情况下阅读。根据Smashing Magazine,16像素(或更大)是您想要的身体副本的大小。次要或三级文本可能更小,但保持您的主要内容大而可读。
  • 可扩大的文本:让人们自己调整和增加文本大小。这也适用于重要的图标!如果你的按钮有一个“下载”图标,但这个图标并没有随着按钮标签的增大而增大,人们可能会错过重要的内容。
  • 清晰:你的页面标题应该是清晰的,描述性的,并且切中要点。此外,在你的交流中使用主动语态,直接地减轻用户的认知负担。例如,“丹尼斯写了一个博客”比“一个博客被写了”更容易被理解。
  • Scannability:尽可能使用子弹以将文本组织成更小的可消化块。通过将更长的内容部分分解为具有描述性副标题的较小段落来避免大型和压倒性的文本墙壁,以帮助提高Scannability。
  • 结构:使用HTML和标题标签(H1, H2, H3等)来建立一个对屏幕阅读器有意义的页面结构。有趣的事实:清晰的页面结构对搜索引擎来说也更有意义。所以,除了改善用户体验,稳固的结构也能对你的网站产生积极的影响搜索引擎优化技术

可访问性02标题级别

  • 对齐和长度:左对齐文本可以帮助有认知障碍的人提高可读性。避免文本居中或右对齐,特别是当文本块换行到多行时。说到换行,行长度也是需要考虑的重要因素。拜托斯研究所建议每行50-60个字符(包括空格!)太宽的行很难理解,而太短的行会导致疲劳和压力你的读者。

导航

  • 面包屑路径:面包屑可以用作重要的导航工具。添加面包屑可以提供急需的上下文,并帮助您定位用户。
  • 键盘导航:确保你的页面可以被屏幕阅读器访问,并且可以通过语音或键盘来导航。
  • 主要指标:进一步迈出一步,人们使用键盘导航依靠焦点轮廓对按钮,链接和其他元素来了解页面上的位置。您可以为您的焦点指示器添加一些样式,以与您的设计款式对齐,但从不删除这些!

可访问性03焦点指标

  • 链接描述:链接通常是导航的,因此您的链接文本应该是描述性的,并解释链接将带您的位置。例如,“阅读更多关于可访问设计”比“阅读更多”更有用。
  • 按钮标签:与文本链接类似,您的按钮标签应该通过描述按钮将触发的操作来设置适当的期望。“联系我们的团队”会让我们期待比“点击这里”更好的结果。
  • 间距:可以删除或点击的任何东西都应该有足够的空间。不要紧密地要求精确或绞合按钮。尝试在三个其他微小链接旁边的三个链接并不精确地,这是从不乐于乐趣的(对于任何人)。对于移动设备,我们尝试将44 x 44像素的最小敲击目标作为可以攻丝的任何东西的拇指规则。
  • 表格标签:为帮助减少表单上的认知负载,请确保您的表单现场标签清晰,描述性,并且始终可见。您的字段标签不应被占位符文本替换,或者在用户开始键入时消失。

可访问性04表单标题

图像和视频

  • Alt描述:始终将描述性ALT标记添加到您的图像,视频和其他媒体。请记住,不是每个人都能看到您的图像,以便尽可能详细地进行描述。除了提高可访问性外,Alt标签还具有重要意义搜索引擎优化的好处也是。
  • 交流:使用图像来支持你的文本,但不要使用图像在适当的位置文字。图像非常适合支持复杂或复杂的概念,但这些概念应始终以纯文本描述。
  • 视频记录:视频是真棒且有吸引力的媒体内容形式,但在视频中没有埋葬重要的概念。如果您使用的是视频,请确保包含无法观看的用户的字幕或视频成绩单。
  • 清晰:图标很适合浏览,但不是所有的图标都是直观的。为增加清晰度,请将图标与描述性标签配对。
  • 覆盖:与颜色可访问性类似,图像上方的文本在可读性方面也存在问题。如果你选择在图像上分层文字,可以考虑添加一个颜色覆盖层,帮助文字满足与背景的颜色对比标准。

当涉及到易访问性设计时,我们实践我们所宣扬的

在将此清单放在一起时,我们在自己的网站上进行了快速访问审核。正如您可能已经注意到的那样,我们自己的主页上有一些问题:

可访问性05 SEER问题

与任何项目一样,设计和开发更新都需要时间和资源。你需要得到领导的支持,但这并不需要感觉像一场艰苦的战斗。以下是我们计划采取的步骤,以解决我们自己的易访问性问题:

  1. 确定问题:使用上面的清单来审核你的网站并记录你已知的问题。这样做可以帮助您理解修复问题所需的工作级别。
  2. 通过同理心教育:提倡易用性,并解释为什么这对你的团队很重要!让用户与必要的涉众建立共鸣。幸运的是,同理心已经是先见的价值观
  3. 记录问题并将其视为bug:你的团队将如何解决网站上的其他漏洞?易访问性问题是可用性缺陷的核心。人们看不懂你的纽扣标签?这是一个关键的可用性问题!把它当成一件事,并按轻重缓急来处理。
  4. 为持续的优化创建一个计划:网站是具有许多活动部件的生物,并计划定期辅助性审核可以帮助您保留任何新问题的标签。更好的是,因为对您的团队增长的可访问性的认识,使用该势头从一开始就可以访问您的设计过程的一部分。

注:本博客文章中提供的信息不会,也不打算构成有关遵守ada或其他方面的法律建议,也不应据此采取行动。

寻找更多的用户体验设计技巧?查看更多来自我们的帖子UX设计清单系列

更多UX最佳实践和数字营销技巧,请订阅我们的通讯!