Task #2 - Survey Form Complete!

Code Feedback
1

Hi all! Would love some feedback on my completed 2nd task - went with a music school sign up sheet instead of a “survey form”, but it fits the bill!

Any and all feedback to help me improve is appreciated! :slight_smile:

https://codepen.io/cjcon90/full/ZEbvbpp

My divs were added late and maybe add a little messiness, I had a lot of difficulty having it show up the same on my phone the same it did as in the firefox/chrome dev tools! So that was a late attempt at a fix.

edit After receiving comments, edited page and looking much better now I think. Also changed it into a flexbox after completing those lessons and it was much easier than I thought! Thanks for feedback :smile:

2

This looks really good!

One thing I’d suggest is providing more feedback to the user when they add invalid content to the fields.

For example, if I add “dasdfs” to the Age field, it looks like the field becomes red, but that does not necessarily tell me anything. This is especially true from an accessibility perspective since people using a screen reader, or who are color blind, would not immediately know what there is a problem.

The bootstrap docs (I know you’re not using bootstrap, just a reference point) have a great example of what actionable form feedback might look like.

1 Like
3

Thanks! I’ve heard of bootstrap but haven’t come across what it even is yet :smile:

Great point about the accessibility advantage over placeholders - I was wondering how to give more form feedback for invalid entries, but a lot of it was delving into Javascript that (as of yet) is still a little over my head! Will definitely try a bootstrap form next or play around with it on this one :+1:

1 Like
4

Your page looks good @cjcon90. Some things to revisit;

  • Don’t use <br> to force line breaks. Use CSS to do your styling.
    • There are ways to group like items. For instance, for your radio buttons and checkboxes look into the fieldset element.
  • Change the cursor to a pointer when hovering over the submit button.
  • Bootstrap will be taught later. It’s best to be familiar with CSS. That will help you understand Bootstrap.
1 Like
5

One big accessibility no-no, do not use view port units for font size:

html {
    font-size: 1.03vw;
}

You have this in a media query break point:

@media (min-width: 1024px)

So once the browser width is bigger than 1023px the font size gets real small and the user is not able to adjust it manually. Bottom line, the user should always be allowed to increase the text size as needed.

Another accessibility issue I see is that the keyboard focus indicator is not really visible, especially for the radio buttons and check boxes. Use the CSS outline property coupled with the :focus pseudo-class to make the keyboard focus more prominent.

If you want to be even more accessible, use fieldset/legend for your radio button/checkbox groupings:

https://webaim.org/techniques/forms/controls#checkbox

Sorry, don’t mean to sound so critical, overall you did a very nice job. One of the first things I always do when evaluating a web page is test for text size increase responsiveness. So it just jumped out at me immediately :slight_smile:

1 Like
6

Thank you! I certainly need to work on planning and structuring my groupings and I hadn’t thought of fieldset. Will make those fixes! Cheers, appreciate the feedback :slight_smile:

7

Haha, not at all - the more critical the better!

Great feedback and tips, really appreciate it. Will get to work on implementing them :+1: