@vanzasetia
Posted
Hello, Leonard! 👋
It looks very different compared to the design especially considering that you are a PRO member. I recommend trying to make the site looks more similar to the design.
Some more feedback from me.
- The error icons should be a
background-image
on theinput
element instead of animg
element. This way, when the input is in the invalid state, you can show the error icon with CSS instead. - Worth mentioning that every
img
should havealt
regardless that it is a decorative image or informative image. - The button element should have
type
ofsubmit
. Also, it's best to always specify thetype
of thebutton
element. It's going to prevent the button from behaving unexpectedly. - I recommend breaking down the function into smaller functions. This way, it is much easier to maintain the JavaScript.
- Use
p
element for the error message instead ofdiv
. Always use a meaningful element to wrap text content.
Now, to make the screen readers pronounce the alert message you can do the following.
- Add
aria-live
attribute to each error message - Add
id
for each error message - Add
aria-describedby
attribute to each input. The value is pointing to theid
of the error message. - I recommend toggling the
hidden
attribute within the JavaScript to show and hide the alert message.
You can visit MDN documentation for more information about aria-live
and aria-describedby
.
That's it! I hope this information is useful!
Marked as helpful
@leoimewore
Posted
@vanzasetia Thanks i will keep working on improving. Nice feedback.
@vanzasetia
Posted
@leoimewore You're welcome! 😄