摘要：前言非常感谢和测试我的博客网站，并给我发出，让我知道了网站有些，以及这个测试利器。简介是自动化测试网站可访问性的工具。它原理是用命令行的形式运行，得到可访问性报告。由于我网站需要保持统一色，这条我决定忽略。
前言
非常感谢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，如下所示
没有给html加上语言标识。
修复办法：加上中文语言标示
2. Anchor element found with a valid href attribute, but no link content has been supplied.无效的标签
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
其他链接我的原文地址 https://raoenhui.github.io/tool/2018/10/28/Pa11y/
Happy coding ..
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98813.html
showImg(https://segmentfault.com/img/remote/1460000018836440); 简介 无障碍、DOM 小细节、前端开发、a11y、Accessibility 无障碍的英文为 Accessibility 由于单词拼写过长往往被缩写为 a11y 其中 11 指的是中间有11个字母。 无障碍指的是在使用过程中，不管什么类型的用户都可以正常使用。生活中最常见的...
摘要：本项目将制作一个交互动画效果，令其在单词原词和数略词之间切换。二扩展应用到多个单词数略词有很多，为了能够一次展示多个单词，我们将对现有的程序进行扩展。 showImg(https://segmentfault.com/img/bVbtPjm?w=400&h=401); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/co...
摘要：本项目将制作一个交互动画效果，令其在单词原词和数略词之间切换。二扩展应用到多个单词数略词有很多，为了能够一次展示多个单词，我们将对现有的程序进行扩展。 showImg(https://segmentfault.com/img/bVbtPjm?w=400&h=401); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/co...
阅读 1420·2019-08-30 13:18
阅读 1346·2019-08-29 12:19
阅读 1893·2019-08-26 13:57
阅读 3849·2019-08-26 13:22
阅读 754·2019-08-26 10:35
阅读 2827·2019-08-23 18:09
阅读 2305·2019-08-23 17:19
阅读 489·2019-08-23 17:18
