Reflow & Zoom Accessibility Test

Demonstrating compliant and non-compliant behaviors.

Welcome to Our Accessibility Demo

This section uses responsive design principles to adapt to various screen sizes and zoom levels.

Resize Text & Spacing – Accessibility in Action

These examples demonstrate correct and broken behavior based on WCAG 1.4.4 (Resize Text) and 1.4.12 (Text Spacing). Resize your browser’s font settings or zoom to test both.

✅ Accessible Text

This uses rem for font-size, allows line height, paragraph, letter, and word spacing to grow. Try increasing your font size — nothing will break or clip.

Text reflows and maintains readability at all zoom levels.

❌ Fixed & Clipping Text

This text uses:
– Fixed px font size
– Fixed height
– No spacing
– No reflow

Zoom in or enlarge text. It will clip, overflow, or become unreadable.

❌ Too Long + No Breaks

When font size increases, this block causes horizontal scrolling, broken layout, and unreadable paragraphs. It violates WCAG 1.4.4 and 1.4.12.

✅ Spacing Pass

Meets WCAG 1.4.12:
✅ Line-height ≥ 1.5
✅ Paragraph spacing ≥ 2× font
✅ Letter-spacing: 0.12em
✅ Word-spacing: 0.16em