Pa 11 yテストサイトのアクセス可能ツール

前言
wapyceとcarlson santinaが私のブログサイトをテストしてくれてありがとうございます.そしてIssueを送ってくれて、ウェブサイトの一部bugとPa11yというテスト利器があることを教えてくれました.
概要Pa11yは自動化試験サイトのアクセス可能なツールです.コマンドラインで動作するのが原理です. HTML CodeSnifferは、アクセス可能なレポートを得る.
使い方nodeを使用して、グローバルインストールpa11y.

   npm install pa11y -g 

直接コマンドラインを実行して、pa 11 yに自分のアドレスを追加します.

  pa11y https://raoenhui.github.io

jsでも使用でき、pa 11 y('URL')は承諾対象として返されます.

const pa11y = require('pa11y');
pa11y('http://example.com/', {
    // Options go here
}).then((results) => {
    // Do something with the results
});

pa 11 yは、要求ヘッドに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 pm 2 start index.js
URLを追加してサイト情報を確認します.
私のケース(無視できます)pa11yコマンドで私のウェブサイトをテストして、いくつかのバグを発見しました.
1.The.element shoult have a lang or xml:lang atribute which describes the langage of the document.
あげませんでしたhtmlに言語の表示を加える.
修復方法:中国語の表示を加える

2. Anchor element found with a valid href attribute, but no link content has been supplied.

タグ
:タグを する.

3.This element has insufficient contrat this conformance level.Expected a contrst ratio of at least 4.5:1、but text in this element has a contrst ratio of 2.77:1.Recommendation:change background to
ヒント のコントラストが りないので、 を えることをオススメします.
のサイトは を する があるので、これは することにしました.
4.Img element is the only content of the link,but is missing alt text.The alt text shound describe the purpose of the link.
が りませんaltタグ
:imgにtagを する.
その のリンク

の の https://raoenhui.github.io/tool/2018/10/28/Pa11y/

Happy coding.