Accessibility Meta is missing in Lighthouse 3
Provide the steps to reproduce
Run Lighthouse 2.9.4 on any website using the cli.
For my example I am running a simple report on http://cats.com.
To simply the example, you can run this, but it is not necessary:
'use strict';
/**
* Config file for running A11y audits.
*/
module.exports = {
extends: 'lighthouse:default',
settings: {
onlyAudits: ['color-contrast'],
},
};If there is a contrast error, Lighthouse 2.9 provides information about the current failing element.
For my example I am showing the contrast ratio. Notice in failureSummary it calculates the current ratio and advises what contrast ratio needs met to pass.
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.32 (foreground color: #ffffff, background color: #aaaaaa, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1",
Example result:
"extendedInfo": {
"value": {
"id": "color-contrast",
"impact": "serious",
"tags": [
"cat.color",
"wcag2aa",
"wcag143"
],
"description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
"help": "Elements must have sufficient color contrast",
"helpUrl": "https://dequeuniversity.com/rules/axe/3.0/color-contrast?application=axeAPI",
"nodes": [
{
"impact": "serious",
"html": "<input type=\"submit\" value=\"Subscribe\" name=\"subscribe\" id=\"mc-embedded-subscribe\" class=\"button\">",
"target": [
"#mc-embedded-subscribe"
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.32 (foreground color: #ffffff, background color: #aaaaaa, font size: 9.8pt, font weight: normal). Expected contrast ratio of 4.5:1",
"path": "0,HTML,2,BODY,0,DIV,0,FORM,0,DIV,4,DIV,0,INPUT",
"snippet": "<input type=\"submit\" value=\"Subscribe\" name=\"subscribe\" id=\"mc-embedded-subscribe\" class=\"button\">"
}
]
}
},Full Gist here
Yay! Lots of important meta.
But that meta has been removed in Lighthouse 3
Run Lighthouse 3.0.0-alpha.2 on any website. To simplify, you can run my Gist above.
"details": {
"type": "table",
"headings": [
{
"key": "node",
"itemType": "node",
"text": "Failing Elements"
}
],
"items": [
{
"node": {
"type": "node",
"selector": "#mc-embedded-subscribe",
"path": "0,HTML,2,BODY,0,DIV,0,FORM,0,DIV,4,DIV,0,INPUT",
"snippet": "<input type=\"submit\" value=\"Subscribe\" name=\"subscribe\" id=\"mc-embedded-subscribe\" class=\"button\">"
}
}
]
}View Full Gist here
All gone.
This seems like a major regression. I was using that data to consume the json and create markdown files with all the data, not just what is shown on the default html Lighthouse report.
I know it says that extendedInfo has changed to details in the migration doc. But this is more than renaming something. This is removing major functionality.
Accessibility Meta is missing in Lighthouse 3
Provide the steps to reproduce
Run Lighthouse 2.9.4 on any website using the cli.
For my example I am running a simple report on http://cats.com.
To simply the example, you can run this, but it is not necessary:
If there is a contrast error, Lighthouse 2.9 provides information about the current failing element.
For my example I am showing the contrast ratio. Notice in
failureSummaryit calculates the current ratio and advises what contrast ratio needs met to pass.Example result:
Full Gist here
Yay! Lots of important meta.
But that meta has been removed in Lighthouse 3
Run Lighthouse 3.0.0-alpha.2 on any website. To simplify, you can run my Gist above.
View Full Gist here
All gone.
This seems like a major regression. I was using that data to consume the json and create markdown files with all the data, not just what is shown on the default html Lighthouse report.
I know it says that
extendedInfohas changed todetailsin the migration doc. But this is more than renaming something. This is removing major functionality.