Accessible Form UI

An accessible, user-friendly form UI built with a focus on usability, inclusivity, and best practices in web accessibility.

🔗 Live Demo

👉 https://mch-codes.github.io/Accessible-Form-UI/

This project demonstrates how to build forms that are usable by everyone, including users relying on assistive technologies.

---

📌 Features

• Semantic HTML structure
• Accessible form labels and inputs
• Proper error handling and validation feedback
• Keyboard navigation support
• Screen reader-friendly design
• Responsive layout

---

🧠 Accessibility Principles

This project follows key accessibility practices such as:

• Using proper <label> associations for inputs
• Providing clear validation messages
• Supporting full keyboard navigation
• Ensuring sufficient color contrast
• Leveraging ARIA attributes only when necessary

Accessible forms should always prioritize native HTML elements and semantics before adding ARIA enhancements (hmig.github.io).

---

🛠️ Tech Stack

• HTML5
• CSS3
• JavaScript (Vanilla)

---

📂 Project Structure

Accessible-Form-UI/
│── index.html
│── style.css
│── script.js
│── README.md

---

🚀 Getting Started

Clone the repository:

git clone https://github.com/mch-codes/Accessible-Form-UI.git
cd Accessible-Form-UI

Open index.html in your browser.

---

🧪 Accessibility Checklist

• All inputs have associated labels
• Errors are announced to screen readers
• Form is fully navigable via keyboard
• Clear focus states for interactive elements
• Instructions provided before user input

---

🤝 Contributing

Contributions are welcome!

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Submit a pull request

---

📄 License

This project is open source and available under the MIT License.

---

💡 Inspiration

This project is inspired by common accessibility patterns and best practices for building inclusive web forms, including guidance around semantic HTML and proper error handling (GitHub Docs).

---

👨‍💻 Author

Created by mch-codes

---