Responsive apparel coming soon

Community feedback

• 

  T

  Grace•31,210

  @grace-snowPosted almost 2 years ago

  Hello

  I hope this feedback helps

  1. Wrap error message in another element (eg div) and give that element a unique ID and aria-live attribute. This tells the browser that the content is going to change and prepares screenreaders
  2. Then add aria-desciribedby to the input with its value as the ID of the errors outer wrapper. This programmatically links the error and input. So when the error inside the linked div becomes display block, screenreaders will immediately announce the error. Similarly when they focus on that input the error will be read out after the label

  • speaking of labels, every input must have a label
  • it is not appropriate to use an aside for an image that you've treated as decorative. It should be in a div with role presentation if it contains no other content at all. It would be ok to use aside if there was content in there and if the aside had an accessible name. Otherwise the content as it stands would just be announced as "complementary"
  • min-width: 1440px is way too late to change to desktop image / styles. You should make the change as soon as there is room to do so. For example my mac screen is 1200px wide so I would currently see your mobile version if I looked on my computer even though there is plenty of room for the desktop layout
  • use max width on your grid instead of setting width so it's more responsive. That's a general principle thats important to start implementing now. You should rarely set explicit widths on anything (icons are the main time it's good to do)
  • the 62.5% font size hack is outdated and terrible for accessibility. You do not need to make 1rem equal 10px. Get out of that habit as soon as possible. I've got a blog post coming about this very soon on FEDmentor.dev if you want to get more details then.

  Marked as helpful

  1

  ---

  

  Tiago José•300

  @tiago-jv0Posted almost 2 years ago

  @grace-snow Thanks for all your recomendations, I really appreciate that you addressed all the problems as detailed as possible, I'm going to try my best to implement them.

  Also, about the font size hack, unfortunately I've used it in all my projects for so long that I got used to it, so... from now on should I not modify the font-size in my html ? is there any better solution ? I'm really looking forward to reading your article when it comes out.

  0
• 

  Nelson•2,390

  @nelsonleonePosted almost 2 years ago

  HELLO.....congrats on completing the challenge, well done 🎉 🎉 🎉

  Your email input validates even if the email is incorrect. You can use e.preventDefault in your JS to prevent the page from going to the address inputed.

  form.addEvenListner('submit',(e)=> {
      e.preventDefault()
  })
  

  Hope this was helpful Have fun coding

  Marked as helpful

  1

  ---

  

  Tiago José•300

  @tiago-jv0Posted almost 2 years ago

  @nelsonleone Thank for your feedback on my solution, i'm gonna implement your suggestions.

  0