Autism understanding Survey Form

Code Feedback
1

Hi everyone,

the second project is completed as well.
Autism understanding Survey Form
I would also like to hear your opinion and suggestions for improvement.

Thank you in advance for your answers

Best regards and stay healthy,
Ozan

2
  • First thing that jumps out is that the black text on that background is not accessible (does not have enough color contrast). Either you’ll need to put a background color under the form or go to white text (and if you do this I would bold the text as well).
  • The select lists should not be in a fieldset/legend. They should just have a label.
  • Increasing the text size causes some of the radio button text to break out of its white border. Don’t set height on these in ‘px’, use ‘em’ instead.
  • Make the mouse turn into a pointer when hovering over radio buttons/labels.
  • Saved the biggest for last: you cannot put display: none on the radio button inputs. This is a huge accessibility issue. Your inputs must be active so that they can be used by everyone, those who use a mouse and those who use a keyboard.
1 Like
3

Hi @bbsmooth,

to be honest, I haven’t considered many of the things you described. Such as accessibility.
With the special display of the radio buttons it wasn’t easy either, but I tried to implement your comments.
I would be very happy if you could check my changes

thx a lot

4

It’s getting better for sure, just some keyboard accessibility issues left.

  • The focus indicator for the select lists needs to be more prominent. When I Tab into it there is just a very faint dotted line which is almost the same color of the background and thus I can’t really see it. I would also argue it needs to be better for the Submit button as well.
  • When I Tab into a radio button/check box grouping there is no keyboard focus indicator to show me which radio button/check box currently has focus. A keyboard user should always be able to determine where the current keyboard focus is on the page.
  • Using the Return key while focused on a radio button/check box should not cause the form to submit.
1 Like
5

all good things come in threes. Again some extensions added. I hope it fits now

Thanks a lot