Intro Component with Signup Form

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello @arpollla! 👋

  Here are some suggestions for improvements.

  • The form is currently inaccessible, users can't interact with submit button using the keyboard or screen readers, there is no label for the input, and much more. I recommend making the following changes.
    • Wrap all the inputs and the submit button with a form element. This will make those inputs connected to each other. It means that the users can use Enter key to fill in the required input (or in other words input that has required attribute).
    • Use button with type="submit" for the submit button. Using div will not make it behaves like button element. The users can't interact with it with Tab and Enter keys. Also, the screen readers won't pronounce it as a button.
    • input must have label or accessible name. You can use aria-label to provide a label for each input (aria-label="Email"). This way, the screen readers know how to pronounce the input.
    • Specify the correct type for each input. This helps mobile users to get the right keyboard layout for different types of input.
    • Add required attribute to tell the users that the input must be filled.
  • I suggest making the error icon as the background image of the input.
  • I recommend reading the "How To Create Accessible Form with Boring Design?" article. It tells about how to create accessible form validation by using aria-live and aria-describedby. It also tells you about my process of writing HTML, CSS, and JavaScript with some best practices.
  • 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.
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.

  I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
  • Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  I hope this helps! Happy coding!

  Marked as helpful

  1