Looking for feedback on SurveyForm

Code Feedback
1

I learnt a lot doing this one, I rewrote it 3 times because I finally figured out I was targeting the wrong thing while trying to style my text input boxes.

Let me know what I can improve.

2

Hey, a few things to look at:

  • All inputs need labels. So you’ll want to add a label for the cheese select drop down and extra instructions textarea.
  • Consider using a fieldset/legend for the crust radio button grouping and the menu checkboxes grouping:
    https://webaim.org/techniques/forms/controls#checkbox
  • The light purple text on darker purple background does not quite have enough contrast to be accessible. You can check your color contrast at:
    https://webaim.org/resources/contrastchecker/
  • As I go through the form with keyboard only I can’t see the keyboard focus indicator for the radio buttons/check boxes/order pizza button. Use the CSS outline property to make them stand out more and for consistency I suggest you use the same outline for the other inputs as well.
  • As I manually increase the text size the purple box does not get wider to accommodate the increase and thus the input boxes can’t show as many characters and some of the check box content actually breaks out of the purple box. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while pressing the Ctrl key scroll you middle mouse button to increase the text size. I would recommend at the least you do not set a width on the form and instead use a max-width with em units.
1 Like
3

I really appreciate the constructive criticism, this is exactly what I need. I wasn’t aware about the increasing text size. I’m going to go back and study the links you provided and implement these changes.

Thanks again

4

I’m attempting to implement the changes you suggested but when I implement the fieldset tag it forces a border around my checkboxes ruining the look of the form. How does one balance accessibility and aesthetics? Is it acceptable that I just use the legend tag?

I’m also curious as to which tag is more accessible? Legend or label? I can’t have both because they both show up and ruin the look of the page.

How do I use the outline tag without ruing the look of the form?

I implemented the suggestion for the max width with the em units. Thank you very much for that. It works flawlessly.

Thanks in advance for any help you can provide.

5

Your form looks good @Tater. Some feedback;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
  • Change the cursor to a pointer when hovering over the submit button.
  • This is minor, you don’t have to change anything if you don’t want to but ideally the placeholder text should show the format of what the user will put into the input area, not mirror the label. So the name field could show a sample name (Jane Doe) and the email field could show something like pizza@email.com