前言
非常感謝wapyce和carlsonsantana測試我的博客網站，並給我發出Issue，讓我知道了網站有些bug，以及Pa11y這個測試利器。
簡介
Pa11y是自動化測試網站可訪問性的工具。 它原理是用命令行的形式運行 HTML CodeSniffer
，得到可訪問性報告。
用法
可以用node來全局安裝pa11y.
npm install pa11y -g 直接運行命令行,pa11y加自己的網址
pa11y https://raoenhui.github.io也可在js中使用,pa11y('網址')返回的是一個承諾對象。
const pa11y = require('pa11y');
pa11y('http://example.com/', {
// Options go here
}).then((results) => {
// Do something with the results
});pa11y中可以配置很多，如給請求頭加Cookie，忽視某些警告等，詳情可看pally 教程
DashBoard
首先本地創建 mongoDb，下載dashboard代碼再安裝
git clone https://github.com/pa11y/dashboard.git
cd dashboard
npm i更改pa11y的配置文件，主要是數據地址以及啓動端口號
cp config/development.sample.json config/development.json
cp config/production.sample.json config/production.json
cp config/test.sample.json config/test.json如連接本地mongoDb,並配置啓動端口號爲4000
{
"port": 4000,
"noindex": true,
"readonly": false,
"webservice": {
"database": "mongodb://localhost/pa11y-webservice",
"host": "localhost",
"port": 27017,
"cron": "0 30 0 * * *"
}最後啓動dashboard
node index也可用pm2去啓動生成後臺進程 NODE_ENV=production pm2 start index.js
添加URL並查看網站信息![image.png]( "image.png")
我的案例（可忽視）
通過pa11y命令測試我的網址，發現些bug，如下所示
1.The html element should have a lang or xml:lang attribute which describes the language of the document.
沒有給html加上語言標識。
修復辦法：加上中文語言標示
<html lang='zh'>2. Anchor element found with a valid href attribute, but no link content has been supplied.
無效的<a>標籤
修復辦法：刪除<a>標籤
<!-- <a href="#"><i class="fa fa-bars"></i></a> -->
<i class="fa fa-bars"></i>3.This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.77:1. Recommendation: change background to #717171
提示顏色對比度不足，建議更換顏色。
由於我網站需要保持統一色，這條我決定忽略。
4. Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
圖片缺少alt標籤
修復辦法：給img添加tag
其他鏈接
Happy coding ..