Overview
In Parts 4 and 5, we connected forms to server operations, handled rejected changes, and added accounts and permissions. We will now examine how people find and complete those interactions. A working form can still be difficult to use when its controls overflow a narrow screen or its errors cannot be reached with the keyboard. We will adjust layout, follow focus through form recovery, and make changing feedback understandable while preserving the server’s checks.
The teaching chapters use notices, collections and forms to explore these questions. We will inspect HTML examples in the inline browser views, then follow a date-range form from an invalid submission to correction and a browser regression test. The Svelte and test snippets are worked examples; the two programming exercises supply their own editor files and browser checks.
Continue the marketplace project in marketplace/ after accepted milestone
31. We will apply these ideas to browsing, account forms and bidding, then audit
one repair. A focused keyboard test of a supplied login-recovery fixture gives
automatic feedback on test coverage. The final milestone records the verified
common-core application.
This part has the last marketplace project exercises.
You need HTML headings, labels and controls; Svelte props, state and event handlers; and pending/success/failure states for an asynchronous operation. Review HTML and the DOM, state and reactivity, or forms and form state as needed. CSS layout and accessibility are introduced here.
Part structure
- CSS Fundamentals — How selectors, the cascade and box dimensions affect a component.
- Layout & Responsive Design — Use flow, Grid/Flexbox, content-driven constraints and reflow.
- Accessibility Principles — Connect accessibility principles to concrete user tasks.
- Keyboard, Focus & Forms — Use native controls, visible focus and recoverable form errors.
- ARIA & Dynamic Content — Expose state and announce meaningful updates.
- Auditing Accessibility — Combine automated and manual observations to investigate a barrier.
- Testing Accessible Interactions — Protect form recovery with a browser test and recognize its limits.
- Tailwind CSS: Optional Background — Compare utility classes with component styles.
- Marketplace Project: Make the Marketplace Usable — Apply the interface work and record the verified core application.
- Recap and Feedback — Reflect on the part and give feedback.