Day 9: Check reflow on the Elf Equipment Dashboard

The Elf Equipment Dashboard shows the status of tools and machinery used across Santa HQ. Elves often zoom in to read the dashboard more comfortably, especially on smaller screens or when using screen magnification.

Today, you are checking how well the dashboard layout adapts when the page is zoomed. Some tiles adapt smoothly, while one has a deliberate reflow issue.

Your mission today

Zoom the page between 200% and 400% and check whether content reflows without requiring horizontal scrolling.

Quick 5-minute check

• zoom the page to at least 200% and then 400%
• check that content reflows into a single column where needed
• avoid horizontal scrolling to read text
• watch out for fixed widths and non-wrapping content
• automated tools such as the Web Accesibility Viewer for Elves (WAVE) may provide hints, but visual testing is essential for reflow

---

Test the Elf Equipment Dashboard

The dashboard tiles below behave differently when the page is zoomed.

Wrapping machine

Automatically wraps gifts of all sizes using recycled festive paper. Handles high volumes during peak periods without delays.

Online

Ribbon cutter

Cuts decorative ribbon for wrapped presents, including long personalised messages such as “To the nicest elf in the North Pole workshop 2025”. Requires careful monitoring during busy production periods.

Offline

Sleigh polish station

Maintains sleigh runners and panels to ensure smooth take-off and landing in snowy conditions.

Maintenance

Show answer and explanation

Which tile has the issue

The Ribbon cutter tile does not reflow correctly when the page is zoomed.

What users experience

At higher zoom levels, users must scroll horizontally to read the content in this tile.

This makes reading slower and more difficult, especially for people using screen magnification or small screens.

What works correctly

The other tiles adapt their layout as the page is zoomed, allowing content to be read without horizontal scrolling.

What this checks for

1.4.10 reflow (opens in a new tab) – content must adapt at high zoom and narrow widths without requiring horizontal scrolling.

Why this matters

Many users rely on zoom or screen magnification. If layouts do not reflow properly, content can become difficult or impossible to read.

Bonus challenge

Compare this dashboard at different zoom levels up to 400%. Which tile causes the biggest problem, and why?