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