@vanzasetia
Posted
Hi, Hector Brito! 👋
The alternative text of the logo should not be "logo".
For images containing text, make sure the alternative text includes the image's text. In this case, the Ping logo should have an alt value of “Ping”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text
I notice two id attributes on the <input>. You should remove the empty one.
The error message should be wrapped by <p> element instead of <span>. There should not be text in <span> and <div> alone.
The error message should also be programmatically connected with the associated <input>. Then, it should be a live region by adding aria-live attribute. This way, the screen readers will read the message as soon as it gets populated with the text through JavaScript.
Learn more — How To Create Accessible Form with Boring Design? - CodeNewbie Community 🌱
<button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
Wrap each social media icon with an anchor tag. It is the social media link of the company. Also, make sure the link has an accessible name. You can use aria-label to give each link an accessible name.
I hope you find this useful. Happy coding! 😄
