Lighthouse: Difference between revisions
m Move page script moved page ALLY:Automated Web Accessibility Checkers - Lighthouse to Lighthouse without leaving a redirect |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
Lighthouse is an open-source, automated tool for assessing the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. | |||
== Using the Lighthouse Extension == | |||
=== Get the extension === | |||
This extension works on both Chrome and Firefox and can be installed using the links below. | |||
* [https://bit.ly/LighthouseChrome Lighthouse Chrome Extension] | * [https://bit.ly/LighthouseChrome Lighthouse Chrome Extension] | ||
* [https://bit.ly/LighthouseFirefox Lighthouse Firefox Extension] | * [https://bit.ly/LighthouseFirefox Lighthouse Firefox Extension] | ||
=== To run an audit: === | === To run an audit: === | ||
* Go to the page you want to audit. | * Go to the page you want to audit. | ||
* After installing the extension, you should see the Lighthouse icon [[File:ALLY_Automated_Web_Accessibility_Checkers_-_Lighthouse-image-20240301-191836.png]] near the address bar. You can also navigate to it using the short cut keys Command+Option+I to open Developer tools and navigate to "Lighthouse" | * After installing the extension, you should see the Lighthouse icon [[File:ALLY_Automated_Web_Accessibility_Checkers_-_Lighthouse-image-20240301-191836.png|36x36px]] near the address bar. You can also navigate to it using the short cut keys Command+Option+I to open Developer tools and navigate to "Lighthouse" | ||
* Once you locate the icon, click on it. This opens a modal window [[File:ALLY_Automated_Web_Accessibility_Checkers_-_Lighthouse-LighthouseModal.png|325x325px]] | |||
[[File:ALLY_Automated_Web_Accessibility_Checkers_-_Lighthouse-LighthouseModal.png| | * Next, engage the gear icon in the upper right | ||
* When you engage the gear icon, there are multiple options. By default, all options are checked and it will look at mobile rather than desktop. | |||
* For our purposes choose only '''Accessibility''' to narrow the results. | |||
* Choosing mobile or desktop is up to you and depends on how the information will be delivered to users. If the application is going to be used primarily on a laptop or desktop, choose '''Desktop'''. This is the most common option. [[File:ALLY_Automated_Web_Accessibility_Checkers_-_Lighthouse-LighthouseOptions.png|399x399px]] | |||
* Once you've chosen your options, click '''Generate report'''. Lighthouse runs its audits against the currently-focused page and opens up a new tab with a report of the results. | |||
* To save a report go to the far left, engage the three vertical dots and choose '''Print Expanded''' and save as a PDF. | |||
* Note: when an [https://bit.ly/overlay-fact-sheet Accessibility Overlay] is present, the overlay appears to interfere with the plugin's ability to accurately assess a page for WCAG compliance. | |||
=== What is a "good" grade? === | |||
What a great question. As you may have figured out by now accessibility can be thought of as a spectrum of success levels. | |||
== | |||
Ideally, we want to see scores of 90 and above. The main exception is when an [https://bit.ly/overlay-fact-sheet Accessibility Overlay] is present. An accessibility overlay is often put in place when a vendor or website owner has not coded their application or site to accepted standards (like WCAG, or European Union's EN 301 549). Overlays have been found to interfere with assistive technology thus failing to provide a better user experience for those who rely on assistive technology. | Ideally, we want to see scores of 90 and above. The main exception is when an [https://bit.ly/overlay-fact-sheet Accessibility Overlay] is present. An accessibility overlay is often put in place when a vendor or website owner has not coded their application or site to accepted standards (like WCAG, or European Union's EN 301 549). Overlays have been found to interfere with assistive technology thus failing to provide a better user experience for those who rely on assistive technology. | ||
== Using Lighthouse from Developer Tools == | == Using Lighthouse from Developer Tools == | ||
Developer Tools is a set of tools that are used primarily by people coding pages. The main advantage of using Lighthouse this way is that the Developer Tools workflow allows for testing local sites and authenticated pages, while the extension does not. | |||
== Resources to learn more about the Lighthouse plugin == | |||
* [https://bit.ly/Use-Lighthouse Test accessibility using Lighthouse] | * [https://bit.ly/Use-Lighthouse Test accessibility using Lighthouse] | ||
* [https://bit.ly/Lighthouse-testing-tool Google Developer - Lighthouse Overview] | * [https://bit.ly/Lighthouse-testing-tool Google Developer - Lighthouse Overview] | ||
[[Category:Accessibility]] | [[Category:Accessibility]] | ||
Latest revision as of 18:15, 21 May 2026
Lighthouse is an open-source, automated tool for assessing the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.
Using the Lighthouse Extension
Get the extension
This extension works on both Chrome and Firefox and can be installed using the links below.
To run an audit:
- Go to the page you want to audit.
- After installing the extension, you should see the Lighthouse icon
near the address bar. You can also navigate to it using the short cut keys Command+Option+I to open Developer tools and navigate to "Lighthouse"
- Once you locate the icon, click on it. This opens a modal window
- Next, engage the gear icon in the upper right
- When you engage the gear icon, there are multiple options. By default, all options are checked and it will look at mobile rather than desktop.
- For our purposes choose only Accessibility to narrow the results.
- Choosing mobile or desktop is up to you and depends on how the information will be delivered to users. If the application is going to be used primarily on a laptop or desktop, choose Desktop. This is the most common option.
- Once you've chosen your options, click Generate report. Lighthouse runs its audits against the currently-focused page and opens up a new tab with a report of the results.
- To save a report go to the far left, engage the three vertical dots and choose Print Expanded and save as a PDF.
- Note: when an Accessibility Overlay is present, the overlay appears to interfere with the plugin's ability to accurately assess a page for WCAG compliance.
What is a "good" grade?
What a great question. As you may have figured out by now accessibility can be thought of as a spectrum of success levels.
Ideally, we want to see scores of 90 and above. The main exception is when an Accessibility Overlay is present. An accessibility overlay is often put in place when a vendor or website owner has not coded their application or site to accepted standards (like WCAG, or European Union's EN 301 549). Overlays have been found to interfere with assistive technology thus failing to provide a better user experience for those who rely on assistive technology.
Using Lighthouse from Developer Tools
Developer Tools is a set of tools that are used primarily by people coding pages. The main advantage of using Lighthouse this way is that the Developer Tools workflow allows for testing local sites and authenticated pages, while the extension does not.