Contact Form
An accessible contact form, with a simple validation system using Zod. A challenge by Frontend Mentor.
Links
Media
Desktop
Tablet
Mobile
The challenge
Users should be able to:
- Complete the form and see a success toast message upon successful submission
- Receive form validation messages if:
- A required field has been missed
- The email address is not formatted correctly
- Complete the form only using their keyboard
- Have inputs, error messages, and the success message announced on their screen reader
- View the optimal layout for the interface depending on their device’s screen size
- See hover and focus states for all interactive elements on the page
My process
Built with
What I learned
I (somewhat) learned how to focus a div element with proper role and tabindex attributes? Seems very difficult, as the whole dialog wasn’t announced, but at least the main heading was. I need more practice with this.
There was a lot of Googling to make sure the form was accessible. And having to deal with native HTML elements being weird across different browsers. All in all, I’m quite happy with the end result, even though the code was very messy in the end.
Continued development
Definitely feel like I need to practice more with accessibility. I’m not sure how to make the whole dialog focusable, but I’ll figure it out eventually. I never thought about the concept of accessibility, but I’m glad I’m learning about it now.
Useful resources
- Web ARIA Alert Box - This didn’t seem to help VoiceOver much, but it worked for the heading announce.