Accessibility and visual regression checks

Accessibility checks combine automated rules (axe, eslint-plugin-jsx-a11y) with manual keyboard and screen-reader review. Tests should use semantic queries that fail when labels or roles are missing. Visual regression compares screenshots—Percy, Chromatic, Playwright snapshots—to catch unintended layout and theme drift.

Automated a11y catches many violations but not focus order logic or meaningful alt text; visual diffs need stable fonts and anti-flake thresholds.

On interviews: explain what axe cannot catch and how you prevent visual snapshot noise in CI.

Common pitfalls: snapshotting entire pages with dynamic timestamps, ignoring contrast in dark mode only, and fixing tests by weakening rules instead of UI.

The trade-off is CI cost and baseline maintenance versus catching regressions users notice immediately.

Checklist:

• Run axe in component or page tests for critical views.
• Manually tab through modals and forms.
• Stabilize visual baselines (fonts, animations off).