Project Feedback for my survey form

I’ve recently come back to FCC, picked up where I’ve left off and started these projects again. I struggled to come up with a form “subject” so it’s not exciting from that standpoint, just placeholders really, but hopefully I got the technical aspects correct.

One thing I did notice was I cannot tab through the radio buttons with the keyboard. I’m not sure what I did wrong there? If I tab through the form, it only lands on the first radio button and then goes to the check boxes.

As a final bit, I know there’s a term or name for the design style I attempted to use but I cannot for the life of me think of it. Anyone know?

Thank you for your time and feedback.

FCC: Survey Form Project (codepen.io)

Overall this is very nice.

Concerning the Tab issue, I am able to Tab through the radio buttons and I don’t see any accessibility issues with them. Have you tried with a different browser?

There are some other accessibility issues though:

  • You can’t use a <label> like that for the “Radio Buttons” heading. A label must always go with an input. I think what you want it to use a fieldset and legend for the radio and check box groupings.

  • The <select> does not have a label associated with it. The label you intended to use has the wrong id in the for attribute.

  • Wrap the form in a <main>. You should always have one <main> and it should wrap the main contents on the page.

  • Don’t use <br> to create vertical space between elements. Use CSS margin/padding to do this. Add wrapper <div> around groups of elements if you need them to help with styling.

1 Like

Thank you for the great feedback. I think I addressed the bulleted points in your comment and got the form looking the way it did initially. I appreciate you taking the time to look through it and reply!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.