Exercises

Ten graded exercises. The first eight are broken pages to fix; the last two are audits to perform and report on. Each has explicit acceptance criteria, so you can tell when you are finished rather than guessing.

How to work

Each exercise is a folder containing a README.md with the task and its acceptance criteria, and (for exercises 1–8) an index.html to fix. Edit the HTML directly. Test with a keyboard and a screen reader before you check it off — npm run test:a11y will not catch most of what these exercises are about.

The ten exercises, in order of difficulty
#	Exercise	Difficulty	Main criteria	Files
1	Image gallery	●○○○○	1.1.1, 4.1.2	README
2	Sign-up form	●●○○○	1.3.1, 3.3.2, 1.3.5, 1.4.1	README
3	Page structure and navigation	●●○○○	2.4.1, 1.3.1, 2.4.6	README
4	Modal dialog	●●●○○	2.4.3, 2.1.2, 4.1.2	README
5	Data table	●●○○○	1.3.1, 1.4.10	README
6	Carousel	●●●○○	2.2.2, 4.1.2, 4.1.3, 2.3.3	README
7	Custom dropdown	●●●●○	2.1.1, 4.1.2, 2.4.7	README
8	Checkout errors	●●●●○	3.3.1, 3.3.3, 3.3.4, 1.4.1	README
9	Audit a single page	●●●●○	WCAG-EM Step 4	README
10	Audit a process and write the report	●●●●●	All five WCAG-EM steps	README

Exercise 7 is the important one

It asks you to solve the same problem twice: once with a native <select>, and once by rebuilding the custom widget properly with ARIA. Part A is about ten lines. Part B is about a hundred and you will still be finding edge cases afterwards. That comparison is the most useful thing in this whole section — the first question to ask about any custom widget is whether HTML already has one.

These pages are broken on purpose

Every index.html under exercises/ contains deliberate defects. Do not copy from them. The corrected patterns live in each criterion's pass.html.

For instructors

Worked solutions are in exercises/SOLUTIONS.md, and the seeded defect register for the audit exercises is in evaluation/sample-site/INSTRUCTOR-ANSWER-KEY.md. Both are in the repository but are not linked from the student-facing navigation.