The markup passed the test and now I was hoping you could answer some questions about CSS:
Would an advanced dev usually layout form elements using flexbox?
How do I style the select element dropdown menu so that the background is the same colour as the other fields, but only the first option placeholder text is faded?
Is there enough contrast background and text for accessibility?
Have I made any beginner mistakes with my html or CSS?
My design is pretty basic, sorry. Should I remove the rounded-corner of the form, or match the rounded corners with all my other elements?
Any links to recommended tutorials for further study about styling forms with CSS?
It depends on the design. Sometimes flexbox may be the best layout mechanism, sometimes it might be grid, sometimes you might not need anything special. And sometimes any of them would work. Bottom line, there is usually no one right way to do things, but sometimes one method can be a little simpler than the others.
You can test this for yourself. I often use the WebAIM Contrast Checker. I can tell you right now by just eyeballing your form that the placeholder text is not even close to being accessible. Everything else looks pretty good except the “Thank you” sentence under the Survey Form header. Notice that towards the end of the sentence the background gets lighter. I’m guessing that at some point there is not enough contrast between the white text and the light green background.
Hi, thanks for your reply about flexbox and for the resource for testing accessibility - I’ll make sure to use it from now on. It’s amazing what doesn’t pass the test, even though it looks fine to me. It’s a shame about the placeholder text, I was hoping if I had labels it wouldn’t matter so much. Thanks again!
The reality about placeholder text is that it’s almost never needed and should be avoided. I understand it’s a requirement for this project, so you have no choice here. But if the label text for the input is “Email” do you really need to have placeholder text that says “Enter your email”? No, of course not. And all browsers make the placeholder text so light by default that it doesn’t meet contrast requirements. And if it doesn’t meet contrast requirements then what’s the point of having it since a lot of people aren’t going to be able to read it in the first place. It can also be confusing for people using screen readers and are listening to the page.
I think you can tell from the above that I’m not a fan of placeholder text. I could probably count on one hand the number of times I’ve seen it used where it actually made sense. So my recommendation would be to forget about placeholder text (except of course when it is required to pass a certification )
Hi, sorry didn’t see this reply sooner. Thank you for that info, I completely agree and I was quite interested in the topic and spent some time reading online and it seems like nearly every source worth mentioning thinks the same way too. I will definitelty be ditching the placeholders!
)