Color Contrast - Docs recommend Chromelense

[gauntface]

After clicking "Run accessibility Checks" in ChromeLense I get the following errors:

axs_testing.js:2155 Some rules cannot be checked using the axs.Audit.run() method call. Use the Chrome plugin to check these rules: AX_FOCUS_02
axs.Audit.run @ axs_testing.js:2155
run @ run_axs.js:182
(anonymous) @ run_axs.js:208
axs_testing.js:2155 To remove this message, pass an AuditConfiguration object to axs.Audit.run() and set configuration.showUnsupportedRulesWarning = false.

Meanwhile the errors flagged by lighthouse aren't displayed by the tool.

@robdodson mentioned it would be worth recommend axe instead.

[robdodson]

@kaycebasques this is for the Learn More guide on color contrast. I'm not sure how well maintained Chromelens is these days... I think I've seen similar errors before.

I believe the reason for recommending ChromeLens is because it will highlight the elements but if we use aXe you can click through the errors and click the 'inspect' button and it will focus the element in the devtools elements panel.

[ngzhian]

Hi! Thanks for the feedback, this should be fixed in 0.0.7, please update the extension.
If you still see this error can you please let us know which website you are running ChromeLens on, thanks!

[kaycebasques]

Right, I recommend ChromeLens b/c it highlights failing elements.

How does one use aXe? Is this a DevTools extension?

I want to switch to recommending the DevTools Audits panel. Could've sworn that the references to the elements in the "View Failing Elements" table highlighted the element in the viewport on hover, and selected the element in the DOM Tree on click, but it looks like it's not working...

cc @patrickhulce

[kaycebasques]

I see now that aXe has a DevTools extension https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US

[patrickhulce]

Yeah the integration is a little flaky right now, might be a good idea to recommend aXe extension until we get a handle on it since that's really all we're surfacing atm, see #2289 for more background on when the highlighting fails

[robdodson]

I updated the docs related to this in google/WebFundamentals#4556