2025TADC | 罗嘉龙:Skyscanner的无障碍开发实践
6月27日,“第七届科技无障碍发展大会(2025TADC)”在北京圆满举办。Skyscanner Lead Car Hire Accessibility Engineer (天巡租车业务无障碍技术负责人) 罗嘉龙为大会发表主旨演讲。
大家好,我是来自Skyscanner租车业务无障碍技术负责人罗嘉龙,今天非常开心能跟大家分享一下我们Skyscanner在无障碍开发领域的一些实践与心得。
我自己是一名工程师,所以今天的分享会有一点点偏技术。首先我会跟大家介绍一下Skyscanner,随后分享我们在无障碍文化建设上的一些措施,以及《无障碍人工测试指南》,最后会和大家分享我个人在无障碍技术开发上的一些心得。
首先简单跟大家分享一下Skyscanner,我们是一家全球领先的旅游搜索平台,支持30多种语言,同时每月服务超过1.1亿名旅行者,为他们提供机票、酒店和租车方案。作为Valuable 500的成员之一,我们承诺让Skyscanner成为残障包容的引领者,使我们的产品对所有用户真正可访问、可使用,让残障人士的出行变得更加轻松便捷。
天巡租车业务无障碍技术负责人罗嘉龙
接下来我想和大家分享一下,Skyscanner如何推动无障碍文化建设。Skyscanner建立了无障碍倡导者网络,这是一群来自不同职能不同层级的志愿者,他们在各自的团队中学习并分享无障碍最佳实践,并且作为第一联络人,及时解答同事们的疑问。
目前我们把倡导者们分成了4个小组,其中产品设计小组,由产品设计师、内容设计师、产品经理等成员组成,他们主要负责协助各自团队内提供支持无障碍的设计图,也就是说他们要保证交到工程师手里的设计图是要符合无障碍标准的。
市场传播小组主要负责对外传播中尽可能全面的反映残障旅客的存在与需求。工程师小组主要负责构建无障碍的产品,这里还包含了一个小的团队——AQA 团队,他们主要负责维护我们的自动化测试工具,后面我们也会讲到 AQA的工具。运营协作小组主要由各个小组的负责人和无障碍总负责人组成,他们主要负责整体的无障碍工作策略和各个小组之间的协作。正是这种小组的模式,让我们实现跨职能协作,确保无障碍工作的落实更有成效。
在实际的开发中,我们制定了一套完整的《无障碍测试指南》,也就是我们的产品标准,主要是下面5个方面。
设计和内容是指我们的设计图需要支持无障碍且简单、容易理解。仅使用键盘是指我们的网页,只使用键盘,也可以浏览所有的信息。放大是指页面可以放大多倍且不影响正常使用。同时我们的网页要对屏幕阅读器支持良好。
我们引入了自动化无障碍检测工具AQA,它能够定期自动运行测试脚本,发现无障碍问题,同时对网页进行打分,生成详细的报告,推动团队更加高效的解决问题。
可以看到使用这个工具,当我们打开了一个具体问题的报告页面,它能够定位到具体的元素,并解释这个问题是什么,严重等级是否容易修复等信息,最重要的是他还提供了修复这个问题的方案,有了这个工具我们就能快速高效的定位问题,解决问题。
接下来想和大家分享一下我们是如何增进团队的无障碍意识的。首先我们每年都会庆祝GAAD全球无障碍宣传日,今年在GAAD这一天,我们远程采访了GAAD的联合创始人杰尼森,这张图片就是我们无障碍的总负责人和杰尼森的连线,他作为一名盲人,在出行的时候总是不那么容易,他跟我们分享了一些非常有趣的经历,还有一些非常有价值的见解。
在GAAD这一天我们还上线了两款定制化的AI GPT应用,同时我们还让一些真实的旅客来测试体验我们的产品,给我们提供了非常重要的反馈。同时,我们每年在全球8个办公室中都会举行“共情实验室”,让同事们体验一下残障人士的感受。比如患有自闭症的人群,他们的情绪通常容易有较大起伏,我们让同事们体验了一个专门设计的网站,里面要求填完一个表单,但是设立的元素很多,不符合常理,比如登录表单,第一行是输入密码,第二行才输入账号,当用户填完之后才发现自己填错了,又得重新填一遍。
再比如说,设计了一个很大的绿色的按钮,用户以为是提交按钮,点击之后才发现是返回上一步,这种不符合用户行为的预期,很容易让用户产生情绪。视野丧失是指给我们的体验者戴上眼罩,让他们使用屏幕阅读器去体验我们的网页,体验盲人是如何使用屏幕阅读器的。
还有黄斑变性的用户,他们看东西会很模糊,我们给体验者戴上特制的眼镜,让他们看信息变得模糊,然后让他们在我们的网页中放大4倍,找到一个指定的内容,体验一下眼睛模糊的情况下要怎么去获取信息。
其实还有很多体验,今天就不一一介绍,我们每年都能收到很多反馈,同事们都会非常认可我们无障碍的工作。
下面跟大家介绍一下我们的《无障碍人工测试指南》。首先是设计和内容部分,当设计师将设计图交给工程师开发的时候,我们会要求设计图要符合无障碍技术的标准,包括文字的大小,文案是否容易理解等等,如果文字太小或者颜色太浅,用户会难以阅读。还有一些图片没有文案的按钮,都需要在设计图中指明对应的描述文字。
如果一个按钮没有文案且没有使用无障碍技术,那么屏幕阅读器就只能识别到它是一个按钮,而不知道这个按钮是干什么的。还有设计图应该指明标题结构,这样使用屏幕阅读器的时候就能快速的定位页面结构。
大家可以看到这张设计图,这里有一个打叉的按钮,它就需要提供一个文案,表明它是一个“移除”的意思。同时设计图中还说明了整一大块元素需要设计为H2的html结构,当工程师拿到设计图时,自然而然的就会去考虑支持无障碍了。
接下来是仅使用键盘测试,这是为了满足那些不使用鼠标或者触控板的人群的需求,简单来说就是仅仅使用键盘,也可以浏览完整的网页信息。
这里有一些要求,第一点是跳转到内容的链接应能正常工作。大家可以看到图片左上角,这是我们的结果页面,当用户进入我们结果页时使用Tab键,会出现一个跳转到结果页的按钮,此时按下空格键或Enter键的时候,就会直接聚焦在结果模块,这能够极大的方便用户直接浏览结果,而省去了浏览中间一系列的元素。
第二点是只有可交互的元素才能通过Tab键聚焦。可交互的元素有链接、按钮、表单等等,反面的例子是我们的Tab键聚焦在了一个纯文本的元素上,这是不符合我们的标准的。第三点是网页需要具备逻辑性的Tab顺序,一般是从前到后,从上到下。第四点是焦点不会移动到隐藏元素,比如有一些元素,用户根本没有办法看到却获得了焦点,那样也是不行的。
接下来是放大,用户可以通过浏览器调整页面内容的大小,视力较弱的用户可能会将浏览器放大到更高的级别。当我们将页面放大到400%的时候,我们有几点要求:
第一所有的内容和功能都仍然可用,因为有些网页是响应式布局,放大之后页面会切换到手机的样式,此时可能有些按钮点击不生效,这是完全有可能的。
第二,所有的内容没有缺失或者重叠,有些网页的自适应做的不好,放大的时候,有些元素会重叠在一起,造成信息的流失。
第三是逐渐缩小到原始大小,检查每个阶段文本的间距,这也是为了防止有些间距变化导致内容挤在一起,造成阅读困难。
这是我们使用谷歌浏览器将页面放大到400%,此时我们的网页已经变成了手机版的样式,然后我们根据这些要求一一去测试即可。
最后是屏幕阅读器,屏幕阅读器是视力受损人士以及部分神经多样性人群使用的辅助工具,它通过朗读屏幕上的内容获取信息,而不是依赖视觉查看。屏幕阅读器的细节有很多,但我觉得重要的就两点,第一读取的内容有意义,让使用屏幕阅读器的用户和使用视觉的用户能获取到同等的信息,这是非常重要,而且是非常关键的。
第二,使用屏幕阅读器能顺利的完成整一个操作流程。
屏幕阅读器的测试要求比较高,需要工程师会使用屏幕阅读器,还要注意阅读的顺序,阅读的内容等等,这也是我们开发时的工作重点。
最后简单和大家分享一下我个人作为工程师的一些经验。第一点是我们要把无障碍技术融入到我们开发的日常过程,作为开发的一部分,而不是额外的工作。比如你刚好写了一个没有文案的按钮,此时你注意到了它是没有文案的,你就应该意识到,在设计图中应该会有写这个按钮,在屏幕阅读器下应该读什么文案,我们顺其自然的就会去支持无障碍了。
第二点刚刚也提到了,就是要确保使用屏幕阅读器的用户能获取到同等的信息,我们经常能发现有一些元素在使用屏幕阅读器的时候会直接跳过,没有办法获得焦点,那么使用屏幕阅读器的用户就会丢失掉一部分信息了。
第三点就是多站在用户的角度去看问题,将自身带入用户视角,假设你只能使用屏幕阅读器,假设你只能使用键盘,你能否顺利理解并且使用这个功能,当我们切身站在用户的角度看问题的时候,我们才能真正解决并理解他们所面临的问题。
无障碍技术不仅仅是一项标准,更是一种对用户的尊重与担当,我们希望与大家一起共同打造一个更加包容、更加平等的数字世界,我的演讲就到这里了,谢谢大家。