High Contrast Survey form feedback

Tried to do something with high contrast and used the feedback from my previous post to make this one more mobile-friendly, kinda worried about the accessibility though

As far as color contrast is concerned accessibility is fine.

But one thing that is a big accessibility no-no is:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

Because you didn’t replace it with anything, so now there is no focus indicator at all for keyboard users. Yes, you do get the little blinking vertical bar for the text inputs but this is not enough to be considered accessible. And the favorite color select just needs a <label>.

Also, some of the <label>s aren’t working properly because the for attribute is not set correctly (it must point to the id of the input). See the Age input for example.

2 Likes

Your form looks good @Jenrykster. In addition to the feedback provided some things you can revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address. (It caught the label issue mentioned above)
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Change the cursor to a pointer when hovering over the submit button
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
1 Like

Thanks for the feedback guys, I did some improvements and fixes as suggested:

  • Made the border change color to show focused element
  • Made the FavColor paragraph a label
  • Fixed the Age label not pointing to the right element
  • The cursor now changes to a pointer when hovering submit
  • Tried to adjust the placeholder text (still have doubts)
  • Analyzed both the HTML and CSS until there were no more warnings

@Roma could you please elaborate on the placeholder text issue ? I think I didn’t get It right :confused:

Anyway thanks again for the help

First off, good job cleaning things up @Jenrykster.

No worries. What I was trying to say was you have a label “Name” you don’t want your placeholder text to say “Name” or “Enter your name” or anything like that.
Instead the placeholder text would be something like “Puddintane”. The email placeholder would be something like “sample@email.com”. In other words, it shows the format the user is to enter.

Hope that makes sense.

Errors are the ones to be concerned with.
There is one for the age input. Get rid of that space.

It shouldn’t have any more problems, thanks for all the feedback guys !

1 Like