Final assessment

Twelve questions across the whole course. Score 70% or more to pass and unlock your certificate. You can retake it as often as you like.

Finish every lesson to earn the certificate — you can take the assessment any time.

Which change fixes the most problems at once?

HTML

<span class="link" onclick="go('/faq')">FAQ</span>

Ticketly’s buttons use white 14px text on #5b3cc4, a ratio of 7.27:1. How does this rate against WCAG contrast criteria?

A long registration form is submitted with three errors. Where should focus go?

To an error summary at the top listing the three problems as links to their fields
Nowhere; the red borders show which fields are wrong
To the submit button, so the user can try again

A text-formatting toggle uses aria-pressed, and its label also switches from “Bold” to “Unbold” when pressed. What is the problem?

aria-pressed only works on checkboxes
Toggle buttons must use aria-expanded instead
Changing both the label and the state gives a confusing announcement such as “Unbold, toggle button, pressed”; keep the label constant

A user deletes the last ticket in their basket, and the Remove button they pressed disappears. Where should focus go?

Nowhere; the browser handles it
To the site logo
To the first link in the footer
To the basket heading or a “Your basket is empty” message made focusable with tabindex=“-1”

Two 20 × 20 px icon buttons have their centres 30 px apart. Do they meet 2.5.8 Target Size (Minimum)?

No, every target must be at least 24 × 24 px
Yes, under the spacing exception: 24 px circles centred on each target don’t overlap each other or the other target
Yes, because icon buttons are exempt

An English article on Ticketly quotes a French review in a blockquote. What does WCAG require?

lang="fr" on the blockquote, so screen readers switch to French pronunciation (3.1.2 Language of Parts)
dir="rtl" on the blockquote
Nothing, because the page already has lang=“en”

After each click on Add to basket, Ticketly uses role="alert" to say “Ticket added”. What is the problem?

Alerts are never announced by screen readers
Live regions can’t contain the word “added”
alert is assertive and interrupts speech; a routine confirmation should use role=“status”
The message should be in the page title instead

Which testing method would reveal that a modal dialog leaves keyboard focus on the page behind it?

An axe scan of the page with the dialog closed
Checking colour contrast with the DevTools picker
Validating the HTML
Opening the dialog with the keyboard and pressing Tab, or watching document.activeElement

What is wrong with this link?

HTML

<a href="/artists/nour"><img src="nour.jpg" alt="Nour Quartet"> Nour Quartet</a>

The image needs role=“img”
The name becomes “Nour Quartet Nour Quartet”; the image should have alt=“” because the text already names the link
Links can’t contain images

Which of these WCAG 2.2 criteria is Level AAA and so not required for an AA conformance claim?

Ticketly’s JavaScript auto-scrolls a carousel of artists. How should the code respect a reduced-motion preference?

Check navigator.reducedMotion before starting
Ask the user with confirm() on every page load
Check window.matchMedia('(prefers-reduced-motion: reduce)').matches and don’t start auto-scrolling when it is true, keeping a pause control either way

12 questions unanswered