Build keyboard order inside the persistent Incident summary: Keyboard order starter project.
Accessibility
altaria-labelrolefocuscontrast
Add the exact form and connected h2 for Keyboard order. The lab uses no action or submission method.
Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.
Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.
Add the exact form and connected h2 for Keyboard order. The lab uses no action or submission method.
Target index.html · Replace the placeholder inside main. Evidence The form-like practice region has an accessible name and no destination. Snippet<form aria-labelledby="form-title" novalidate>
<h2 id="form-title">Keyboard order</h2>
</form>
Next up
Add the exact label, email input, required state, and described help text.
Target index.html · Inside the form after its h2. Evidence The label for, input id, and help id relationships all match. Snippet<label for="field-keyboard-order">Email for course notes</label>
<input id="field-keyboard-order" name="email" type="email" required aria-describedby="field-keyboard-order-help">
<p id="field-keyboard-order-help">Use a complete email address.</p>
Next up
Add the exact status message and type=button control, then Run and Check.
Target index.html · After the help text inside the form. Evidence A status region and non-submitting button provide a clear simulated outcome. Snippet<p id="field-keyboard-order-status" role="status">Ready to review locally.</p>
<button type="button" aria-describedby="field-keyboard-order-status">Review details</button>
Next up
Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.
Checking account status...
Progress sync is idle.
Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.
Complete a project-shaped keyboard order build while preserving each passing edit.
Start with the Current task. Open index.html, use Show exact edit when needed, Run, then follow the highlighted next task.
Accessibility becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.
Run
Render a simulated preview from the current lesson snippet.
Check
Save the lesson after the required task snippets are complete.
Hint
Show the lesson hint without changing progress.
Reset
Clear local Web lab scratch state for this browser.