Chỉnh sửa

Chia sẻ qua

Test accessibility using Lighthouse

  • Bài viết

You can use Lighthouse from within DevTools to audit the accessibility of a page and generate a report. You can use the Lighthouse tool to determine:

The Lighthouse tool provides links to content hosted on third-party websites. Microsoft is not responsible for and has no control over the content of these sites and any data that may be collected.

To audit a page using the Lighthouse tool:

  1. Go to the URL that you want to audit.

  2. To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS). DevTools opens.

  3. In DevTools, on the Activity Bar, select the Lighthouse tab. If that tab isn't visible, click the More tools (More tools icon) button.

    The Lighthouse tool configuration options are displayed:

    The Lighthouse tool configuration screen

  4. Set the following configuration options:

    • For Mode, select Navigation.
    • For Device, select Mobile if you want to simulate a mobile device. This option changes your user agent string and resizes the viewport. This option can affect the audit results.
    • In the Categories section, select Accessibility, and clear the other categories:

    The configuration options to use

  5. Click the Analyze page load button.

    Lighthouse analyzes the page, and then DevTools displays a report. The report shows a score for the page's accessibility, out of 100. The report also gives tips on how to improve the accessibility of the page:

    A Lighthouse report for the Accessibility category

  6. Select an item in the report. The item is expanded to show more information:

    An expanded issue in a Lighthouse report

  7. Click the Learn ... link. Documentation about the issue is displayed:

    View the documentation of an issue

  8. To return to the configuration options, in DevTools, click Perform an audit (+).

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.