A reveal with a reason.

Compare like with like

Capture both versions at matching dimensions and a comparable page position. Keep the business or example context clear. Do not exaggerate the change by distorting one image or showing a deliberately unrepresentative part of the earlier site.

Make the comparison large enough to examine. On DigiThat, it spans the full content width rather than sharing a small card with explanatory copy. The explanation belongs below it, where it can help without shrinking the evidence.

Do not make dragging the admission price

W3C's dragging criterion calls for a suitable single-pointer alternative that does not require dragging. Keyboard support alone is not that pointer alternative. Visible “Before”, “50:50” and “After” buttons provide direct choices for this comparison.

The slider also needs a meaningful accessible name, current value, keyboard operation and visible focus. Provide useful text explaining what changed, because an image comparison is not a substitute for a readable explanation.

Let the visitor control it

Start halfway, avoid automatic looping and honour reduced-motion preferences. Keep the interaction away from essential reading and scrolling. Give someone a way to inspect the complete images without holding the slider in position.

On narrow screens, demonstrate matched mobile layouts. Do not claim that an elegant screenshot proves the underlying website is fast, accessible, secure or profitable. Those require their own checks.

Explain the change

Tell the reader what is different: a more specific service introduction, clearer navigation or a less demanding enquiry path. Describe what the picture supports. Leave invented percentages out of the frame.

A practical checklist

• Use matched dimensions and truthful example labels.
• Provide non-drag buttons as well as keyboard controls.
• Explain the improvements in real text under the comparison.