Accessibility Tools

Accessibility Simulator

Paste markup below to preview colour-vision filters, reduced motion, focus outlines, and screen-reader summaries—all while running automated ARIA audits using axe-core.

Markup preview

Tweak the settings to emulate how different users experience your interface. The sample markup is fully editable.

HTML snippet

Tip: Keep it under ~3k characters for smooth rendering inside the preview.

Colour simulation

Original colours without any transformations.

Motion & focus

Simulate reduced motion (disable animations & transitions)

Emphasise keyboard focus outlines

Live preview

Standard vision

Run accessibility audit

Uses axe-core to surface violations and incomplete checks on the rendered preview.

Screen-reader summary

Quick view of heading hierarchy, landmarks, and labelled elements.

Headings (0)

No headings detected.

Landmarks (0)

No landmark regions (header, main, nav, footer, roles) were found.

Labelled controls (0)

Add aria-label or aria-labelledby to interactive elements where necessary.

Keyboard & motion checklist

Press Tab to move through interactive elements in the preview. Use Shift + Tab to move backwards.

Toggle colour modes to catch contrast issues. Consider adding manual contrast testing for critical text/background pairs.

Reduced motion users may prefer instant transitions. Ensure animations convey non-critical information or provide an alternative.

For full audits, pair this simulator with manual screen-reader testing in VoiceOver, Narrator, or NVDA.

Need deeper testing?

After refining your markup, export the snippet to PDFs for stakeholder reviews or handoff. Consider running dedicated contrast tools and manual assistive tech checks for production launches.

Explore the full axe DevTools suite

More accessibility utilities

Coming soon: colour contrast matrix, focus order visualiser, and live voice-over transcript inspection—all running directly in the browser.