This project is a responsive and accessible contact form created as part of a Design & UX course within my web development program. The assignment's goal was to build a semantic and accessible HTML/CSS form based on WCAG 2.1 level AA guidelines.
- Keyboard Navigation: All form elements are fully tabbable and operable via keyboard.
- Semantic HTML: Uses
<form>,<label>,<fieldset>,<legend>,<input>,<textarea>, and<button>correctly. - Proper Labeling: All inputs are labeled using
forattributes; ARIA attributes used where appropriate. - Color Contrast: Verified with WebAIM Contrast Checker – all elements exceed the required 4.5:1 ratio.
- Focus Styling: Clear visual outlines help users identify current focus.
- Responsive Design: The layout adapts smoothly across screen sizes and zoom levels (tested up to 200%).
- Screen Reader Support: Decorative images are marked with
aria-hidden="true"andalt="". - Language:
lang="sv"is specified for Swedish content. - Validated Code: HTML passes W3C validation with no critical errors. Minor warnings explained in comments.
This is my first fully accessible form built from scratch, and I followed a Figma design closely. I also personalized the code with comments in Swedish for my teacher, explaining my design and accessibility decisions.
form.html– The full form with accessibility featuresstyle.css– All styles, including responsive layout and focus states- (Optional)
README.md– This file
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- W3C HTML Validator: https://validator.w3.org/
The project meets all WCAG 2.1 AA requirements for:
| Requirement | Status |
|---|---|
| Semantic HTML | ✅ |
| Keyboard Support | ✅ |
| Contrast Compliance | ✅ |
| Proper Labeling | ✅ |
| Responsive Layout | ✅ |
| Language Attribute | ✅ |
| Code Validation | ✅ |
Thanks for reviewing my work! 😄