什么是可及性測(cè)試？
可及性是用來(lái)描述產(chǎn)品、設(shè)備、服務(wù)或環(huán)境對(duì)人群的適用范圍大小的程度的一般性術(shù)語(yǔ)?！?Wiki: Accessibility is a general term used to describe the degree to which a product, device, service, or environment is available to as many people as possible.) 說(shuō)的通俗一些，就是衡量一個(gè)軟件在有限的條件下能被多少人順利使用的標(biāo)準(zhǔn)。
網(wǎng)絡(luò)信息要能夠以“無(wú)障礙”的方式傳達(dá)給用戶(hù)，基本上包含三個(gè)要素：
- 網(wǎng)頁(yè)內(nèi)容應(yīng)遵照規(guī)范設(shè)計(jì)：如政府所頒訂的無(wú)障礙網(wǎng)頁(yè)規(guī)范，及國(guó)際組織W3C公布的“網(wǎng)頁(yè)內(nèi)容無(wú)障礙設(shè)計(jì)指引”（WCAG 2.0）。
- 良好的信息輔具，如屏幕報(bào)讀軟件、點(diǎn)字顯示器等。
- 用戶(hù)要具備足以操作瀏覽輔具的能力：經(jīng)過(guò)良好的訓(xùn)練與學(xué)習(xí)，視障或?qū)W習(xí)障礙者仍然可以獲取所需的網(wǎng)頁(yè)信息。
例如有一位盲人需要來(lái)訪問(wèn)淘寶網(wǎng)，他可能會(huì)使用一些輔助工具例如發(fā)聲器等來(lái)協(xié)助他讀網(wǎng)站。這個(gè)輔助工具可能就需要用一些基于accessibility的標(biāo)準(zhǔn)去做讀取網(wǎng)頁(yè)元素的工作。如果這個(gè)時(shí)候淘寶網(wǎng)的accessibility不夠標(biāo)準(zhǔn)，則可能造成這些輔助工具達(dá)不到預(yù)期效果。
可及性測(cè)試工具Pa11y##
Pa11y是一套自動(dòng)化的accessibility測(cè)試工具，其通過(guò)在命令行執(zhí)行HTML_CodeSniffer腳本后，探測(cè)html源文件是否滿(mǎn)足民間標(biāo)準(zhǔn)WCAG(WebContentAccessibilityGuideLines2.0)和美國(guó)政府法定的 Section 508標(biāo)準(zhǔn)
pa11y包含三個(gè)工具:核心工具pa11y,支持多任務(wù)同時(shí)執(zhí)行的pa11y-webservice和可視化的pa11y-dashboard。三個(gè)工具各有不同的用處和用法，最簡(jiǎn)單的使用就直接下載pa11y-dashboard使用就可以了。
這么來(lái)理解這三個(gè)工具：有一群人需要做accessibility測(cè)試的工作，結(jié)果發(fā)現(xiàn)標(biāo)準(zhǔn)太多手工做的話工作量太大，然后剛好在發(fā)現(xiàn)HTML_CodeSniffer可以驗(yàn)證網(wǎng)站是否滿(mǎn)足WCAG和Section508標(biāo)準(zhǔn)。于是他們就做了一個(gè)pa11y工具基于HTML_CodeSniffer，利用phantomjs去盲跑待測(cè)網(wǎng)站。pa11y可以跑remote URL和本地html文件，而且可以生成各種指定格式的報(bào)告。并且開(kāi)放了JS接口，可以使用JavaScript直接調(diào)用和跑結(jié)果。搞完這個(gè)以后，又發(fā)現(xiàn)如果有好多個(gè)頁(yè)面都需要測(cè)的話，那用pa11y起來(lái)也挺麻煩的，最好還能夠一次跑多個(gè)頁(yè)面。于是他們又搗鼓出了pa11y-webservice。最后這群人又在想了，既然我要做這個(gè)工具，為什么不把這個(gè)工具做得更好用一些，一鍵安裝，無(wú)腦使用就能達(dá)成效果了。然后就做出具有可視化UI的pa11y-dashboard，集成了前面的兩大工具。
下面以mac環(huán)境為例，簡(jiǎn)單介紹下如何安裝和使用這套工具
安裝依賴(lài)環(huán)境:####
$ brew install node
$ brew install phantomjs
$ brew install mongodb
$ npm install -g grunt-cli
pa11y
安裝：
npm install -g pa11y
執(zhí)行:
測(cè)試在線網(wǎng)站
pa11y www.taobao.com
測(cè)試本地文件
pa11y file:///path/to/your/file.html
pa11y-webservice
安裝：
拷貝源碼
git clone https://github.com/springernature/pa11y-webservice.git
下載依賴(lài)文件
npm install
pa11y-dashboard
安裝
git clone https://github.com/springernature/pa11y-dashboard.git
npm install
定義配置文件，執(zhí)行如下命令：
$ cp config/development.sample.json config/development.json
$ cp config/production.sample.json config/production.json
$ cp config/test.sample.json config/test.json
每個(gè)配置文件指向不同的環(huán)境
然后定義環(huán)境變量：
$ NODE_ENV=production node . # Run in production
$ NODE_ENV=development node . # Run in development
$ NODE_ENV=test node . # Run in test
完成安裝和環(huán)境變量配置后，在test mode下啟動(dòng)服務(wù)
$ grunt start-test
然后就可以執(zhí)行這些命令跑服務(wù)了
$ grunt # Run the lint and test tasks together
$ grunt lint # Run JSHint with the correct config
$ grunt compile # Compile front-end assets
$ grunt start # Run app in development mode, restarting if files change
$ grunt start-test # Run app in test mode, restarting if files change
$ grunt test # Run functional tests
$ grunt watch # Watch for file changes and compile assets
跑起dashboard效果如下：
