base apparel coming soon

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 9 months ago

  Feedback as promised 😁

  1. The logo is important content. It must not be treated as a decorative image with empty alt. Say what the text says.
  2. The img inside the button needs an alt attribute. Every img element needs to have an alt attribute in fact.
  3. The button needs an accessible name. Personally I wouldnt use the img alt for that. I'd use Sr-only text in or aria-label on the button.
  4. Error messages should not be in a label element. Ideally that error text should not be pre-filled like that as it makes it harder to programmatically link the error and input. If you have text inside the error all the time you would need to add an extra element just to wrap that error and link it to the input. To link errors and inputs you should add aria-desciribedby to the input pointing to the unique id of the error wrapper. This error wrapper should also have aria-live. As you have text in the error element already, you would need to wrap it in an extra element to act as the error wrapper. The error wrapper must be in the dom and not display none. But the actual error content you have at the moment (the inner error element) can be display none until the error needs to be shown.
  5. The main image alt should describe the image properly and communicate it's meaning of it is meaningful content. There is a good post in the resources channel on discord about how to write good alt text on images.
  6. Don't use vi units in css yet. They are not fully supported.
  7. Line height definitely doesn't need clamp. It can be unitless like 1.3 or 1.5 and will be proportional to font size already.
  8. By removing outlines on interactive elements you've made this solution instantly inaccessible to keyboard users. Focus visible is a WCAG accessibility requirement for good reason.
  9. It's fine to use absolute positioning for the error stuff in the form if you really want but it may cause problems in later challenges of you rely on this.
  10. I am very surprised you need pseudos and all that code to size and position background images. I'd expect that to be done with background properties without need for a pseudo.
  11. The input must have a name attribute so you can use the form data!
  12. In the js get the form value from the submit not from doing another query selector inside it. Eg once the name attribute has been added Correctly to the input you would do form.email.value in js
  13. It is better to use named functions not anonymous functions in js.

  0