@AdrianoEscarabote
Posted
Hi Manuel, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:
images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader.
A tip for when the challenge is just one component and the page needs an h1, you can add the class: sr-only:
<h1 class="sr-only">Blog Post Overview</h1>
class:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
By doing this you will have an h1 visible only to page readers!
Learn the differences between decorative/meaningless images vs important content.
The rest is fantastic.
Hopefully, you'll find it helpful. 👍
Marked as helpful
@Manuel7070
Posted
Thanks @AdrianoEscarabote for the helpful suggestions; let me implement them now.
@Manuel7070
Posted
@AdrianoEscarabote I wanted to confirm whether I should convert the width, height, and margin from pixels (px) to rem units. I plan to do this by dividing each pixel value by 16 to calculate the equivalent rem value accurately.
This is because all my values are in rem instead of px.
