Modern browser developer tools include built-in accessibility inspection
features that allow developers to examine the accessibility tree, check
computed accessible names and roles, identify contrast failures, and audit
pages without installing any additional software. These tools are available
in Chrome, Firefox, Edge, and Safari.
[1]
Open DevTools with F12 or Ctrl + Shift + I (Windows) /
Cmd + Option + I (macOS).
Accessibility panel
In the Elements tab, select any element in the DOM and open the
Accessibility sub-panel (may need to be enabled in the More tabs menu).
This shows:
Full accessibility tree view
In DevTools → Elements, click the accessibility tree icon (a person icon)
in the top toolbar to switch the Elements panel to show the full
accessibility tree rather than the DOM tree. This shows exactly what
assistive technologies see.
Colour contrast in the Styles panel
Click any colour swatch in the Styles panel to open the colour picker.
It displays the contrast ratio of the selected element's text colour
against its background, with indicators showing whether it passes
WCAG AA and AAA levels.
Lighthouse accessibility audit
Open the Lighthouse tab and select Accessibility. Run an audit to get
an axe-core based score with categorised issues and guidance. This is
useful for a quick baseline but is not a substitute for comprehensive scanning.
Open DevTools with F12 or Ctrl + Shift + I.
Accessibility panel
Firefox has a dedicated Accessibility tab in DevTools that shows the
full accessibility tree for the page. Click any node to see:
Check for issues
The Firefox Accessibility panel includes a "Check for issues" feature
that highlights elements with accessibility problems directly in the tree,
categorised by type — contrast, keyboard, text labels, and more.
Simulate colour vision deficiencies
Firefox DevTools includes a colour vision simulation tool under
Accessibility → Simulate. This simulates protanopia, deuteranopia,
tritanopia, achromatopsia, and contrast loss, allowing designers and
developers to see pages as users with different types of colour blindness would.
Open the Accessibility Inspector in Safari via Develop → Show
Accessibility Inspector (Develop menu must be enabled in Safari settings).
The Safari Accessibility Inspector shows the accessibility tree and
element properties, and is particularly useful when testing VoiceOver
behaviour as it reflects the same tree VoiceOver uses.
One of the most valuable uses of DevTools is verifying how an element's
accessible name is computed. The name computation algorithm considers:
DevTools shows which source produced the computed name, making it
straightforward to identify why an element has an unexpected or missing name.
[3]
DevTools accessibility tools show the tree structure but cannot:
Use DevTools inspection alongside — not instead of — screen reader testing
and automated scanning.
Last edited Apr 7, 2026, 7:40 PM · P**** J****