Support visual preferences and reflow

People change how the page looks to make it usable for them. They zoom to 400 percent, force their own colors, turn off animation, or open the page on a narrow phone. Your job is to keep the content and the controls working under all of it. The relevant criteria are WCAG 1.4.10 Reflow and 1.4.3 Contrast (Minimum), both Level AA, and 1.4.1 Use of Color, Level A.

Let people zoom

The flawed page starts by forbidding it:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

On a phone that blocks pinch zoom completely. Delete the last two directives:

<meta name="viewport" content="width=device-width, initial-scale=1">

Then look at the layout. The registration column is fixed at 960 pixels, so at 400 percent zoom on a 1280 pixel screen, which is a 320 pixel wide viewport, the form runs off the right edge and the user scrolls sideways for every line. Reflow says text content must fit in 320 CSS pixels without two-dimensional scrolling. Swap the fixed width for a flexible one:

.register {
  width: 100%;
  max-width: 60rem;
}

To test without a zoomed monitor, open DevTools, toggle the device toolbar, and type 320 into the width field. On the repaired page there’s no horizontal scrollbar. The schedule table is the allowed exception: data tables can scroll sideways, as long as they do so inside their own container and not the whole page.

Color is a hint, not the message

The guest list marks each guest with a green or red dot: registered or on the waiting list. Nothing else distinguishes them. Around one in twelve men has some form of color vision deficiency, and everyone loses the dot in forced colors mode.

Add the word:

<span class="status status--ok">Registered</span>
<span class="status status--wait">Waiting list</span>

Keep the color. Add the text. The same rule applies to the red field borders from the errors lesson: the border can stay red, but the message in text is what carries the meaning.

Contrast you can measure

The hint text under the fields is #999 on white. Select the element in DevTools, click the color swatch, and the contrast line shows 2.85 with a warning icon. WCAG asks for 4.5:1 for normal text. Change it to #595959 and the same line reads 7.0 with a checkmark.

Motion and forced colors

After registering, the page fires a confetti animation for three seconds. Some users get dizzy or nauseous from motion. Respect their system setting:

@media (prefers-reduced-motion: reduce) {
  .confetti {
    animation: none;
  }
}

In Windows High Contrast mode, background colors disappear, so the Register button becomes bare text on the page. Give it a border that survives:

@media (forced-colors: active) {
  button {
    border: 2px solid ButtonText;
  }
}

Try this on your own page: test it at 400 percent zoom, at 320 pixels wide, with forced colors on, and with reduced motion on. Write down anything you could no longer read or operate.