Pa11y测试网站可访问性工具

栏目: 数据库 · 发布时间: 6年前

内容简介:非常感谢可以用

前言

非常感谢 wapycecarlsonsantana 测试我的博客网站,并给我发出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测试网站可访问性工具 Pa11y测试网站可访问性工具

我的案例(可忽视)

通过 pa11y 命令测试我的网址,发现些bug,如下所示 Pa11y测试网站可访问性工具

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 ..


以上所述就是小编给大家介绍的《Pa11y测试网站可访问性工具》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web程序设计

Web程序设计

(美)塞巴斯塔 / 王春智、刘伟梅 / 清华大学出版社 / 2011-1 / 69.00元

《Web程序设计(第6版)》浓墨重彩地描述客户端和服务器端Web开发技术,深入分析Web站点构造和维护工具,并透彻讲解主流Web编程语言。《Web程序设计(第6版)》对上一版内容做了全面细致的修改,并融入了NetBeans 6.7、Visual Studio 8和ASP.NET Web服务等最新技术。《Web程序设计(第6版)》既可以作为高校教材,也可供专业Web编程人员参考使用。一起来看看 《Web程序设计》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具