資訊專欄INFORMATION COLUMN
摘要：前言非常感謝和測試我的博客網(wǎng)站，并給我發(fā)出，讓我知道了網(wǎng)站有些，以及這個測試利器。簡介是自動化測試網(wǎng)站可訪問性的工具。它原理是用命令行的形式運行，得到可訪問性報告。由于我網(wǎng)站需要保持統(tǒng)一色，這條我決定忽略。
前言
非常感謝wapyce和carlsonsantana測試我的博客網(wǎng)站，并給我發(fā)出Issue，讓我知道了網(wǎng)站有些bug，以及Pa11y這個測試利器。
簡介Pa11y是自動化測試網(wǎng)站可訪問性的工具。 它原理是用命令行的形式運行?HTML CodeSniffer
，得到可訪問性報告。
可以用node來全局安裝pa11y.
npm install pa11y -g
直接運行命令行,pa11y加自己的網(wǎng)址
pa11y https://raoenhui.github.io
也可在js中使用,pa11y("網(wǎng)址")返回的是一個承諾對象。
const pa11y = require("pa11y");
pa11y("http://example.com/", {
// Options go here
}).then((results) => {
// Do something with the results
});
pa11y中可以配置很多，如給請求頭加Cookie，忽視某些警告等，詳情可看pally 教程
DashBoard首先本地創(chuàng)建 mongoDb，下載dashboard代碼再安裝
git?clone?https://github.com/pa11y/dashboard.git cd dashboard npm i
更改pa11y的配置文件，主要是數(shù)據(jù)地址以及啟動端口號
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并查看網(wǎng)站信息
通過pa11y命令測試我的網(wǎng)址，發(fā)現(xiàn)些bug，如下所示
沒有給html加上語言標識。
修復辦法：加上中文語言標示
2. Anchor element found with a valid href attribute, but no link content has been supplied.無效的標簽
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
提示顏色對比度不足，建議更換顏色。
由于我網(wǎng)站需要保持統(tǒng)一色，這條我決定忽略。
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
其他鏈接我的原文地址 https://raoenhui.github.io/tool/2018/10/28/Pa11y/
Happy coding ..
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/98813.html
showImg(https://segmentfault.com/img/remote/1460000018836440); 簡介 無障礙、DOM 小細節(jié)、前端開發(fā)、a11y、Accessibility 無障礙的英文為 Accessibility 由于單詞拼寫過長往往被縮寫為 a11y 其中 11 指的是中間有11個字母。 無障礙指的是在使用過程中，不管什么類型的用戶都可以正常使用。生活中最常見的...
摘要：本項目將制作一個交互動畫效果，令其在單詞原詞和數(shù)略詞之間切換。二擴展應用到多個單詞數(shù)略詞有很多，為了能夠一次展示多個單詞，我們將對現(xiàn)有的程序進行擴展。 showImg(https://segmentfault.com/img/bVbtPjm?w=400&h=401); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/co...
摘要：本項目將制作一個交互動畫效果，令其在單詞原詞和數(shù)略詞之間切換。二擴展應用到多個單詞數(shù)略詞有很多，為了能夠一次展示多個單詞，我們將對現(xiàn)有的程序進行擴展。 showImg(https://segmentfault.com/img/bVbtPjm?w=400&h=401); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/co...
閱讀 1602·2019-08-30 13:18
閱讀 1584·2019-08-29 12:19
閱讀 2127·2019-08-26 13:57
閱讀 4151·2019-08-26 13:22
閱讀 1192·2019-08-26 10:35
閱讀 2997·2019-08-23 18:09
閱讀 2517·2019-08-23 17:19
閱讀 689·2019-08-23 17:18
