How to build an accessible Comparison in React

The divider is a role="slider" with aria-valuemin/max/now and full keyboard support (Arrow/Home/End/PageUp/PageDown); aria-orientation reflects the axis so the value and direction are conveyed without sight

When to use a Comparison

• Showing the difference between two versions of similar content (before/after edits, original vs processed)
• Letting users interactively reveal one image or panel over another
• Side-by-side visual demos where a draggable divider is clearer than two static images

When not to use it

• Comparing more than two items — use a layout or table instead
• Non-visual data comparison — use a table or chart
• Static side-by-side images with no need for an interactive reveal

Keyboard interactions

Role slider, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• ArrowUp
• ArrowDown
• Home
• End
• PageUp
• PageDown

Common mistakes

Avoid: <Comparison before={<Before />} after={<After />} /> with no label

Prefer: <Comparison label="Reveal edited photo" before={<Before />} after={<After />} />

The divider is a slider; without a label assistive tech announces an unnamed control

Example

<Comparison before={<img src="/edited.jpg" alt="" />} after={<img src="/original.jpg" alt="Original" />} label="Reveal edited image" />

See the full Comparison reference →