I’ve finished the Survey Form Project. I used the original FCC form and tried to turn it into a bit more modern version.
Focus states aren’t great. I can’t get them to work on the radio buttons and checkboxes. But hover seems to work fine.
Any feedback is very welcome!
on a mac the active fields also have a blue halo around them so it really clashes with the orange.
I would maybe do away with rounded corners.
Joke, I think you’ve done a good job overall and the form is perfectly functional. My first thought is that the form is quite large. I think that the user experience would be improved by lowering the width of the container from 35rem and lowering some of the padding, spacing, and font sizes for the input boxes and labels.
Personally, I don’t mind the rounded corners. However, I do agree that the orange highlight clashes on this project. You could possibly consider using other effects with the hover/select attributes such as changing the background-color slightly.
@Ohia.Bruja, thanks for your feedback. I agree with what you say about the blue lines of the browser’s focus, but I want something that shows non-disabled users where they are in the form. And at the same time I’m reluctant to remove the browser’s focus/active styles. I may interfere with something a disabled user needs. Maybe I’ll take those blue lines away for the active state only.
I’m still not satisfied with the focus part and accessibility of this form. Still working on it.
And the rounded corners: can’t help it, I like them.
@shadew, thanks for your feedback. The large size of the font and therefore the whole form has to do with accessibility. I’m 53 myself and wearing multifocus glasses. I find it more and more difficult to read small font on a computer screen. So the size I used is what I create by adjusting the font when I have to fill out a form like that. So, I changed it on this form, for me and all older users.
I’ve checked the font of several modern websites and it seems to be changing into larger fonts than in the old days. More than 20px is normal now, which it sure wasn’t a couple of years ago.
And the orange comes from this website as it is an FCC form, but it might a bit too much. I’ll try some other options.
You bring up an interesting point that I had not thought about in my own designs. Thank you for giving me some perception on font size and selection!