JS for Form validation

Hi, Islam Soliman! 👋

The alternative text for the logo should be the company name, not the word "logo". Also, alternative text for images should not contain any words related to "image" (such as picture, photo, logo, icon, graphic, avatar). It is already an image element (<img>) so the screen reader will pronounce it as an image.

I recommend adding the novalidate to the <form> element through JavaScript. This way, if the script fails to load then, the native validation can work.

<input> element must have a label. In this case, you can use aria-label attribute to label the email input.

The error message should be connected programmatically with the associated input. You can connect them with aria-describedby attribute. After that, the error message should be a live region. You can make it a live region by using aria-live attribute.

If you want to learn more about creating an accessible form validation, you can read my blog post — How To Create Accessible Form with Simple Design?

I hope my suggestions are useful. Happy coding! 😄