Chrome DevTools for Accessibility

Chrome DevTools is really handy for accessibility testing once you know where the knobs are. This guide walks you through the most useful accessibility checks in a practical "dev doing real work" way.

1. Simulate Reduced Motion

This is the big one for animations, parallax, fancy transitions, etc.

Steps

1. Open Chrome DevTools

   • Right-click → Inspect or Cmd + Option + I / Ctrl + Shift + I

2. Open the Command Menu

   • Cmd + Shift + P / Ctrl + Shift + P

3. Type "render" and select: Show Rendering

4. In the Rendering panel:

   • Find Emulate CSS media feature prefers-reduced-motion
   • Choose reduce

Now Chrome behaves as if the user has Reduce Motion enabled at OS level.

What to test

• Animations stop or simplify
• Auto-scrolling / parallax disabled
• CSS like:

@media (prefers-reduced-motion: reduce) {
  animation: none;
  transition: none;
}

Pro tip: Toggle it on/off while watching for layout jumps or content disappearing.

2. Emulate Other Accessibility Media Features

In that same Rendering panel, you can test:

Feature	Options
prefers-color-scheme	light / dark
Vision deficiencies	Protanopia, Deuteranopia, Tritanopia, Achromatopsia
prefers-contrast	More / Less (experimental but useful)

This is gold for design system work — especially if you're policing contrast tokens.

3. Inspect Accessibility Tree

This helps answer: "What will a screen reader actually see?"

Steps

1. DevTools → Elements panel
2. Select an element
3. Open the Accessibility tab (right sidebar)

You'll see

• Role (button, link, heading, etc.)
• Accessible name
• ARIA attributes
• Whether it's ignored by assistive tech

Things to watch for

• Clickable divs with no role
• Buttons with no accessible name
• Form fields missing labels

This is huge for code reviews — especially React components.

4. Check Keyboard Accessibility

No mouse. Just vibes.

What to do

• Hit Tab through the page
• Check:
  • Logical tab order
  • Focus visible (always!)
  • No focus traps
  • Skip links work

Bonus

In the Styles panel, force :focus-visible or :focus to see if designers accidentally removed outlines.

5. Lighthouse Accessibility Audit

Not perfect, but fast signal.

Steps

1. DevTools → Lighthouse
2. Select Accessibility
3. Run audit

Use it for

• Missing labels
• Contrast issues
• ARIA misuse

warning

Treat Lighthouse as a smoke detector, not a diagnosis. It catches obvious issues but won't find everything.

6. Simulate Screen Reader-ish Experience

Chrome won't be a screen reader, but you can get hints:

• Enable Tab order overlays
  • Rendering → Tab focus order
• Inspect headings structure via:
  • Elements → search h1, h2, h3

For real testing, use actual screen readers:

Screen Reader	Platform
VoiceOver	macOS / iOS
NVDA	Windows
TalkBack	Android

But DevTools helps you catch 80% before you even get there.

7. Useful DevTools Experiments

In chrome://flags or DevTools Experiments:

• Accessibility object model (AOM)
• Contrast issues surfaced inline (varies by version)

Recommended Workflow

When reviewing a component:

1. Turn on reduced motion
2. Tab through it
3. Check accessibility tree for:
   • role
   • name
4. Run Lighthouse
5. Quick sanity check in VoiceOver/NVDA

If it survives that, it's usually solid.