@vanzasetia
Posted
Hello, Anna P. M.! 👋
You should remove the "logo of" phrases from the logo's alternative text. Any words that are related to "image" (for example, picture, photo, logo, icon, graphic, and avatar) should not be included in alternative text. It is already an image element (<img>) so the screen reader will pronounce it as an image.
Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
For the validation, I recommend doing the validation once the users try to submit the form. It can be frustrating that the users keep getting the alert while they have not finished typing.
<input> element must have an accessible name or label. You can use the aria-label attribute to label the <input> because there is no visible label.
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 be programmatically connected with the <input>. Then, it should be a live region so that screen readers will pronounce the error message as soon as it appears. To make it a live region, add aria-live attribute to it.
Learn more — How To Create Accessible Form with Boring Design? - CodeNewbie Community 🌱
I recommend making the error icon the background image of the input. If you want to use <img> element, then leave the alternative text empty.
Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN
I hope you find this useful. Happy coding! 😄
Marked as helpful
