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.