Pa11y测试网站可访问性工具
前言
非常感谢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并查看网站信息
我的案例(可忽视)
通过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 ..
相关推荐
RocketJ 2020-05-31
老道长的测试生活 2020-05-25
woxxoole 2020-05-03
蓝白云 2020-02-18
quguang 2020-01-28
abdstime 2020-01-11
goodby 2019-12-19
liuuil0 2014-01-25
MingoJiang 2019-10-28
万物皆可测量,这条定律同样适用于我们经常打交道的各种服务器和应用系统。服务器选型、测试、优化都是一些长期复杂的工作,如何在TurboCMS的项目中快速满足客户需求,我们只需要掌握以下的一些知识要点即可
MyWeb 2011-04-06
goodby 2019-10-20
DWY安全创造价值 2015-12-27
sharpljc 2012-07-19
mohanzb 2013-02-01
grantlee 2011-07-29
郑文强 2011-07-17
sharpljc 2011-12-20
evistera 2011-12-31

