Intro Component with sign up Form (Responsive, html, sass, javascript)

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hello, Souleymane Sy! 👋

  Wrapping the <input> with <label> is not enough. You should provide a text content for the <input> to have a proper label or accessible name.

  I recommend using aria-label attribute to label the <input> since there is no visible label on the design.

  I recommend making the error icon as the background image of the <input> element. If you want to keep using <img> element then it should not have alternative text—empty alternative text.

  The error message should be wrapped by a meaningful element, a paragraph element to be specific. There should not be text in <span> and <div> alone.

  Also, the error message should be connected with the <input> by using aria-describedby attribute. Then, it should be a live region so that it gets announced by screen readers. To do that, you should add aria-live attribute.

  You need to leave <p> empty at first. Then, populate it with the error message using JavaScript.

  For detail information, you can read the following article — How To Create Accessible Form with Boring Design? - CodeNewbie Community 🌱

  You should specify the type of the button, <button class="form--btn">. <button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons

  You should avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.

  I hope you find this useful. Happy coding! 😄

  Marked as helpful

  1

  ---

  

  Souleymane Sy•980

  @SouleymaneSy7Posted over 1 year ago

  @vanzasetia Thanks for your tips. I am going to try this!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @SouleymaneSy7

  You are welcome! Good luck with it! 👍

  1
• 

  Ali Sadygov•0

  @Ali-SadygovPosted over 1 year ago

  Super

  1

  ---

  

  Souleymane Sy•980

  @SouleymaneSy7Posted over 1 year ago

  @Ali-Sadygov thanks you

  0