@vanzasetia
Posted
Hi, Chris Jay! 👋
Here are some possible improvements.
- Leave the alternative text empty for all the star icons (
alt=""). Those are decorative images. - For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
- Wrap the quote with
<p>element.<blockquote>should have a<p>as a child element. Reference: hail2u/html-best-practices: For writing maintainable and scalable HTML documents #use-appropriate-element-in-blockquote-element - Don't change the
<html>or the:rootfont size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. - Set a
min-heightinstead of aheighton the<body>element.
For your next project, I recommend writing the CSS using the mobile-first approach (using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.
I hope you find this useful. 🙂
Marked as helpful
@chrisjay358
Posted
@vanzasetia Thank you Vanza for taking the time to review my code
- For the
altI put a text there because of validation, I wanted to add thearia-label="presentation", but I didn't anymore. Thanks for calling my attention to it. - I didn't know that
<blockquote>, I'll incorporate that from now on. I will also take my time on the resource you linked me to, I appreciate it, thank you. - I know about the
<HTML>font size thing, however, it makes calculations easy and I am trying to rid away bad habits. someone here some time ago told me about it, I would stop using it soon. - For the min-height I thought I did, however, guess I removed it along the way, thanks for calling that to my attention.
Thank you Vanza Setia once again for taking rime to help me correct my code to best practices, i appreciate it, i really do.
@vanzasetia
Posted
@chrisjay358
<img> element must have alt attribute. So, if there is no alt attribute then the validation will tell you to add alt attribute. But, you just need to add the attribute. It does not necessarily mean you need to also add value.
Now, about aria-label="presentation", you should not do this. Screen readers will pronounce the image as "Presentation, image." which is not needed. More importantly, <img> has alt attribute to give it an accessible name. So, don't use aria-label on <img>.
You are welcome! 👍
