Base Apparel coming soon page

Hi, Daniel! 👋

Congratulations on finishing this challenge! 👏

To remove the browser's validation, I recommend adding novalidate attribute to the form element with JavaScript. Then, still use the correct type of input and required attribute as a fallback.

So, if the JavaScript is failed to load or the users disable the JavaScript, the form still has the native validation. Then, if the JavaScript is available then it will use the custom validation.

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.

More suggestions:

• Logo is an important content of the page. So, it needs to have a label or alternative text. Since you are using inline SVG, I recommend doing the following to add alternative text. Or just use img tag.

<svg role="img">
  <title>Base Apparel</title>
</svg>

• Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
• The hero image is not adding meaningful information. That means it is a decorative image. So, leave the alternative text empty (alt=""). This way, the screen reader users can skip the image.
• I don't think the input needs to be wrapped by fieldset. It's just one input so there's no need to do that.
• The way you label the button element is to use aria-label not value attribute.
• For decorative SVGs, add aria-hidden="true" attribute to the svg.
• 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.

That's it! I hope this helps!