Checkpoint: Visual Design and Content

Five questions on this section. Answer all of them, then see your score and why each answer is right or wrong.

A Ticketly section heading is 24px, regular weight, with a contrast ratio of 3.2:1. Does it meet 1.4.3 at Level AA?

No, all text needs 4.5:1
No, headings need 7:1
Yes; 24px counts as large text, which needs 3:1
Yes, because headings are exempt from contrast requirements

At a 320px viewport, Ticketly’s page reflows, but the wide festival schedule table scrolls horizontally inside its own container. Does this fail 1.4.10 Reflow?

No; content that needs two dimensions, like data tables, is exempt, as long as the rest of the page reflows
Yes; nothing may ever scroll horizontally
Yes, unless the table is replaced with an image

What is the accessible name of the search input?

HTML

<input id="q" placeholder="Search events" aria-labelledby="go">
<button id="go">Search</button>

“Search events”
No name, because aria-labelledby can’t point at a button
“Search events Search”
“Search”

Ticketly’s hero uses a parallax effect: the background moves at a different speed when scrolling. A user has set Reduce motion in their operating system. What should happen?

Nothing; parallax is triggered by the user’s own scrolling, so it is acceptable
Inside a prefers-reduced-motion: reduce media query, turn the parallax off and show a static background
Show a dialog asking whether they want animations

Ticketly launches a fully Arabic version of its site. What belongs on the root element?

<html lang="en" dir="rtl">
<html lang="ar"> only, with direction: rtl in CSS
<html dir="auto">
<html lang="ar" dir="rtl">

5 questions unanswered