Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Contact Form with HTML, SCSS, and JS

@sonmikrafft

Desktop design screenshot for the Contact form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Custom Checkboxes and Radio Buttons, Snackbar with Animation

Community feedback

P

@Jolijn0101

Posted

Hi Sonja, Congratulations on finishing this project. The form looks great. When I fill in the form with voice over on Mac then it doesn’t read out the e-mail address label. Maybe it has something to do with the for attribute in the label tag for the e-mail input. It has now a value for fname instead of email.

If you would like to make this form accessible with the keyboard then I must admit that the radio buttons, checkbox and submit button were skipped. They seem not to receive focus on them.

The error messages become visible but they weren’t read out by the screen reader. If you have interest in making those error messages more accessible maybe this video tutorial could be of a great help: https://www.youtube.com/watch?v=5lzAj1ahRSI

The Snackbar animation is awesome and I love the way you made custom radio and checkboxes only with scss.

I hope this feedback was useful even though you didn't specifically ask for it. I am currently doing the accessibility learning path and giving feedback to others is a mandatory part of it.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord