- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
对于可访问性设计师必知的 7件事 (上)
可访问性( Accessibility )是用户体验设计中的重要一环,好的可访问性设计可以让各种用
户更容易浏览和使用(电脑、手机、网页、 UI等等),使得有障碍的用户更便捷地感知、
理解、互动。理想状态下,设计师和开发者能充分设计,让产品的可访问性达到完美的境界
,但是实际状况下,即使添加了如此多的可访问性设计,残疾人和行动障碍者依然用不好
手机、电脑等产品,甚至有些 设计“ ”还会人为制造障碍。
今天,我们来探讨一下可访问性设计的一些基本原则吧。当我们在探讨可访问性设计之前,请确保
你的产品至少是已经 被设计好了的“ ”,也就是说它至少得符合《 Web 协会可访问性指南设计规范 2.0
》和 《inSection 508 》的基本要求,经过充分的开发和测试。
OK ,我们开始进入主题了 ~
1 、可访问性设计并非创新的障碍
要让产品可访问性更好,并不是让你做一个丑陋、沉闷而杂乱无章的产品。当你在设计的时候,现
有的可访问性设计规范或者 推荐规范“ ”的引入,确实会提 供一定的约束,但是它们本身并不只是一
种限制,它还是你设计和探索的新方向,毕竟,你设计的最终目标是为用户提供更好的产品 —— 好
用好看。
当我们在阅读这些设计规范的时候,请务必记住,这些产品并不只是为我们的同行或者设计同好来
设计的,它所涵盖的用户各不相同。
作为设计师的你,你可以为你的同行和同好设计出极具共鸣的产品,但是从更广泛意义上来说,他
们在你产品用户的总量中,占据的比例并不高吧?
为那些真正同你的产品进行互动的各色用户来设计吧。为每一个人设计。你的用户可能是盲人,可
能是色盲,视力不佳者,可能是听力障碍者,可能是有行动 障碍的老人,可能是有认知障碍的用户
。你的用户可能很年轻,也可能很老,他们可能是普通用户,也可能是重度依赖者,也可能是对
于用户体验有极高要求的挑剔用户。
拥抱可访问性设计准则吧,如果你想创造一个令人惊艳的产品,那么这是你的必经之路。
2 、不要让色彩成为你唯一的视觉传达手段
视觉障碍者所存在的问题各不相同,色盲(男性 1/12 ,女性 1/200 )、近视( 1/30 )以及失
明( 1/188 )的用户都会成为你的可访问性设计所照顾的对象。
借助色彩来呈现高亮和互补是显而易见的设计方法。
那么你看看下面灰阶的界面中,有几项填错了?很多人都会人为只有验证码填错了,因为只有验证
码的字段有个小三角形,者表明它是有问题的。接下来整屏的灰色也没法让你判断出其他的问题。
但是当你看到彩色的界面的时候就知道,实际状况并不是这样。设计师使用红色来标识错误的字段
,四个字段其实都是错的,对于色盲的用户,这样设计的可访问性简直是灾难性的。实际上,你可
以使用粗边框、粗体文字提醒、下划线、斜体来呈现错误状态,而不止是色彩。
3 、确保文字和背景有充分的对比
根据 WCAG 的规定,文本和所处的背景的对比度至少为 4.5:1 。这套规范主要是要确保弱视者、色盲
看清楚屏幕上显示的文字内容。这也就意味着,如果你的文字大小为 24px ,19px 粗体的时候,文字
的灰度最少也得是 # 959595.
# 959595 字体在白色背景上的效果。
对于最小的字体,能用的灰色最低也得到 # 767676 ,如果你的背景本身就是灰色的,那么文字的用
色还得更沉才行。
# 767676 字体在白色背景上的效果。
有个名为 Color Safe 的工具,能够确保你的设计用色安全。而 WebAIM ’ s Color Contrast Checker
也能帮你进行色彩对比度的检查,确保你选对了色彩。
LOGO 和被禁用的元素则不受此标准约束。这里面包括了处于禁用状态的按钮或者菜单选项。不过
占位符或者幽灵按钮的内容则依然在规定约束范畴内。
接下来的案例我们看的是著名博客平台 Medium ,例子中仅有 “M
文档评论(0)