Project Feedback: Build a Survey Form

Code Feedback
1

Hi. everyone! I’d like to share my work and receive some feedback on my survey form certification project.

You can check the output here, and the code repository here.

Looking forward to hear your thoughts! If you’d prefer, you can also contribute to the repo by writing your suggestions in an issue :smiley:

Many thanks,
Dave

2

This looks great. The only thing I would point out is that the light blue background on the Apply button is not quite dark enough to have sufficient color contrast with the white text to be considered accessible. Right now the contrast ration is 2.72:1 and it needs to be a minimum of 4.5:1.

You can check contrast ratios using the WebAIM Contrast Checker.

Also, I would suggest you put a darker border around the inputs. The background color you are using is not much different from the white form background and thus it could be hard for people with color vision problems to determine that there is an input box below each of the labels. Yes, this is an application form and thus you might consider it to be obvious. But it never hurts to make things more obvious than they might need to be.

Also, on my Firefox, if I put keyboard focus on the apply button, the focus indicator is the same color as the button background, so it is impossible to see. Yes, the button does get a little bit bigger, but I think making the focus outline stand out a little more would be nice.

If I were being super picky I would say to lose the placeholder text, but I understand it is a requirement for the form. Placeholder text is almost never necessary and it just adds extra noise for screen reader users. Also, it could potentially be confusing for sighted users because the field could be mistaken as already filled in. And the default color contrast for placeholder text is never good enough to be accessible. So that’s my rant on placeholder text :slightly_smiling_face:

But overall, this is an excellent job.

1 Like
3

Thank you very much for your feedback!

I did the following:

  1. Changed the button color to a darker shade to meet the minimum contrast ratio.
  2. Added a darker shade of the input’s background color as it’s border outline.
  3. The button’s background color now changes when in focus to increase contrast with the focus outline.
  4. I left the placeholder text as is to meet the project requirements. As a consequence, I also couldn’t change the default placeholder text color, as increasing the contrast might confuse users into thinking that it’s already filled.

I hope you don’t mind, I gave credit to your feedback in my git commit message. :smile:

Thanks, this means a lot!