Test Web Accessibility using Lighthouse
Learn to test for accessibility using Google's Lighthouse tool -- an open-source, automated tool for auditing web pages. Lighthouse can audit with quite a few different tests (SEO, performance, PWA, etc.). We will only be looking at the Accessibility portion. The audit will show any issues that the site has with links to learn more as well as which elements specifically failed the tests.
Amberley Romo: [0:00] To test for accessibility using Lighthouse in Chrome DevTools, open up DevTools. Go to the Lighthouse tab. You can select which categories you want to run an audit for. In this case, we'll only select the accessibility audit, and click Generate Report.
[0:22] When the audit completes, you'll see a Lighthouse report in DevTools. The accessibility audit shows the accessibility issues discovered by the audit. For example, background and foreground colors do not have a sufficient contrast ratio. Expanding that issue, there's a brief description of the issue, a link to learn more, and a list of failing elements related to the issue.
[0:46] If we check out this first failing item, the corresponding instance will be visually highlighted above in the UI. Here, that's this first nav item. If you select the element itself, it will link you directly to the failing element in the Elements tab of DevTools.