@vanzasetia
Posted
Hi, Eneyee! 👋
The <footer> should not live inside the <form> element. It should be a child element of the <body> element.
Also, the terms and conditions statement should not be merged with your attribution. They are different content.
You should not set display: none to the <label>. It would be the same as the <input> without a label. You need to know that display: none makes the element disappear visually and programmatically.
You should use visually hidden styling to only visually hidden the <label> but still accessible with assistive technologies such as screen readers.
The anatomy of visually-hidden - TPGi
A couple of suggestions:
- Make the error icons as background images of the inputs.
- The
<p>for the error message should be programmatically connected with the<input>. You can connect it witharia-describedbyattribute. - The error message should be empty at first. Populate it with the message using JavaScript.
- The
<p>element for the error message should be a live region. This way, screen readers can pronounce the error message as soon as it gets populated with the message. - Use CSS to uppercase the text. Screen readers might spell the uppercased word in the HTML (spelled letter by letter).
I recommend reading my article to learn more about creating an accessible form.
How To Create Accessible Form with Boring Design? - CodeNewbie Community 🌱
I hope my feedback helps. Have fun programming! 😄
Marked as helpful
@Eneyee
Posted
@vanzasetia Thank you so much for your feedback, and for the articles you've provided. Still figuring out accessibility and the importance of it
@vanzasetia
Posted
@Eneyee
You are welcome!
I recommend taking a look at the following site as a starting point to learn more about web accessibility.
And for sure web accessibility is important because the web is for everyone. Also, it can help you to write good HTML too.
