Accessible Booking Form

Build an accessible appointment-booking demo as one complete HTML file with inline CSS and vanilla JavaScript. No libraries, CDNs, external resources, network requests, storage, or embedded frames. It must work inside an iframe sandboxed with allow-scripts only. Return only the HTML file.

This is a fictional local-only demo, not a real booking service. Prominently say 'Demo only — use fictional details. Nothing is sent or saved.' Do not submit, persist, log or transmit personal data.

Use a form with id="booking" and novalidate so validation is implemented accessibly. Fields with exact IDs: full-name (required text), email (required email), appointment-date (required native date input), appointment-time (required select with empty initial option, 09:00, 11:00, 14:00), notes (optional textarea), consent (required checkbox acknowledging the demo). Visible labels must be explicitly associated with every field; placeholders alone do not count. Include a Book demo appointment submit button and a Reset button with id="reset".

Use a fixed reference date of 2026-09-05 and display it. Accept weekdays strictly after that date, reject weekends and dates on/before it, using calendar dates without timezone shifts. Trim name and email; reject whitespace-only names and malformed emails. Do not require extra fields.

On invalid submit: prevent navigation, preserve entered values, show inline errors connected to fields via aria-describedby, set aria-invalid only on invalid fields, and show a focusable error summary with id="error-summary". Move focus to that summary; its links must focus the corresponding invalid inputs. On resubmission after correction, clear obsolete errors and attributes.

On valid submit: show a confirmation with id="confirmation" containing the entered details as literal text (never injected HTML), announce success accessibly and move focus to the confirmation. Reset clears fields, errors and confirmation and returns focus to full-name. Everything must be usable by Tab/Shift+Tab, Enter and Space, without a focus trap. Provide visible focus rings, comfortable touch targets, high contrast, and a layout that works at 320px and 200% zoom. Include a short visible keyboard-testing checklist, not an unsupported claim of WCAG certification.