Skip to content

Commit

Permalink
core(a11y): add back html/tags/impact (#5439)
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrickhulce
patrickhulce authored Jun 11, 2018
1 parent f287859 commit 4c47fb0
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 13 deletions.
7 changes: 5 additions & 2 deletions lighthouse-core/audits/accessibility/axe-audit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ class AxeAudit extends Audit {

const violations = artifacts.Accessibility.violations || [];
const rule = violations.find(result => result.id === this.meta.name);
const impact = rule && rule.impact;
const tags = rule && rule.tags;

/** @type {Array<{node: LH.Audit.DetailsRendererNodeDetailsJSON}>}>} */
let items = [];
Expand All @@ -42,7 +44,8 @@ class AxeAudit extends Audit {
type: 'node',
selector: Array.isArray(node.target) ? node.target.join(' ') : '',
path: node.path,
snippet: node.snippet,
snippet: node.html || node.snippet,
explanation: node.failureSummary,
}),
}));
}
Expand All @@ -56,7 +59,7 @@ class AxeAudit extends Audit {
extendedInfo: {
value: rule,
},
details: Audit.makeTableDetails(headings, items),
details: {...Audit.makeTableDetails(headings, items), impact, tags},
};
}
}
Expand Down
72 changes: 61 additions & 11 deletions lighthouse-core/test/results/sample_v2.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1260,17 +1260,25 @@
"type": "node",
"selector": "div > h2",
"path": "3,HTML,1,BODY,0,DIV,0,H2",
"snippet": "<h2>"
"snippet": "<h2>Do better web tester page</h2>",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 1.32 (foreground color: #ffc0cb, background color: #eeeeee, font size: 18.0pt, font weight: bold). Expected contrast ratio of 3:1"
}
},
{
"node": {
"type": "node",
"selector": "div > span",
"path": "3,HTML,1,BODY,0,DIV,1,SPAN",
"snippet": "<span>"
"snippet": "<span>Hi there!</span>",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 1.32 (foreground color: #ffc0cb, background color: #eeeeee, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1"
}
}
],
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143"
]
}
},
Expand Down Expand Up @@ -1346,9 +1354,16 @@
"type": "node",
"selector": "html",
"path": "3,HTML",
"snippet": "<html manifest=\"clock.appcache\">"
"snippet": "<html manifest=\"clock.appcache\">",
"explanation": "Fix any of the following:\n The <html> element does not have a lang attribute"
}
}
],
"impact": "serious",
"tags": [
"cat.language",
"wcag2a",
"wcag311"
]
}
},
Expand Down Expand Up @@ -1382,25 +1397,36 @@
"type": "node",
"selector": "body > img[src$=\"lighthouse-480x318.jpg\"]:nth-child(5)",
"path": "3,HTML,1,BODY,5,IMG",
"snippet": "<img src=\"lighthouse-480x318.jpg\" width=\"480\" height=\"57\">"
"snippet": "<img src=\"lighthouse-480x318.jpg\" width=\"480\" height=\"57\">",
"explanation": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element has no title attribute or the title attribute is empty\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\""
}
},
{
"node": {
"type": "node",
"selector": "body > img[src$=\"lighthouse-480x318.jpg\"]:nth-child(6)",
"path": "3,HTML,1,BODY,7,IMG",
"snippet": "<img src=\"lighthouse-480x318.jpg\" width=\"480\" height=\"318\">"
"snippet": "<img src=\"lighthouse-480x318.jpg\" width=\"480\" height=\"318\">",
"explanation": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element has no title attribute or the title attribute is empty\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\""
}
},
{
"node": {
"type": "node",
"selector": "body > img:nth-child(20)",
"path": "3,HTML,1,BODY,36,IMG",
"snippet": "<img src=\"blob:http://localhost:10200/ae0eac03-ab9b-4a6a-b299-f5212153e277\">"
"snippet": "<img src=\"blob:http://localhost:10200/ae0eac03-ab9b-4a6a-b299-f5212153e277\">",
"explanation": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element has no title attribute or the title attribute is empty\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\""
}
}
],
"impact": "critical",
"tags": [
"cat.text-alternatives",
"wcag2a",
"wcag111",
"section508",
"section508.22.a"
]
}
},
Expand Down Expand Up @@ -1434,25 +1460,37 @@
"type": "node",
"selector": "body > input[type=\"password\"]:nth-child(17)",
"path": "3,HTML,1,BODY,31,INPUT",
"snippet": "<input type=\"password\" onpaste=\"event.preventDefault();\">"
"snippet": "<input type=\"password\" onpaste=\"event.preventDefault();\">",
"explanation": "Fix any of the following:\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Form element does not have an implicit (wrapped) <label>\n Form element does not have an explicit <label>\n Element has no title attribute or the title attribute is empty"
}
},
{
"node": {
"type": "node",
"selector": "body > input[type=\"password\"]:nth-child(18)",
"path": "3,HTML,1,BODY,33,INPUT",
"snippet": "<input type=\"password\">"
"snippet": "<input type=\"password\">",
"explanation": "Fix any of the following:\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Form element does not have an implicit (wrapped) <label>\n Form element does not have an explicit <label>\n Element has no title attribute or the title attribute is empty"
}
},
{
"node": {
"type": "node",
"selector": "body > input[type=\"password\"]:nth-child(19)",
"path": "3,HTML,1,BODY,35,INPUT",
"snippet": "<input type=\"password\" onpaste=\"return false;\">"
"snippet": "<input type=\"password\" onpaste=\"return false;\">",
"explanation": "Fix any of the following:\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Form element does not have an implicit (wrapped) <label>\n Form element does not have an explicit <label>\n Element has no title attribute or the title attribute is empty"
}
}
],
"impact": "critical",
"tags": [
"cat.forms",
"wcag2a",
"wcag332",
"wcag131",
"section508",
"section508.22.n"
]
}
},
Expand Down Expand Up @@ -1486,17 +1524,29 @@
"type": "node",
"selector": "body > a:nth-child(15)",
"path": "3,HTML,1,BODY,27,A",
"snippet": "<a href=\"javascript:void(0)\" target=\"_blank\">"
"snippet": "<a href=\"javascript:void(0)\" target=\"_blank\"></a>",
"explanation": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\""
}
},
{
"node": {
"type": "node",
"selector": "body > a[href$=\"mailto:[email protected]\"]",
"path": "3,HTML,1,BODY,29,A",
"snippet": "<a href=\"mailto:[email protected]\" target=\"_blank\">"
"snippet": "<a href=\"mailto:[email protected]\" target=\"_blank\"></a>",
"explanation": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\""
}
}
],
"impact": "serious",
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag111",
"wcag412",
"wcag244",
"section508",
"section508.22.a"
]
}
},
Expand Down
4 changes: 4 additions & 0 deletions typings/artifacts.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,14 @@ declare global {
export interface Accessibility {
violations: {
id: string;
impact: string;
tags: string[];
nodes: {
path: string;
html: string;
snippet: string;
target: string[];
failureSummary?: string;
}[];
}[];
notApplicable: {
Expand Down

0 comments on commit 4c47fb0

Please sign in to comment.