Visual audit reporting

Feature request summary

Visually convey why applicable audits are failing by highlighting affected UI in the context of the page, either statically overlaid on a screenshot or interactively on the page itself.

The VisBug project is already well-positioned to handle the visualization of audit failures so it’s worth exploring possible integration points between that and LH. For example, perhaps VisBug could run LH audits under the hood and highlight audit failures based on the JSON LHR. cc @argyleink

What is the motivation or use case for changing this?

Many of the audits are inherently visual in nature. They are testing that visible parts of the page behave as expected. When Lighthouse identifies elements that fail the audit, we show their innerHTML or selector to convey what is failing and rely on text to explain why it failed.

By showing the results visually, it’s much easier to convey both what is failing and why. For example, the tap targets SEO audit checks for overlapping links/buttons. The results are a table of elements and box sizes. In addition to this easily serializable format, it would be helpful for users to be able to see these elements overlapping on the page so it’s not only obvious what the issue is but also how to fix it.

Prototype of a visual report of overlapping tap targets:

Contrast that with the text-based approach:

Here is a list of audits that are candidates for this visual reporting approach:

• Performance
  • properly size images
  • defer offscreen images
  • efficiently encode images
  • serve images in next-gen formats
  • use video formats for animated content
• Accessibility
  • all text remains visible during webfont loads
  • form elements do not have associated labels
  • image elements do not have [alt] attributes
  • some elements have a [tabindex] value greater than 0
  • links do not have a discernible name
  • buttons have an accessible name
  • background and foreground colors have a sufficient contrast ratio
  • [id] attributes on the page are unique
  • [accesskey] attributes on the page are unique
  • <input type="image"> elements have [alt] text
  • <object> elements have [alt] text
  • <video> elements contain a <track> element with [kind=“captions”]
  • <video> elements contain a <track> element with [kind=“description”]
• Best Practices
  • displays images with correct aspect ratio
• SEO
  • document doesn’t use legible font sizes
  • links have descriptive text
  • document doesn’t have overlapping tap targets

How is this beneficial to Lighthouse?

Visual reporting will make it easier for LH users to make sense of the results and fix issues.

[mattzeunert]

Made a prototype: http://mattzeunert.surge.sh/visual-report/twitter.html

[patrickhulce]

@mattzeunert that is epic! 🤩

We should make this a priority IMO. Massive improvement for all the a11y audits too! 🎉