Intro component with CSS + JS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Rafael Elias! 👋

  Nice work on this challenge! 🙌 Your solution is responsive and looks great! 👍

  I like the idea of having the "shaking" animation. Also, more importantly, the animations are turned off when the users prefer not to see them. Amazing! 👏

  But, two things can be done better.

  • Firstly, the alert messages are not getting pronounced by screenreaders as soon as they are visible. So, to make the alert messages accessible there are a couple things you need to do.
    • First, leave the error-message empty (no text content should exist on the HTML).
    • Second, add aria-live attribute. If the error messages appear when the users submit the form the value for the aria-live is polite. But, if it is a "live" validation then use assertive so that the error message gets pronounced as soon as possible.
    • Third, add a unique id to each error-message.
    • Then, add aria-describedby attribute to each input element. The value of the aria-describedby is the id of each error message element.
    • Lastly, with JavaScript, show the error message.
  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.

  That's it! I hope this helps! 😊

  Marked as helpful

  0

  ---

  

  Rafael Elias•290

  @RafisEliasPosted over 2 years ago

  @vanzasetia Thank you very much for the feedback, I will try to implement all the tips you gave me. thank you so much/

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @RafisElias No problem! 👍

  0