无障碍性测试工具 Pa11y|技术雷达

A11y(Accessibility)指的是用来帮助身心障碍者(残疾人)更加便利的使用先进技术的能力。目前世界上主要由各种人权组织和政府通过一些民间规则和政府规则来保障这方面权益。以Web Content为例,比较常见的规则有W3C组织在2008年出台的WCAG2.0,和美国国家标准的Section508等等。

这些规则数量比较多,涉及的检查范围从规定网页元素的颜色对比度,到元素的属性是否缺失等,内容十分丰富。对一个网站的内容进行完整的A11y检查,通常需要针对网站的每一个页面的每一个元素走查,这样的检查几乎是手工无法办到的。

Pa11y是基于HTML codeSinffer以及PhantomJS制作而成的网站内容A11y自动化检查工具。它利用PhantomJS的headless模式运行需要被测试的网站,然后把网页源文件和指定的规则(比如WCAG2AAA)做对比,自动检查出网页内容是否符合规范,同时会把检查结果输出成指定格式的报告。

ThoughtWorks技术雷达VOL.16将其放在试验阶段,鼓励大家对它进行尝试和使用。

Pa11y本身运行在node环境下,通过npm install安装。安装成功后,可以使用命令行来执行对目标网页的检查。同时它也支持从JavaScript直接调用。

Pa11y工具支持选择WCAG2.0 A/AA/AAA标准和Section508标准,也支持忽略这些标准中某些特定的项。通过设置参数,还可以改变输出报告的格式,比如输出CSV或者HTML格式的报告。

对比之前需要在手动进入到网站的每个页面、点开每个隐藏元素,再把当前网页源代码拷进自动化工具的检查方式。Pa11y提供了Actions方式来自动化操作页面元素,使得网站操作和规则对比可以完全自动化进行。

另外和其他A11y测试工具相比,除了免费和开源之外,Pa11y还衍生出了许多不同目的的、基于核心工具Pa11y的Pa11y-X工具。比如支持并发多线测试和测试/生产环境隔离,而且可以存储每次执行结果的Pa11y-Webservice;又比如支持非技术用户使用、操作配置简单易懂、集成了Pa11y-Webserivce的前后端一体工具Pa11y-Dashboard(如下图)。

Pa11y-Dashboard还提供可视化图表,协助分析质量趋势。

另外,基于Pa11y这个核心工具还衍生出了专为CI准备和优化过的命令行工具Pa11y-CI等工具。 随着需求的增加,这个平台里面的工具也在Pa11y team的维护下逐渐增多,逐渐形成了一个A11y测试工具全家桶。

然而在目前的版本中,仍然有一些可以继续关注的地方,比如:

  1. 目前所支持的标准仅有WCAG2.0和Section508,将来是否会扩展新的规则支持方案。
  2. 2017年的WCAG2.1标准已经发布β版本,Pa11y应该如何做相应更新值得期待。
  3. 如何提升对不同浏览器的检查支持。
  4. 当前版本依赖的PhantomJS本身还有一些问题,例如对ES6的支持性不完等,如何使Pa11y在ES6开发的网站上完美运行善。

另外值得注意的是,由于Chrome59宣布开始支持Headless,PhantomJS2.x的主要开发者之一Vitaly Slobodin已经宣布不再继续开发新的功能。那么依赖PhantomJS的Pa11y是否也会迎来一次大的改版换“芯”成Chrome呢?


原文发布于微信公众号 - 思特沃克(ThoughtWorks)

原文发表时间:2017-07-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JAVA高级架构

网站性能优化实战——从12.67s到1.06s的故事

2323
来自专栏H2Cloud

Base PyQt4, Simple Web APP Framwork

  长时间以来,一直针对Linux 服务器开发后台程序,每天面对的是黑框框,输出只有日志文件。偶尔需要模拟客户端测试,要么是写几行php代码,在浏览器上点一点,...

4124
来自专栏知晓程序

如何用 24 小时,开发一款阴阳师小程序?

1694
来自专栏假装我会写代码

也来扯扯 Vue 单元测试

2683
来自专栏Bug生活2048

微信小程序版博客——文章详情页设计及问题汇总

wxParse是将html格式的富文本内容转换成小程序可展示的内容的组件,在框架搭建那一篇文章中有提到。

7534
来自专栏IMWeb前端团队

初尝 Jest 单元测试

最近的几次发布都犯了小错,都是缺乏或者忽视了测试所导致的。通常来说,一个新功能上线的时候,开发和测试都投入比较多,各项测试都是比较全面的。然而,发布上线也并非意...

2918
来自专栏开源项目

Git 项目推荐 | 基于 C# 的极速 WEB + ORM 框架

NFine 是基于 C# 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展,让Web开发更迅速、简单...

5298
来自专栏糊一笑

【react】开发一款城市选择组件

7743
来自专栏DeveWork

postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其CSS 的插件,经过半年持续迭代,现已稳定用在旗下两款产品的Web ...

2789
来自专栏DeveWork

Google Fonts导致WordPress 速度问题的三个解决方案

本来实在是不想写这个的,因为相关方法在圈子里面已经烂大街了。但无奈,一些客户将近期的Google Fonts导致 WordPress 打开速度慢的现象归咎于我的...

3049

扫码关注云+社区

领取腾讯云代金券