FCC survey form

my survey form ready for feedback.

1 Like

@HaiCia As far as an HTML form goes for desktop/laptop, fully able users, this is good work. You’ve got all of the form elements implemented and visible. All of the fCC tests pass. I like that you’re using Flexbox! :star2: However, you may want to fix some of the accessibility issues.

  • Missing Form Label: When I run your code through the Web Accessibility Evaluation Tool (WAVE), I see 16 Missing form label errors. According to WAVE:

    If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.

    The fCC beta curriculum states:

    The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable.

    (Source: Improve Form Field Accessibility with the label Element)

  • Orphaned Form Label: This alert happens when a form label exists but is not correctly associated with a form control. I see six of these errors.

    An incorrectly associated label does not provide functionality or information about the form control to the user. It usually indicates a coding or other form labeling issues.

    I think the problem here is that the labels have a for attribute, but the for attribute doesn’t match an id in a form element.

  • Fieldset Missing Legend: There are six instances of fieldsets without legends in the code. I think some of the label errors will be resolved by adding legend elements to your fieldsets. MDN has a good section on fieldsets and legends in the How to Structure an HTML Form post.

    The fCC beta curriculum states this about the fieldset and legend elements:

    Since radio buttons often come in a group where the user must choose one, there’s a way to semantically show the choices are part of a set.

    The fieldset tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.

    The fieldset wrapper and legend tag are not necessary when the choices are self-explanatory, like a gender selection. Using a label with the for attribute for each radio button is sufficient.

    (Source: Wrap Radio Buttons in a fieldset Element for Better Accessibility)

  • HTML Validation Errors: There are a bunch of validation errors when I paste the code into the W3C HTML Validator. Most of these are related to the above form issues, but you may want to look at them closely to fix any other errors that may be present.

  • Overqualified CSS Selectors: There are a couple of CSS selectors that are more specific than they need to be, header h1 and label.left. In both cases, it should be possible to use h1 and .left respectively. Even though using qualified selectors is valid CSS, it limits the portability of those selectors if needed. I find the cssguidelin.es section on portability to be a helpful reference regarding qualified selectors.

This is a good start so far! I think fixing the accessibility issues and working on the form’s responsiveness will make this a solid portfolio project. :sunny:

3 Likes

@camper how do you check code with web accesibility?! Mine showing only CodePen alerts :frowning: It is true I need t work at forms, I don’t understand how does it work, I think I need to have a look how forms look like on other side(this is on my to do list), then I will know where to use for, id label etc…

thank you for comment!

@HaiCia I use both of these browser extensions to test my projects and projects I’m reviewing as they sometimes point out different aspects of accessibility:

Edit: Here’s a well-written, quick read on the basics of accessibility: How to make sure your website works for all users - Current. It’s not specific to forms, but it clearly shows the importance of making sure our code is as accessible as possible.

1 Like

Can someone tell me why DOB and email address are above name when they are not in that order in my coding?

@dianetrotter Since your question is unique to you and not really related to this topic will you please open a new topic for your question