Friday pass
\nSAR 180
\n\n \n 1\n \n
\n Maha reads Ticketly at 400% zoom on a 13-inch laptop. At that zoom, her browser window is effectively 320 CSS pixels wide. The festival cards, laid out in three fixed 320px columns, force her to scroll sideways on every line of text, which at that magnification means losing her place constantly. Meanwhile the homepage marquee scrolls artist names forever, which gives her colleague Tom, who has a vestibular disorder, a headache within a minute.
\nThis lesson covers what happens when people change the size of your page, and when your page moves on its own.
\nThree criteria work together:
\nIf you build responsively, you are most of the way there. The common culprits are fixed widths and fixed heights. Ticketly’s card grid:
\n.cards {\n display: grid;\n grid-template-columns: repeat(3, 320px);\n gap: 16px;\n}\n.card h3 {\n height: 24px; /* clips the title when text spacing grows */\n font-size: 18px; /* doesn't follow the user's default font size */\n}.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));\n gap: 1rem;\n}\n.card h3 {\n font-size: 1.125rem;\n}The min(100%, 16rem) part matters: on a 320px viewport a 16rem column (256px plus padding) could still overflow, and min() lets the column shrink to the container. Sizing text in rem means it scales when a user sets a larger default font size in their browser, which zoom alone doesn’t cover.
To test reflow, set your browser window to 1280px wide and zoom to 400%, or use responsive mode at 320px. Scroll vertically through the whole page. Any horizontal scrollbar, overlapping text or cut-off button is a bug.
\nYou met 2.5.8 Target Size (Minimum) in WCAG 2.2, POUR and the Law: pointer targets of at least 24 by 24 CSS pixels, or enough spacing around smaller ones. Ticketly’s quantity stepper used 16px icon buttons touching each other. The fix is padding, not bigger icons:
\n.stepper button {\n min-inline-size: 2.75rem; /* 44px, comfortably above the 24px minimum */\n min-block-size: 2.75rem;\n}Aim higher than the minimum for primary actions on touch screens. Apple’s and Google’s platform guidelines suggest around 44 to 48 pixels, and people with tremor will thank you.
\nMovement causes two different problems. Content that moves on its own competes for attention, which is a real barrier for people with attention disorders and anyone reading slowly. And large motion, such as parallax, zooming transitions or sliding panels, can trigger dizziness and nausea in people with vestibular disorders.
\nWCAG addresses the first with 2.2.2 Pause, Stop, Hide (A): anything that starts automatically, moves (or blinks or scrolls) for more than five seconds and appears alongside other content needs a way to pause, stop or hide it. 2.3.1 Three Flashes or Below Threshold (A) forbids content that flashes more than three times in any one second, unless the flashes are small and dim enough to stay under the flash thresholds, because flashing can trigger seizures.
\nFor the second, operating systems let users ask for reduced motion (on macOS: Accessibility, Display, Reduce motion; on Windows: Accessibility, Visual effects, Animation effects off), and CSS can read that setting:
\n.marquee__track {\n animation: scroll-names 20s linear infinite;\n}\n.marquee--paused .marquee__track {\n animation-play-state: paused;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .marquee__track {\n animation: none;\n }\n .card {\n transition: opacity 0.2s; /* a fade instead of a slide */\n }\n}<button type=\"button\" class=\"marquee-toggle\" aria-pressed=\"false\">Pause animation</button>The pause button is still needed: many people who are bothered by motion never find the system setting, and 2.2.2 requires a control on the page. “Reduced” doesn’t have to mean “none”. A short fade or colour change rarely causes trouble; it is large movement across the screen that does.
\nJavaScript-driven animations need the same check. window.matchMedia('(prefers-reduced-motion: reduce)').matches tells you the current preference, and you can listen for its change event to react if the user changes it while the page is open.
Ticketly now holds together when people zoom it, space its text, tap it with a shaky hand or ask it to keep still. The next lesson returns to the accessibility tree and looks closely at how every control gets the name a screen reader speaks.
\n","toc":[{"id":"sec-1","text":"Zoom and reflow","level":2},{"id":"sec-2","text":"Target size, revisited","level":2},{"id":"sec-3","text":"Motion: pause it, and respect the preference","level":2}],"takeaways":["Content must reflow into a 320 CSS pixel wide viewport, the width of a 1280px window at 400% zoom, without horizontal scrolling.","Size text in rem, avoid fixed heights on text containers, and never disable pinch zoom in the viewport meta tag.","Anything that moves on its own for more than five seconds needs a way to pause, stop or hide it (2.2.2).","Wrap non-essential animation in a prefers-reduced-motion check, replacing big movement with fades or nothing."],"further":[{"title":"W3C: Understanding 1.4.10 Reflow","url":"https://www.w3.org/WAI/WCAG22/Understanding/reflow.html"},{"title":"MDN: prefers-reduced-motion","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"},{"title":"W3C: Understanding 2.2.2 Pause, Stop, Hide","url":"https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html"},{"title":"W3C: Understanding 1.4.12 Text Spacing","url":"https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html"}],"quiz":[{"q":"Why does 1.4.10 Reflow test at a width of 320 CSS pixels?
","options":[{"text":"It is the width of the smallest phone still sold","why":"Phones are a side benefit. The number comes from desktop zoom, not from a device list."},{"text":"A 1280px wide browser window zoomed to 400% has a viewport of 320 CSS pixels","why":"Correct. Someone with low vision at 400% zoom on a laptop gets the same layout as a narrow phone, so a responsive layout serves both."},{"text":"It is the default minimum width in CSS grid","why":"CSS grid has no such default. The value comes from the zoom calculation in the Understanding document."}],"answer":1},{"q":"Which viewport meta tag fails WCAG 1.4.4 Resize Text?
\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">Ticketly’s hero banner auto-scrolls artist names in a marquee forever. What does WCAG 2.2 require at Level A?
","options":[{"text":"A visible control to pause, stop or hide it, because it moves for more than five seconds","why":"Correct. 2.2.2 Pause, Stop, Hide applies to moving content that starts automatically, lasts more than five seconds and sits beside other content."},{"text":"Nothing, as long as it stops when prefers-reduced-motion is set","why":"Honouring the preference is good practice, but many people who are distracted by motion never set it. 2.2.2 requires a control on the page."},{"text":"An aria-live region so screen readers announce each new name","why":"That would flood screen reader users with announcements. The issue is the motion itself, not missing announcements."}],"answer":0},{"q":"Which CSS respects a user’s reduced-motion setting for Ticketly’s sliding cards?
","options":[{"text":"@media (prefers-reduced-motion: no-preference) { .card { transition: none; } }","why":"This removes the animation for the users who didn’t ask for less motion, and keeps it for those who did. The condition is backwards."},{"text":".card { transition: transform 0.4s; } @media (prefers-reduced-motion: reduce) { .card { transition: opacity 0.2s; } }","why":"Correct. The default keeps the slide, and the media query swaps it for a short fade when the user has asked for reduced motion."},{"text":"@media (motion: reduce) { .card { transition: none; } }","why":"There is no motion media feature. The feature is prefers-reduced-motion."},{"text":".card[aria-reduced-motion] { transition: none; }","why":"No such ARIA attribute exists. Users set the preference in their operating system, and CSS reads it with prefers-reduced-motion."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"SAR 180
\nSAR 180
SAR 320
SAR 180
\nSAR 180
SAR 320
Ticketly’s homepage scrolls artist names forever, forces a three-column grid of fixed 320px cards, and uses 16px stepper buttons. Fix it:
\n@media (prefers-reduced-motion: reduce) block that turns off the .marquee__track animation.animation-play-state: paused)..cards grid reflow so nothing scrolls horizontally in a narrow viewport (the preview is only about 300px wide)..stepper buttons at least 24 × 24 CSS pixels.The media query removes the marquee’s movement for everyone who has asked their operating system for reduced motion, and the pause button covers everyone else, which is what 2.2.2 Pause, Stop, Hide requires. auto-fit with minmax(min(100%, 16rem), 1fr) lets the grid fall back to a single column, so a 400% zoom (or a phone) never needs horizontal scrolling. The stepper buttons grow to 44px, well above 2.5.8’s 24px minimum, without making the icons themselves bigger.