Driver FixRecommendedSound, Wi-Fi or graphics acting up? Check drivers firstFind missing or outdated drivers fast.Check DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan Now×
Skip to content
World desk5 min

Chrome Accessibility DevTools: How to Test a Website

A practical Chrome DevTools workflow for auditing markup and contrast, inspecting the accessibility tree, testing reflow, and verifying keyboard and screen-reader use.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Chrome DevTools can help you find accessibility problems in a website’s markup, contrast, layout, and response to user preferences. It cannot prove that the site is accessible: use Lighthouse and DevTools for inspection, then test important tasks with a keyboard and a screen reader.

What Chrome DevTools can—and cannot—tell you

Accessibility testing asks two related but different questions: are page elements marked up so assistive technology can interpret them, and can people actually use the page with a keyboard or screen reader? Lighthouse and the DevTools Accessibility tools can surface many markup and contrast issues. Manual interaction is necessary to answer the usability question.

Chrome’s accessibility reference puts it plainly: “The only way to find errors related to question #1 is to try using a page with a keyboard or screen reader yourself.” Automated checks are useful for finding and locating problems, not for certifying a site or proving that no problems remain. Chrome DevTools accessibility reference

Tool names and panel layouts can differ by Chrome version. The Chrome reference notes that its screenshots in this section came from Chrome 69 and that the Audits panel was renamed Lighthouse in Chrome 83. If your labels differ, use the equivalent tools in your installed Chrome version.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall

Run a Lighthouse accessibility audit

  1. Open the page or specific state you want to test in Chrome. Open DevTools, then open Lighthouse.
  2. Enable the Accessibility category and run the report. If the mobile layout differs from desktop, test that layout separately as well.
  3. Review the findings and open individual audits for their explanations. Use each result to locate a potential issue, then inspect the page and determine whether the reported condition is a real problem in context.
  4. Fix confirmed issues and run the audit again. Also complete the manual checks below; a clean report is not proof that the site is fully accessible.

Lighthouse is most useful as a repeatable way to catch certain detectable issues and direct you to relevant elements. It cannot judge every aspect of interaction, wording, or the experience of using a page with assistive technology.

Inspect an element in the accessibility tree

  1. In DevTools, open Elements and select an important element, such as a button, form field, navigation item, or dialog control.
  2. Open the Accessibility tab for the selected node.
  3. Inspect the node’s representation in the accessibility tree, its ARIA attributes, and its computed accessibility properties.
  4. Compare the selected node and its DOM counterpart when the exposed information seems different from what the page visually shows or what you expect assistive technology to receive.

The accessibility tree is the browser’s relevant representation of elements exposed to assistive technology. Inspecting it helps diagnose whether markup and accessible properties convey the intended structure and control information; it does not tell you by itself whether the page is comfortable or efficient to use.

Check source order, contrast, and user preferences

Compare source order with the rendered page

If CSS makes the visual arrangement differ from the document’s sequence, use Chrome’s Source Order Viewer to number elements in source order. Compare that sequence with the rendered layout, especially where a person navigating linearly could encounter content in an unexpected order.

Investigate contrast

Use Lighthouse findings or DevTools’ contrast issue reporting and color picker to examine text and background colors. Treat reported issues as prompts to verify the actual content and visual states, including interactive and focused states.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For historical context, Chrome’s contrast guide attributed a statistic to WebAIM’s 2022 report: 83.9% of the top million home pages had low-contrast text in February 2022. That is a dated finding, not a current estimate of website prevalence. Chrome DevTools accessibility overview

Emulate preference settings

In DevTools’ Rendering tools, inspect how the page responds to simulated vision deficiencies, forced colors, contrast preferences, dark or light color scheme, reduced motion, and reduced transparency. These emulations can reveal rendering problems under different preferences; they are inspection aids, not substitutes for testing with users or assistive technology.

Rank #4

Test reflow and enlarged text

Use Chrome’s Device Toolbar to resize the viewport and check whether content reflows without losing information or functionality. Test narrow layouts and enlarged-text layouts, rather than assuming that a page that fits at its default desktop size will remain usable. Resizing is a practical check, not a conformance verdict by itself.

Manually test keyboard and screen-reader use

Keyboard pass

  1. Start from the beginning of the page and use Tab and Shift+Tab to move through interactive controls. Use Enter, Space, and arrow keys where appropriate to operate controls.
  2. Confirm that every control needed for the task can receive focus and that the focus indicator is visible.
  3. Check that the focus order makes sense and that overlays, menus, and dialogs do not trap or lose focus unexpectedly.
  4. Complete key flows, such as navigation, search, form submission, and dismissing a dialog—not only a static page scan.

Screen-reader pass

Use a screen reader to check whether each important control is announced with an understandable name, role, and state. Verify that headings, form instructions and errors, landmarks, and dynamic updates make sense as you move through actual tasks. Browser and screen-reader combinations vary, so a single successful check should not be generalized to every assistive-technology setup.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Optional: add axe DevTools to the workflow

Deque describes a free axe DevTools browser extension that provides basic page-by-page automated checks; its paid plans add features such as guided tests or broader workflow integrations. It can complement Chrome’s built-in checks when you want another automated workflow, but its results still need human review, and it does not replace keyboard or screen-reader testing. Deque axe DevTools browser extension · Deque axe DevTools plans

Or skip the browser setup:

For capturing a visual screenshot of a page rather than evaluating its accessibility, ScreenshotNeo offers a one-call screenshot API. It does not replace Lighthouse, accessibility-tree inspection, or manual testing.

See the ScreenshotNeo API documentation for options. For example, this cURL request captures a page to a WebP file:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; each of those steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, with response headers indicating the page verdict and billing status. Its MCP server gives AI agents screenshot, page-info, and PDF-capture tools. The Free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Sign up for 1,000 free screenshots a month, with no card required.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. Shenzhen desk3 min
    HONOR Expands Beyond Smartphones With Humanoid Robot RevealHONOR said it unveiled its first humanoid robot at MWC 2026 and named shopping assistance, workplace inspections, and supportive companionship as intended uses. Later Robotics D1 claims and a reported…
  2. Cupertino desk5 min
    Apple Unveils AirPods Max 2: The Upgrade That Should Have Happened Years AgoAirPods Max 2 adds H2-powered audio features and Apple claims up to 1.5× more effective ANC, but its design, Smart Case, and 20-hour battery rating are unchanged. Wired lossless audio…
  3. Cupertino desk4 min
    Apple’s OLED Touch MacBooks Are Coming—but the Dynamic Island Is the Real GambleApple has not announced an OLED touchscreen MacBook, but reports point to high-end models arriving in late 2026 or early 2027. The reported Mac Dynamic Island could be useful, but…
Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.