![3c2521fb865bcf6fddc7c412cef4bf1d.png](https://i-blog.csdnimg.cn/blog_migrate/a45a69b8609cdbc5bdccca049a8c27df.png)
每个人,在某些场景下,都可能是“残障人士”
当我们第一次在团队内部讨论无障碍设计的时候,面临的最大疑问就是控制台用户中到底有多少访问障碍人群,我们是否有必要做无障碍。可以看出,大家对无障碍的初始理解是解决残障人士的问题,让他们可以使用控制台。而实际上,无障碍设计是对所有人群的包容,惠及所有用户。我们所讨论的“残障”,狭义上可以指个人的健康状态,广义上也可以是某种情况下的行为与交互不匹配而造成障碍。虽然控制台用户绝大多数都不是残疾人,但我们 每个人,在某些场景下都可能是“残障人士”。比如说,当我们在逆光办公时;比如在一手端着水杯,只有一手进行键盘操作时等等。提升无障碍水平也是对产品易用性的提升。现实环境与网页内容组织都会在某些时刻为常规用户带来一些局限与难度。 无障碍设计可以帮助我们让各类用户都更顺畅的访问页面内容。![0a17b031ee295c1b53a7a0c0c36930cf.png](https://i-blog.csdnimg.cn/blog_migrate/8dc492ef6e81f21a640629239d01a3f5.png)
是限制,也是机会
换个视角来看,对于设计师而言,无障碍设计又意味着什么?当面临了更多对色彩使用、信息组织的使用限制, 我们的设计是否会被驱使着牺牲更多的美感?无障碍设计为设计师带来了更多的挑战,但也是更多的可能。虽然这过程中我们可能会面临更多的设计“限制”,但这类“限制”在很多时候也会成为拓宽思路的利器,帮助我们 重塑设计思维,消除我们在设计中的偏见和认知局限。各云厂商的无障碍现状
既然无障碍十分重要,国内外的云厂商在这方面做的如何呢?
我们参考W3C提供的无障碍Easy Checks 中与云产品控制台最相关的几个检查项,选取了AWS、Azure、Google Cloud、腾讯云、华为云这几个主要云厂商,在自动化插件的辅助下对他们的控制台进行了简单的无障碍水平对比评估,并与我们阿里云控制台的现状进行了对比:从概念到实体,规范到产品
Vision without execution is hallucination — Thomas Edison 没有被付诸行动的远见只是幻想。- 托马斯 爱迪生绝大多数的发明,并非来自意外性创造,而更多是经过周密规划的结果。在无障碍探索落地过程中,我们首先做的就是将无障碍的设计原则融入到阿里云控制台的设计规范当中,使得其从最基础的组件层面,更自然,且更隐形的赋能上层产品。 在无障碍设计领域中,业界现有的权威设计指南是W3C的正式推荐标准《Web内容无障碍指南》(WCAG 2.1)。这份指南涵盖了一系列能使更多残障人士更容易访问Web内容的指导标准,分为A、AA、AAA三个等级,共含有多达78条指导建议,可覆盖Web内容在台式机、笔记本、平板和移动端的无障碍场景。WCAG 2.1设计指南所含内容全面且高度概括,为无障碍设计提供了非常好的指导方向。但是,当我们想应用于控制台日常设计时发现,指南内容整体较为抽象且概括,往往在实际的查看使用过程当中,存在着相当高的消化理解成本。因此,我们想 基于阿里云控制台的实际业务场景 ,为我们的 设计师和工程师 ,撰写一份 简单易懂、聚焦,且具有实际指导意义 的无障碍设计指南 。一套有目的性的指南
WCAG 2.1 浑身是宝,但要想让人们 更快更好 的吸收其丰富营养,我们需要对于整套的原始资源进行更进一步的提炼,梳理。按照不同角色,不同职能,分别从设计原则与前端指南两个方面进行梳理。以设计视角的指导为例子。在撰写过程中,我们对WCAG 2.1标准中的细则进行要点提炼,有目的的提取控制台设计相关的内容,并将概括性高的准则内容,重新拆分整理形成 8类、22条设计建议。全面覆盖了从最直观的色彩、字体、布局的使用,到反馈设计、用户自由度等各个方面。![e1e98d73071beb6a9bada9dfa39a7816.png](https://i-blog.csdnimg.cn/blog_migrate/7601e429a088c7c8ca87a1cdcc95ef82.png)
![f47b2c4a42a96b545e8f7a44298ef8bf.png](https://i-blog.csdnimg.cn/blog_migrate/078f5a3f2311783f2e3c85da29691a8d.png)
![6b43ab69b6cbf5b2e3d4bf7290100218.png](https://i-blog.csdnimg.cn/blog_migrate/f141aa229328e930269051c9c158de7a.png)
一套设计系统与功能组件的强力Buff
云产品的流程体验由相对应页面间的流程所串连,页面则由不同的模块布局或场景组合而成,而最终的的最终,用户对于特定信息的获取,对于具体应行为的操作,都是由基础的文本/数字信息,基础功能组件所构成。在尽心构建的基础组件之上,无障碍的引入是对其额外的能力加持,是基础组件的强力Buff。 设计的细节成就了设计本身 - 查尔斯 伊姆斯 he details are not the details. They make the design — Charles Eames当我们谈无障碍对于底层组件的加持时候,我们更多谈的是对于细节调整的苛求。无障碍对于组件的视觉及交互的影响,是隐秘的,是直觉的。无障碍对于体验的优化并非是一味的提高某项参数,无脑的将可见的变化铺在明面。而是经过权衡之后的合理取舍。当产品中得到无障碍体验加持时,得到的是产品本身对于其使用人群、使用场景的包容性概率的提高。在实际的行动中,我们把相关细则揉进了阿里云控制台组件设计当中。重新定义了各个组件的底层视觉规则,确保所有的视觉呈现满足无障碍对比度或者是信息密度等可读性的要求。如以下案例:文本段落之间的空白负空间,直接影响着人们阅读文字时的眼动跟随。过于疏或密,都会导致长文本阅读的信息粘连或卡顿。延续无障碍指导规范,我们建议:行高(行间距)至少为字体大小的1.5倍;将段落间距设置为字体大小的至少2倍;字母间距(跟踪)至少为字体大小的0.12倍;字间距至少为字体大小的0.16倍。![fe5d079e5e3bac6c8642036f14eca085.png](https://i-blog.csdnimg.cn/blog_migrate/d88a30bd158b2156fd883a23afcfa722.png)
![ad8f550063c1b788d04a7089916bf538.png](https://i-blog.csdnimg.cn/blog_migrate/4956fc8bd338426099aedb81c1e83547.png)
进一步的理解与实践 - 量身定制的评估体系
在完成设计层面的指南定义后,我们接下来面临的问题就是如何让阿里云控制台的各云产品逐步落地无障碍的设计理念与要求。控制台体系是复杂庞大的,涉及上百款云产品与他们背后的团队,如何让过程中的参与者都理解、参与并逐步推进呢?我们需要一个评估体系,一则可以帮助各产品明确现在的无障碍水平,二则可以量化其落地无障碍过程中取得的进展。为什么要“量身定制”?
目前在无障碍的评测方面,业界主要采取的方式可分为两类:基于WCAG标准的逐条人工评估与插件评估。· 基于WCAG标准的逐条人工评估,可全面覆盖WCAG的所有标准,但WCAG中有一部分标准控制台并没有涉及,且有一定理解难度,整体评估周期与成本较高。· 插件评估则是使用线上各类无障碍评估插件,对网页进行自动检测与结果反馈,实操效率很高,但覆盖内容有限,仅可覆盖代码层可检验的内容,如组件或文案颜色、代码格式是否规范等。对于控制台来说,上述两种方法都不是最理想的,我们需要 因地制宜,为控制台“量身定制“一套 成本可控、可高效实操的评估体系。确定分级模型
基于管控产品的形态与实际场景,从实现与引导的角度,我们重新梳理无障碍的设计内容,定义了 通关制的三级评估模型, 分级与标准如下:![a3917a5e2a03572170f96af42ca13ce2.png](https://i-blog.csdnimg.cn/blog_migrate/f55cc7564accab1ce7873c15f99baf3f.png)
![742e452afb2ac14c3d6b9296b48c5dcb.png](https://i-blog.csdnimg.cn/blog_migrate/31bdeaa03bbca4a01e5f8a5d019f30bd.png)
制定评估方法与指标计算
为了让评估可被广泛高效的使用,我们确定了 工具与人工结合评测的方法,来进一步降低评估的门槛与时间成本。我们对业界近10款网站或插件进行了试用评测,最终选定Chrome插件Accessibility Insights for Web进行辅助测试。该工具的引入可帮助我们快速完成代码规范化与视觉层基础规则的45条评估项达标检验。其余的49条评估项则由控制台云产品的设计师人工检测完成。![3d9ed68ff3190fd17ec468ee1dd18f18.png](https://i-blog.csdnimg.cn/blog_migrate/3b05e7572b475ed7570d437066d1223a.png)
![983866e5f73bb1261471b53eb1900ec4.png](https://i-blog.csdnimg.cn/blog_migrate/45702b79b5d0cbc8ddee56fe658706b1.png)