Multi-Step Form Example

A simple and intuitive multi-step form implementation focused on user experience and accessibility.

Overview

This project demonstrates a multi-step form using semantic HTML, vanilla JavaScript and CSS. It focusses UX and accessibility standards.

Features

• Clean step-by-step form progression
• Accessible form controls and navigation
• Visual progress indicators
• Form validation
• Responsive design
• Keyboard navigation support

Technologies

• HTML
• CSS
• JavaScript
• ARIA attributes for accessibility

JSFiddle

Here is a link to a JSFiddle of the project you can start playing with. Contributed by GitHub user @appel.

Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/multi-step-form.git

2. Open index.html in your browser

Usage

• Navigate through form steps using 'Next' and 'Previous' buttons
• Required fields are clearly marked
• Progress bar shows current position in the form flow
• Form data is validated before proceeding to next step

Accessibility Features

• ARIA labels and roles
• Keyboard navigation
• Clear focus states
• Error messaging
• Screen reader friendly

License

MIT License