Vanza Setia• 27,795
@vanzasetia
Posted
Hi, Nandini! 👋
Nice! I recommend stopping the animations for the users that do not want to see them. You can use the prefers-reduced-motion media query.
Here are some more suggestions:
- Remove the word "logo" from the alternative text: Alternative text for images should not contain any words related to "image" (such as picture, photo, logo, icon, graphic, avatar). It is already an image element (
<img>) so the screen reader will pronounce it as an image. - Do not use
<br>elements for presentation purposes: Remove all the<br>elements inside the<h1>. Screen readers may announce them as "break" which creates unnecessary noises. Learn more about accessibility issues that can happen when using<br>— <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns - No empty element: Remove the
<label for="email"></label>. The input has been labeled by anaria-label. Also, an empty label is not useful since it does not give the input an accessible name. - Do not use pixel unit for font sizes: Use
remoreminstead ofpxfor font sizes. Never usepxunit. Relative units such asremandemcan adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS - Do not specify default styling: Remove
font-size: 16pxfrom the<body>styling. It is already the default styling, at least in my case.
I hope this helps. Happy coding! 😄
Marked as helpful
0
Hello @vanzasetia,
Thank you for your thoughtful feedback! I appreciate your suggestions. 😊
I wasn't aware of the prefers-reduced motion; thanks for suggesting it to me. Learn something new ! 🌟
For the font-size, you are right, but i don't remember why I did it like that.. 😅
I know it is a very late reply to your feedback but once again thanks for taking the time to review and provide helpful suggestions!
Happy coding too! 🙌
1
