contact-form

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 1 month ago

  Hello,

  This doesn't quite look like the design yet. I think you are missing the modern CSS reset that you should always include at the start of the styles in every project. Look them up! This should sort things like borders looking odd on inputs.

  A few other accessibility issues to learn in this challenge:

  1. Fields that collect personal information must have an appropriate autocomplete attribute. That's a requirement under WCAG accessibility standards so make sure you do some research and refactor that. This helps assistive technology users or those with mobility impairments to fill in a form without unnecessary extra keystrokes.
  2. Error messages need to be announced by screen readers and they should be programmatically associated with their input. The best way to do that is wrap each error in an element that has a unique id and an aria-live attribute. This element must not be hidden from the accessibility layer -- by that I mean it must not be visibility: hidden or display: none. The contents inside an aria-live region can be hidden but not the aria-live element itself. Then you need to add aria-describedby on the input pointing to the error wrapper's id. That way, the error will get read out by screen readers as soon as it appears, and after the label when focused on an input. This helps people using a screen reader know where errors are and which fields are affected.
  3. The whole area in the border around the radio should be clickable. You do this by wrapping the input and text in the label element not a div. The text inside the label can be wrapped in a span to assist with styling.
  4. Don't change the cursor on inputs. They should not have a pointer cursor.

  Make sure the component can't hit the screen edges at any point, including at the top and bottom.

  Also see if you can optimise your JS further. I think it's longer / more complex than it needs to be. And the errors should be referenced using a class and not an element. This is a general good practice. For example, it's common for JS selectors to always use js- prefixed classes or data- attributes instead of element, ID or class selectors that are already used for CSS.

  Marked as helpful

  1

  ---

  

  P

  Arcloan•420

  @ArcloanPosted about 1 month ago

  @grace-snow thank you very much! I read a lot about your helpful reply to other users on Discord. For the first bullet you I forgot to add the attribute like a fool. I didn’t know the second bullet so thank you very much. The next time I will remember this. For the third bullet I should have done like you said wrapping all in a label element. For the fourth bullet the image misguided me.

  How would you have you approched the js part? Can you give me some hints for reducing the complexity? Finally I didn’t know about the good practice of giving a class and referencing them using class selector, so again thank you.

  I don’t know if I can adjust all these thing anytime soon, since I’m speeding up a little bit because I can’t wait to reach the javascript framework path. I really appreciated your help.

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 1 month ago

  @Arcloan to be honest as you progress and learn more JS you'll naturally see ways to reduce the complexity in this one. So I wouldn't worry about doing that bit just yet.

  Make the smaller changes for now. Keep it in the back of your mind that at some point when you can spot opportunities to optimise the JS you can come back and refactor this a little. If it all works as it is, that's fine. Let the refinements happen later :)

  Marked as helpful

  0

  

  P

  Arcloan•420

  @ArcloanPosted about 1 month ago

  @grace-snow thank you very much. I appreciated a lot yours comment.I hope to hear from you soon! Have a nice weekend :)

  0