HTML and CSS accessible public forms system
A bilingual public forms system built with semantic HTML, modern CSS, and progressive JavaScript for keyboard access, responsive reflow, clear errors, local drafts, and operation without JavaScript.
Project definition
Problem statement
Public forms can fail when labels, grouping, keyboard order, errors, targets, language, and responsive layout are treated as visual details.
The project must preserve a complete usable baseline when JavaScript is unavailable while adding clear enhancement without a frontend framework.
Project objectives
- Build benefit, grievance, and certificate-request journeys in English and Hindi.
- Provide semantic controls, visible focus, responsive reflow, clear error summaries, and localized messages.
- Save versioned local drafts with explicit restore and deletion.
- Measure all routes across viewport, JavaScript, and theme conditions.
Project structure
Project components
Generated form pages
Builds six consistent pages from shared journey and language definitions.
Design system
Defines readable type, spacing, colours, themes, focus, controls, messages, and responsive layout.
Progressive controller
Adds steps and localized error recovery while keeping all form sections in the HTML baseline.
Draft storage
Saves, migrates, restores, sanitizes, and deletes versioned IndexedDB drafts.
Offline shell
Caches declared same-origin pages and assets with a versioned service worker.
Quality laboratory
Runs unit tests, browser workflows, axe-core scans, a 96-condition matrix, and 24 injected defects.
Methodology
Project workflow
- 01Choose a journey and language
The user opens one of three prepared services in English or Hindi.
- 02Complete the form
Visible labels, hints, grouping, native controls, and logical keyboard order support entry.
- 03Recover from errors
A focused summary and linked inline messages identify each correction.
- 04Save or delete a draft
Synthetic progress stays in the browser and can be explicitly removed.
- 05Submit locally
The demonstration server discards the request body and redirects to a synthetic confirmation.
Demonstration scenario
A user opens a Hindi grievance form on a narrow screen, completes it with the keyboard, corrects linked validation errors, saves and restores a synthetic draft, then deletes the local copy. The same form remains available when JavaScript is disabled.
Engineering
Tools and method
- Native structure
- Semantic landmarks, headings, labels, descriptions, fieldsets, legends, buttons, and inputs.
- Responsive presentation
- CSS custom properties, light and dark themes, reflow, target sizes, focus, and reduced motion.
- Progressive behaviour
- Small JavaScript modules and a Web Component that preserve the complete HTML baseline.
- Local resilience
- IndexedDB draft schema and a versioned same-origin service-worker cache.
- Verification
- Locked pnpm tools, unit coverage, Playwright workflows, axe-core, HTML mutation testing, Docker, and CI.
Testing
Evaluation
Evaluation measures
- 96 of 96 prepared browser conditions returned successfully
- No horizontal overflow or labelled-control failure in the matrix
- No serious axe-core finding across 48 JavaScript-enabled scans
- 18 unit tests and 22 browser tests passed
- 11 of 24 injected defects detected, with automation gaps retained and discussed
Project boundaries
- The project uses synthetic data and is not an official public service.
- The local server discards submitted bodies and creates no applicant record.
- Automated results are not a WCAG conformance certificate.
- Production use requires service ownership, privacy, security, translation, cross-browser, assistive-technology, and user evaluation.
Included
- 01Six accessible form pages, shared design tokens, validation modules, draft storage, service worker, and local server
- 02Prepared sample data and demonstration scenarios
- 03Automated tests and measured results
- 04Complete source code in a private GitHub repository
- 05Complete project documentation in PDF and editable Word formats with synopsis, abstract, methodology, architecture diagrams, test results, screenshots, and conclusion
- 06Setup and usage guide
Project record
No information is collected on this page.
- Permanent project ID
- GP-CS-0F0P1HI
- Catalogued
- 21 Aug 2026
- Completed
- 26 Aug 2026
- Verified
- 26 Aug 2026
- Demonstration
- Included in repository
Handover
After purchase
- 01Payment is confirmed
The project is marked unavailable and cannot be purchased again.
- 02Repository access is granted
The buyer's submitted GitHub account receives access to the private repository.
- 03The purchase record is delivered
The certification sheet is prepared from the reviewed buyer details and sent privately by email.