As with my tribute page project, I went back to my survey form project to improve the code and design. I’m interested to get some feedback from the community, so here it is linked here: Bryan’s FCC Survey Form
Thank you for your time
Overall this is really very good. Just a few thoughts:
- You have a
<span> wrapping the
<input> for Name and E-mail. I think most people would use a
<div> here since
<span>s are typically used for inline elements.
- You have the max-width on main set in
px, so as I increase the text size the width of the form does not also widen to compensate. Thus at large text sizes the content is very narrow. Consider using
em units here.
- You have explicitly set keyboard focus indicators for all the inputs except the radio buttons/check boxes, which are relying on the browser defaults. In Firefox this is a different color than the black you are using for the others. I would suggest you make them all the same.
- Also, the focus indicator for the Submit button is not adequate. The button does shift up a little a perhaps gets a little lighter, but the change is not nearly enough to indicate that the button has focus. It should probably have the same type of indicator as all the other inputs on the page.
Ah alright thank you so much for the feedback; I’m never really good with accesibility so this stuff really helps.
I’ll get on with fixing those issues
Hello bbsmooth, I just finished editing my code based on your suggestions; one thing I was wondering about is with the focus indicator for the radio buttons and checkboxes… do you think these are obvious enough? Or do you know of any other alternatives to the focus indicators for radio and buttons and checkboxes (because they seem pretty hard to style sadly since they’re mostly native to the browser )
Thank you for your time,
They are definitely a big improvement. I’m big into accessibility so I always make sure my focus indicators really stand out. The way I look at it, I should be able to randomly tab through the page with my eyes closed and then open my eyes and be able to determine almost instantly where the focus is. I’ll even test this with other people (since I might be a little biased as to what obvious is).
The one thing I would suggest is that you make the focus indicator the same for all of the inputs.
Ah alright got it. Yea I had a feeling it could be clearer and stand out more and consistency would be better.
I’ll try to work on a solution and try to research more on more ways to add focus indicators to radio and checkboxes.
Thank you for your input; I highly appreciate it. Accesibility is something that is not very often talked about so thank you for pointing this stuff out to me to help my code become more accessible.
I know it has been a while, but if you’re still interested, I came back to this code and decided to tweak the focus slightly so now we have this type of outline by having two layers of
box-shadow; what do you think? I think it’s a lot more obvious and consistent now