Survey Form Project by Porphyrogennitos

Code Feedback
1

So, I finished my second project.

I’d like you to check it and tell my how it could become better etc. :beers:

1 Like
2

Your form looks good @Porphyrogennitos. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There is an HTML coding error you should be aware of and address. (It’s a typo that prevents the user from toggling using the label)
    • I tend to agree that you are not using the aria-label attribute correctly. aria is for users who use assistive tech. Do some research on that.
  • The use of the abbr element has no value-add.
    • There’s no indication to the user that there is something to hover. What about smaller screens where there’s no ability to hover? Most who have filled an on-line form know what the asterisk means but if you want them to be aware you could put some text, that is visible to everyone, explaining marked fields must be filled out.
  • Placeholder text should not mirror the label. It is used to show the user the format of the expected input.
  • It’s a bad UX for a keyboard only user not to be able to navigate the form.
1 Like
3

How can I fix the bullet point 3 and 4?

4

Overall this is very good. You’ve avoided all of the major pitfalls that catch a lot of people. Just a few things to bring to your attention.

  • You’ve got <label>s on all of your inputs but one of them is not working correctly. I don’t want to tell you which one because I want you to learn how to test for these sorts of errors. I will give you a hint. When you mouse click on a label it should do something to the input. For text inputs it should activate the cursor so you can immediately start typing. For selects it should activate the select so you can immediately use the arrow keys. For radio buttons/check boxes it should toggle them.
  • As I Tab through all of the inputs the keyboard focus indicator is either hard to see or non-existent. You have disabled this behavior with the following CSS rule:
*, :focus, :hover {
    outline: none;
}

This is very bad for accessibility. Keyboard users should be able to see where the focus is as they move through your page. And I always recommend that you don’t rely on the browser defaults as they are usually not good enough. Customize the outline property on :focus so it is obvious on your page.

I’m guessing the reason you did this is because you thought the outline detracts from the aesthetics of your page. There is a way you can limit the focus indicator to only keyboard users (for the most part). Always remember, the focus indicator is a very important part of accessibility and you should style it so that it is easy to see on your page.

  • I can tell that you are trying to make your form more accessible because of the <abbr> around the asterisks for required fields and the use of aria-label on that tag. I tested this in both JAWS and NVDA and because you have the required attribute already set on these inputs they are announcing “required” twice due to the aria-label you have set on <abbr>. Is this a show-stopper? No. But duplicate information like that is considered extra noise that a screen reader user has to listen to and so should be avoided if possible. And I haven’t tested with VoiceOver, Talkback, etc… so maybe one of those doesn’t announce “required” when the attribute is set and thus they need that extra aria-label? My guess is that the aria-label="required" is probably overkill and not needed and that all of the screen readers will announce “required” when that attribute is set on the input. But my real point is that whenever you add things like this for accessibility you should test them in at least two or three of the most popular screen readers to make sure they have the desired result you are looking for.

  • Since you seem to have a good grasp on the basics I’m going to throw in a more advanced issue to think about. Did you know that users can manually change the text size on your page? I’m not talking page zoom here, I mean just the text on your page. For people who have bad eyesight this is a very important feature. If you don’t know how to do this, the easiest way is to use Firefox. Go to the Edit->Preferences menu, scroll down to Zoom and activate ‘Zoom text only’. Then while holding down the Ctrl key scroll your middle mouse button to make the text bigger. You’ll notice you can make it quite a bit bigger. You’ll also notice that your page has some issues when the text is made bigger. In general, your page should be able to handle a 200% increase gracefully. So if you want a real challenge then crank that text size up and fix up your styling so it looks good at all widths.

2 Likes
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.