Completed the Survey Form: Any feedback would be appreciated

Code Feedback
1

Here is a link to the project: Survey

2

This looks really sharp and overall is quite nice but there are a few accessibility issues I need to point out.

  • All element id’s must be unique. The first two inputs have the same id and thus their associated labels have the same for attribute. I’m guessing maybe this is just a copy/paste error and you forgot to change the id on the second one.

  • outline: none: This is not a good idea unless you replace it with something else. Keyboard users need to be able to see where the current keyboard focus is and the outline property is how this is usually done. I know that a little blinking cursor shows up for the text inputs but this in itself is not enough to meet accessibility standards. Customize the outline property so it fits in with your design. Make sure it can be seen for all inputs/buttons.

  • You can’t use an <svg> for the <label> text, it must actually be text. The label text is used by screen readers to let the user know what the input is for. Technically there are other ways to do this without having to use an actual <label> but I don’t think those are needed here. You have clear label text on the page next to each checkbox and that is the text that needs to be inside the <label>.

  • Also, consider using fieldset/legend for the check box and radio button groupings.

  • When you hover over the check mark it turns black, but the checked state is also black, so if you keep clicking on it then you can’t tell whether it is checked until you move your mouse off of it. I think you need to do something different for hover (or maybe not do anything at all).

  • You should wrap the <form> in a <main>.

Again, nice job with this.

1 Like
3

Thank you for your feedback. I’ll work work on the accessibility issues you’ve pointed out.

4

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