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