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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!