SKYSUKA's Studio.

Fusion能为网站开发者带来什么

字数统计: 1.5k阅读时长: 5 min
2019/09/12 Share

此篇为介绍Fusion Next组件库无障碍能力的短文,欢迎star Fusion 组件库

手淘与支付宝的无障碍实践,让移动互联网时代的消费者,无疑感受到了无障碍支持带来的便利。

而在阿里内部还有一个团队,致力于提供无障碍支持的中后台UI解决方案,这套极致的解决方案,为像阿里云、飞猪等这样庞大的业务提供了UI层面的专业支持,
他,就是Fusion Design

Alibaba Fusion Design是什么?

Alibaba Fusion Design(以下简称Fusion)是一套企业级中后台UI的解决方案,致力于解决设计师与前端工程师在工作协同、产品体验一致性、开发效率方面的问题。

通过这套体系,设计师可以自由的定制组件的 UI 并产出一个 npm 主题包,前端工程师可以直接使用这个主题包而不需要关注组件的还原度问题,省去了和设计师反复做还原度 Review 的工作量,大幅度的提高了开发效率。

Fusion 的无障碍能力如何让网站开发者更省心?

毋庸置疑,网站的无障碍性将会成为越来越重要的考量指标,达不到无障碍性要求的站点不仅会面临用户流失的危险,在一些国家甚至已经面临被起诉的法律风险。

如何降低网站开发者学习无障碍的成本,甚至无需操心具体细节即可实现网页的无障碍,一直是Fusion Next组件库深耕的方向,因为对于网站开发者而言,相比于一套需要耗费长时间学习的方法论,他们更需要的,是一个开箱即用的工具。

为了能更好地贴合web无障碍标准,保证Fusion Next组件库实践的准确性,Fusion团队还与浙江大学中国残疾人信息和无障碍技术研究中心达成了合作,由浙大方面提供标准理论指导,Fusion团队进行技术支持,从而将无障碍的国际标准WCAG2.1以及最新的无障碍国家标准落地到Fusion Next组件库中。

如今,网站开发者通过使用Fusion Next组件库,能轻松对页面实现较高程度的无障碍化,再结合《Web信息无障碍开发漫游指南》,对具体情况进行分析改进,便可使得网站的无障碍化趋于完美。

Fusion 如何构建出全面的无障碍能力?

Fusion Next组件库内置的如此强大的无障碍能力并不是凭空诞生的,Next组件库的开发团队通过对组件进行多期的深入改造,精益求精,才呈现出了大家现在看到的版本。

组件无障碍化支持方式的难度,视组件的类型而不一,我们将介绍3个组件的无障碍化例子,来分享Fusion是如何将无障碍能力内置到组件中去的。

  • 透彻剖析规则实现方式,用专业的水准支持无障碍

<Select>组件为了满足可用键盘导航选择菜单(并朗读所选内容)的同时兼顾键盘输入的需求,将焦点固定在输入框中,通过监听键盘上下箭头的点击事件,切换弹层菜单内的选中内容。
为了在没有聚焦的情况下仍可以实时朗读选中元素,我们增加了一个仅屏幕阅读器可见的元素,每次切换选择时更新选中内容到该元素上,并通过对其设置aria-live属性,达到实时选中并朗读的目的:

1
<span class="next-sr-only" aria-live="polite">Jack</span>
  • 多方求证寻求最优解法,用合适的方案实现无障碍

在做<Step>组件的支持时,我们在Bootstrap等国外流行的UI组件库、WAI-ARIA官方实践中,都没有找到相似的进度组件。
role标签中比较接近<Step>的是progressbar,但progressbar更契合<Progress>的概念。就如何实现<Step>的无障碍问题,我们咨询了w3c/aria他们提供的方法简单却实用,使用语义化标签加aria-current属性就可以完美支持:

1
2
3
4
5
<ol>
<li>apple</li>
<li aria-current=“step”>banana</li>
<li>cherry</li>
</ol>
  • 深入浅出的开发者文档,用贴心的态度服务开发者

我们也会为组件提供详细的无障碍文档,方便开发者快速了解如何正确的使用组件的无障碍能力。
比如<Message>组件是一个即时反馈类组件,常用于用户操作后的成功/失败/异常提示等,Message意味着更高优先级信息的出现。对“单线程”的屏幕阅读器来说,当页面上出现Message后,它需要中断当前阅读内容,直接播报Message中的消息。因此我们设定该组件的role值为alert,以满足即时播报的功能。
如果<Message>组件作为纯UI组件使用,其包含的信息并优先级不高,并不需要中断当前播报时,开发者要注意重新设置role属性,否则对屏幕阅读器有干扰,会给盲人用户带来不必要的麻烦。
这些组件使用细节的考量与设置,我们都加以汇总,提供在Fusion组件的无障碍使用文档中,让开发者最大化的感受到Fusion Next组件库提供的便利。

CATALOG
  1. 1. Alibaba Fusion Design是什么?
  2. 2. Fusion 的无障碍能力如何让网站开发者更省心?
  3. 3. Fusion 如何构建出全面的无障碍能力?