Bob's Blog

WCAG是指网页的无障碍浏览指南(Web Content Accessibility Guidelines), 设定了一些建议和标准，让网站内容更容易被访问，能以各种方式交互，主要为残障人士提供帮助，比如对于视力障碍者提供了更大的字体或者特殊色彩或者对选项文本的阅读、对于肢体障碍者可以提供只用键盘就能操作，等等情况。

WCAG对于国内来说并不常见，但对于国外的大网站来说，WCAG是常备的功能，以令更多人都能方便的访问和使用网站内容。因此在遇到有这类型的功能的网站，需要也对WCAG的部分进行检查，比如检查字体是否足够大，色彩对比度是否足够，是否能仅用键盘比如tab就能轮循页面的所有元素，是否能对当前选中的文本做出正确的阅读，等等。

检查的内容很多，也很容易被忽视。所以往往借助工具，而工具本身包含了WCAG的标准，以提示是否满足需求。目前推荐的标准是WCAG 2.0 和 WCAG 2.1。比如2.1里包含了13个指导原则，包含了可感知、可操作性、可理解和健壮，并且分为3个级别：level A、level AA、level AAA，代表了不同的辅助程度，像level A就是最初级的级别，具体需要达成哪种程度需要由需求决定或者由政府部门等的要求决定。类似下图：

由此也可以看出检查的内容很多也不像功能点那样直接。

需要借助工具，如果是用浏览器访问的话，可以装一个插件：WAVE，类似下图，这里检查了python的官网

但是这样只能手动检查，需要自动化则用不上。于是可以考虑这四种工具：wave api，axe，amp，pa11y。

- wave api：

这个和wave是同一个官网，只不过可以直接将url发送过去并得到wcag的检查的结果，可以应用到自动化测试中，也可以在原先已有的脚本中加入检查点。api的说明地址是：https://wave.webaim.org/api/  https://wave.webaim.org/api/details

注册一个账号，获取到api key便可使用了，新账户有100次免费请求数。比如检查python官网可以用https://wave.webaim.org/api/request?key={api_key_here}&url=https://www.python.org/，如果reporttype大于1，则会消耗对应倍数的请求量，这里是默认的reporttype为1，返回结果为：

{"status":{"success":true,"httpstatuscode":200},"statistics":{"pagetitle":"Welcome to Python.org","pageurl":"https://www.python.org/","time":2.93,"creditsremaining":88,"allitemcount":267,"totalelements":747,"waveurl":"http://wave.webaim.org/report?url=https://www.python.org/","domid":"d025d27817a0c8f2e06fbb1949547de3"},"categories":{"error":{"description":"Errors","count":8},"contrast":{"description":"Contrast Errors","count":10},"alert":{"description":"Alerts","count":20},"feature":{"description":"Features","count":5},"structure":{"description":"Structural Elements","count":59},"aria":{"description":"ARIA","count":165}}}

但wave api有一个问题，就是我们往它本身的服务器发送url过去，但如果是内部网站比如测试环境，比如需要身份验证的网页，或者限制了安全访问的链接，则无法获取到结果。(对于身份验证有username和password的参数，但我个人尝试后并没有生效)

针对这种问题，wave还提供了standalone api，这个没有试用版，必须购买，所以没能尝试，不过从描述上来看，是需要单独搭建在内部环境中的，也可以检查内部网站、身份验证网页、安全限制网页等，只不过看到它提到了一个self-contained headless browser，似乎意味着不能直接通过已有的脚本来添加检查点，需要单独来写脚本。standalone api说明地址是：https://wave.webaim.org/standalone  https://wave.webaim.org/sitewide#standalone

- AXE

这个算是可以免费用的，但需要自己编写脚本，可以结合selenium来完成自动化需求。github地址是：https://github.com/dequelabs/axe-core   api文档是：https://www.deque.com/axe/core-documentation/api-documentation/

有不同语言的包，但关于这些包的使用文档比较少，比如python有axe-selenium-python，ruby有axe-core-selenium。目测有的在启动driver时用的不是源生webdriver，意味着已有的自动化脚本不能完全适应。

不过还有一种方式，直接通过driver去execute_script来调用axe相关的api，这样可以简单点集成到现在的框架和脚本中。比如如下的python代码：

(需要先npm install axe-core, 然后在node_modules目录下找到axe.min.js的文件路径，像这里也有个例子：https://www.browserstack.com/docs/automate/selenium/accessibility-testing#python)

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.python.org/")
axe_script = None
with open("/path/axe.min.js") as f:
    axe_script = f.read()
driver.execute_script(axe_script)
result = driver.execute_async_script('var callback = arguments[arguments.length - 1];axe.run().then(results => callback(results))')
with open("./wcag_result.txt", "w") as f:
    f.write(str(result))
driver.quit()

这还有个java的调用的样例的视频：https://www.youtube.com/watch?v=jz2DO2cLbj4

- AMP：

来自于levelaccess，记得是个收费的，还好公司有购买，所以自己能尝试一下。

对于这个平台，它提供了能做分析用的js、浏览器插件、以及不同编程语言的包，这些包可以与公司内部现有的测试代码集成起来。

按照它官方的样例，可以用类似下述代码来调用wcag的检查，比较简单。

from selenium import webdriver
from continuum import Continuum
import os

if __name__ == "__main__":
    driver = webdriver.Chrome()
    driver.get("https://www.baidu.com")
    continuum = Continuum()
    continuum.set_up(
        driver,
        os.path.abspath('./resources/continuum/continuum.json')
    )
    continuum.run_all_tests()
    accessibility_concerns = continuum.accessibility_concerns
    if accessibility_concerns:
        print(f'Found {len(accessibility_concerns)} accessibility concerns on {driver.current_url}:')
        for accessibility_concern in accessibility_concerns:
            element_string = accessibility_concern.element.split('>', 1)[0] + '>'
            print(f'  * {accessibility_concern.attribute}{os.linesep}'
                           f'      offending HTML element: {element_string}{os.linesep}'
                           f'      CSS path to offending HTML element: {accessibility_concern.path}{os.linesep}'
                           f'      remediation guidance: {accessibility_concern.best_practice_details_url}')
    driver.quit()

这里用continuum检查百度首页的wcag，结果如下

Found 4 accessibility concerns on https://www.baidu.com/:
  * This img element does not have a mechanism that allows an accessible name value to be calculated
      offending HTML element: <img usemap="#mp" onerror="this.src='//www.baidu.com/img/flexible/logo/pc/index@2.png';this.onerror=null;" height="129" width="270" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" class="index-logo-srcnew" id="s_lg_img_new" hidefocus="true">
      CSS path to offending HTML element: body>div:nth-of-type(1)>*:nth-child(2)>*:nth-child(5)>*:nth-child(1)>*:nth-child(1)>*:nth-child(2)>*:nth-child(2)
      remediation guidance: https://amp.levelaccess.net/public/standards/view_best_practice.php?violation_id=362
  * This img element does not have a mechanism that allows an accessible name value to be calculated
      offending HTML element: <img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/qrcode/qrcode@2x-daf987ad02.png" class="icon">
      CSS path to offending HTML element: body>div:nth-of-type(1)>*:nth-child(4)>*:nth-child(2)>*:nth-child(1)>*:nth-child(1)
      remediation guidance: https://amp.levelaccess.net/public/standards/view_best_practice.php?violation_id=362
  * This element does not have a lang attribute
      offending HTML element: <html>
      CSS path to offending HTML element: html
      remediation guidance: https://amp.levelaccess.net/public/standards/view_best_practice.php?violation_id=429
  * This input (no type specified) element does not have a mechanism that allows an accessible name value to be calculated
      offending HTML element: <input autocomplete="off" maxlength="255" value="" class="s_ipt" name="wd" id="kw">
      CSS path to offending HTML element: body>div:nth-of-type(1)>*:nth-child(2)>*:nth-child(5)>*:nth-child(1)>*:nth-child(1)>*:nth-child(4)>*:nth-child(8)>*:nth-child(3)
      remediation guidance: https://amp.levelaccess.net/public/standards/view_best_practice.php?violation_id=338

- pa11y

官网是：https://pa11y.org/

有命令行、webservice、CI等，这个没有做尝试，但或许能成为一个备用的方案。