If you have time, let me know what you think about my survey form.
1 Like
Some accessibility concerns:
- The placholder text is unreadable, as is the red error text for the inputs. The light blue text on the drop downs isn’t as bad but still doesn’t meet accessibility requirements. They all need more color contrast with the black background. You can check color accessibility at
https://webaim.org/resources/contrastchecker/ - The select drop downs are not keyboard accessible. I can Tab to them but I can’t select anything with the arrow keys. I see you are using a custom component for them. You do have a click handler on it but you don’t have a keydown handler on it, which is why I can’t use the arrow keys. Making selects accessible is more complicated than it would appear. You should always try to use the native elements if possible because they automatically provide all the accessibility. But if you want to roll your own then you should look at
http://www.webaxe.org/accessible-custom-select-dropdowns/
If offers links to a bunch of resources on how to make them accessible. - There are no keyboard focus indicators on your radio/checkboxes. The focus indicators that are there are very hard to see. I know a lot of people think that keyboard focus indicators make the page look ugly but they really are important. I would make them more prominent.
- You need a label on the textarea (just change the p above it to a label). Although you have labels on your selects they are not working because you have display: none on the actual select boxes they point to.
- The responsiveness is very good and it handles increased text sizes just fine.
Other issues:
- Don’t use
<br>to create vertical spacing between elements. Not that it doesn’t work, it’s just frowned upon by most people (it’s considered something that only novices do).
Overall, this form looks very nice and is definitely near the top in terms of what we see for first time form projects. I know FCC doesn’t go into accessibility too deeply so I don’t expect you to be aware of all of the above. I just wanted to give you something new to think about 
Hi 
I really like. Colors, font, display.
Awesome job 
One thing to do it’s perhaps change the overlay of the textarea on the button.
… ok a second , make the age input less larger.
For the rest and from my little experience it’s very great, i like how you have personalized your form 
I really like your feedback it’s so comprehensive. 
Links that you provided are great, I will definitely use them in future. Accessibility is one of the drawbacks …I will look it up, especially now that I have free time.
I really appreciate your feedback. You are right, submit button doesn’t look that great, and as far as the age limit goes… I need to change that
Hi @gloria-web, read this regarding the use of <br> paying attention to the Accessibility Concerns section
Thank you for the info. this is very useful.