Survey Form Project - Feedback/help appreciated

Code Feedback
1

Hi

First share so please be gentle :worried: :fearful:.

I would love some feedback on my survey form project if anyone has a few minutes. It passes all the tests and I’m reasonably happy with the html part of it (although it looked pretty ugly) but the css is kicking my butt hard right now :angry: :face_holding_back_tears: :imp:.

I’ve left a bunch of notes to myself throughout the css section to remind me of the things I still need to/want to work on so I won’t repeat it all here but if anyone wants any clarifcation just ask. They’re a mix of personal preferences and feedback from a couple of screen reader users.

I suspect some of them are beyond my current skill level right now, but some of them I’m sure I should be able to do by now but several hours of reading and googling hasn’t come up with anything which I can get to work. I’m open to any suggestions on how to implement any of them with only html and/or css or specific search terms or links that might help because so far mdn, w3schools, html dog & stack overflow have all come up blank.

Thanks in advance

2 
<label for="improvements">
  <input id="improvements" type="checkbox" name="challenges" value="challenges" />Challenges
</label>

<label for="improvements">
  <input id="improvements" type="checkbox" name="forums" value="forums" />Forums
</label>

You’ve got an issue here. Id’s need to be unique on the page, so these two inputs can’t both have an id of improvement. Give each of the checkbox inputs a unique id and then update the for value on their associated labels to match and you’ll solve a big accessibility issue with the checkboxes.

3

Another issue with those check boxes. The text “Areas for improvement?” is the topic of that check box grouping, so I think you want it to be the legend of the fieldset.

This would also apply to the text “Recommend to others?” in the radio button grouping.

4

Thank you. I’ve made the changes you suggested.

One thing don’t understand is that the radio buttons arranged themselves vertically but the checkboxes which have the same css applied to them are still arranged horizontally rather than vertically.

I’m probably missing something stupidly obvious at this point but would you be willing to give me hint please? I’ve been drawing a blank on this since yesterday.

5 
<legend="recommends">

This is not a legal tag in HTML. I would read the MDN docs for legend to see how you do it.

<label for="recommended" id="recommend">
  <label for="yes"><input id="yes" type="radio" name="recommend" value="yes" /> Yes</label>

You can’t nest labels within labels like that.

Fix these issues and you will see that the radio buttons and check boxes both align horizontally.

P.S. The for attributes on your check box lables need to be updated to match the new id’s on the inputs.

6

oof! I always manage to forget those for labels. :woman_facepalming:

That mdn link finally sorted it out. Legends & fieldsets don’t seem to be that intuative right now so I probably need to review some of the earlier steps and try to get a better grasp on it.

Thank you so much for all your help! I really appreciate it.

7

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