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

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! 😄

Super