UX10: Capstone: three design projects for SehatSlot
Project 2: a journey that works for everyone
🎯You'll be able to
Complete the prototype project so that all ten prototype tests pass and the journey works by keyboard, screen reader and touch.
🏠The everyday picture
A good building isn't finished when it looks right; it's finished when everyone can get in, find their way and get out safely.
📘What it really is
-
From findings to changes: each critical and serious finding maps to a change in
prototype/(F1 slot picker, F2 errors, F3 back and kept details, F4 empty state, F5 labels, F6 targets, F7 masked phone). -
Markup: real
labels,buttons witharia-pressed,aria-invalidandaria-describedbyfor errors,role="status"androle="alert"for announcements. -
Behaviour: details kept in
sessionStorageacross "Change time"; focus moved to the error summary; an empty state with "Clear search". -
Layout: tokens for colour and space, targets of at least 44 pixels, no sideways scrolling at 320 pixels.
- Check with people: a short session with at least one person on the redesigned journey.
📝A worked example
Input: test 3 failing on the starter ("the 10:30 slot should be reachable with Tab").
Steps:
- Replace the starter's
div.slot-boxelements with<button class="slot" type="button" aria-pressed="false">. - On click, set
aria-pressed="true"on the chosen button andfalseon the others, and update arole="status"line. - Run
npm run test:prototype.
Expected output: test 3 passes. Repeat for each failing test; in the reference, all ten pass in about 10 seconds.
🌍Where it's used
- Product redesigns driven by research.
- Accessibility remediation projects with acceptance tests.
- Portfolios, with before-and-after evidence.
📝Case scenario
A learner's prototype passed tests 1 to 9 but failed test 10: after "Change time", the name field was empty. They had saved details only on submit. Saving on every input, as the reference does, fixed it, and the fix answered finding F3.
🖱️Try it
Pick one failing prototype test on your draft, read its code in tests/prototype.test.js, and explain in one sentence what it checks
before changing anything. Success: your sentence matches what the test does.
⚠️Common mistakes
- Fixing one test, breaking another. Sign: test 7 fails after restyling buttons. Fix: run the whole file after each change.
- ARIA without behaviour. Sign:
aria-pressedthat stays the same after a choice. Fix: update it on every choice. - Raw colours for quick fixes. Sign: Project 3's test 5 fails. Fix: use or add a token.
🛠️For your project
The project page's safety items: no full phone number after booking, and no personal data in the prototype's files.
✅Quick check
What does test 10 check besides the confirmation details?
Show the answer
That typed details survive "Change time", and that only the last four digits of the phone number appear.
Why run the whole prototype test file after each change?
Show the answer
Because a change on one screen can break another check.