my survey form ready for feedback.
@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! 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 labelerrors. 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:
labeltag 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.
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
forattribute, but the
forattribute doesn’t match an
idin 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
legendelements 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
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.
fieldsettag surrounds the entire grouping of radio buttons to achieve this. It often uses a
legendtag to provide a description for the grouping, which is read by screen readers for each choice in the
legendtag are not necessary when the choices are self-explanatory, like a gender selection. Using a
forattribute for each radio button is sufficient.
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,
label.left. In both cases, it should be possible to use
.leftrespectively. 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.
@camper how do you check code with web accesibility?! Mine showing only CodePen alerts 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: http://current.org/2018/02/how-to-make-sure-your-website-works-for-all-users/. It’s not specific to forms, but it clearly shows the importance of making sure our code is as accessible as possible.