preface

Thank you very much to wapyce and carlsonsantana for testing my blog website and sending me an Issue, letting me know some bugs on the website and Pa11y, a testing tool.

Introduction to the

Pa11y is a tool for automating web site accessibility testing. It works by running HTML CodeSniffer on the command line to get an accessibility report.

usage

You can use Node to install PA11y globally.

   npm install pa11y -g 
Copy the code

Direct run command line,pa11y add their own url

  pa11y https://raoenhui.github.io
Copy the code

Also available in JS,pa11y(‘ url ‘) returns a promise object.

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

You can configure a lot of things in PA11y, such as adding cookies to the request header, ignoring certain warnings, etc. See the Pally tutorial for details

DashBoard

First, create mongoDb locally, download the Dashboard code and install it

git clone https://github.com/pa11y/dashboard.git
cd dashboard
npm i
Copy the code

Modify the configuration file of pa11y, including the data address and startup port number

cp config/development.sample.json config/development.json
cp config/production.sample.json config/production.json
cp config/test.sample.json config/test.json
Copy the code

For example, connect to local mongoDb and set the startup port number to 4000

{
	"port": 4000."noindex": true."readonly": false."webservice": {
		"database": "mongodb://localhost/pa11y-webservice"."host": "localhost"."port": 27017."cron": "0 30 0 * * *"
	}
Copy the code

Finally start dashboard

node index
Copy the code

NODE_ENV=production pm2 start index.js add URL and view website information

My Case (negligible)

I tested my url through pa11y command and found some bugs, as shown below

1.The html element should have a lang or xml:lang attribute which describes the language of the document.

There are no language identifiers for HTML.

Fix: Add Chinese language logo

<html lang='zh'>
Copy the code

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

Invalid tag

Fix: Remove the tag

<! -- <a href="#"><i class="fa fa-bars"></i></a> -->
 <i class="fa fa-bars"></i>
Copy the code

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

The color contrast is insufficient. You are advised to change the color.

Since I need to keep the color uniform on my site, I decided to ignore this one.

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.

Image lacks Alt tags

Fix: Add a tag to img

Other links

  • My original address raoenhui. Making. IO/tool / 2018/1…

Happy coding ..