Intro component with signup form

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Karen Lourenço! 👋

  Providing an empty label like <label for="first-name"></label> is not going to make the input has a label. The input elements still have no accessible names. You should provide value. Otherwise, it is the same as an input without any label.

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

  I recommend making the icon-error.svg the background image of the <input>. If you want to keep using <img> element, then leave the alternative empty since it is a decorative image.

  Wrap the text with a meaningful element like a paragraph element. There should not be text in <span> and <div> alone.

  The error message should be programmatically connected with the <input>. You can use aria-describedby to do that. Then, make the error message as a live region using aria-live attribute. After that, make sure it is empty at first. This way, the error message will be announced as soon as it gets populated by text content using JavaScript.

  Learn more — How To Create Accessible Form with Boring Design? - CodeNewbie Community 🌱

  You should avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

  Don't use id selectors for styling. There are two reasons for not using ID’s to style content:

  • They mess up specificity because they are too high (the most important reason).
  • They are unique identifiers. So, they are not reusable on the same page.

  Learn more — What the ID attribute is REALLY for

  I hope you find this useful. Have a great coding day! 😄

  Marked as helpful

  0