crnjihia/accessible-form-ui

WCAG AA-compliant volunteer registration form for Tech Bridge Kenya — floating labels, custom inputs, ARIA attributes throughout, and multi-section field set layout. # 🙋‍♀️ Accessible Volunteer Registration Form – TechBridge Kenya A gold-standard, fully accessible HTML form built for the fictional **TechBridge Kenya** NGO. This project demonstrates best-practice accessibility combined with modern, elegant UI design, all without heavily relying on JavaScript frameworks. *Designed with inspiration from roadmap.sh.* ## ✨ Features - **Semantic HTML & Accessibility**: - Proper use of ` ` and ` ` for grouping form sections. - Every ` ` is explicitly paired with a ` ` using `for` attributes. - Utilizing `aria-required="true"` and `aria-describedby` to link helper text to inputs for screen readers. - **Modern Floating Labels**: The form uses an elegant, pure-CSS floating label animation. The labels act as placeholders and smoothly glide above the input field upon focus or when text is entered, maintaining a clean aesthetic. - **Custom Form Controls**: Default browser styles for checkboxes and range sliders have been overridden with beautiful, custom-styled CSS alternatives using pseudo-elements (`::before`), ensuring consistent branding across browsers. - **Robust Client-Side Validation**: Utilizes HTML5 form validation, including regex patterns (e.g., enforcing international dial codes on phone numbers). - **Responsive Layout**: Designed to look great on desktop and mobile devices using flexible units and CSS media queries. - **Interactive Feedback**: Includes a tiny JavaScript snippet to display live output values for the experience range slider, and intercepts form submissions to prevent accidental data loss during testing. ## 🛠️ Technology Stack - **HTML5**: Semantic structure and native form validation. - **CSS3**: Variables (Custom Properties), Flexbox, sibling combinators (`+`), pseudo-classes (`:focus`, `:placeholder-shown`, `:valid`), and media queries. - **Vanilla JavaScript**: Lightweight event listeners for live feedback and submission interception. ## 🚀 Getting Started 1. Clone or download the repository to your loc …