Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Grid testimonials by Thomas Hertog

@thomashertog

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback regarding accessibility and CSS structure is mostly welcome

Community feedback

P
Grace 27,890

@grace-snow

Posted

Hi Thomas,

I suggest using figure with blockquote and figcaption for these testimonials instead of sections. I don’t think you need the screenreader only headings on the testimonials

And make sure the strong paragraph is inside an actual paragraph. Strong is an inline element designed to be used inside a paragraph, not on it’s own

Similarly, the people’s names and verified shouldn’t just be in divs. If you choose not to go down the figcaption route, I would make the names into headings.

On the images “profile pic” is not good alt text. That needs to be the person’s name. A general tip is you never need words like image/picture etc inside an alt attribute as the element is already announced as an image.

I hope this is all helpful

Marked as helpful

0

@thomashertog

Posted

@grace-snow I read up on MDN about figure and blockquote and adjusted. Good suggestion.

As for the profile pictures, I was still in doubt and after reading Jakes (Archibald) article about "Writing great alt text", I decided to hide the profile pictures from assistive technologies as they don't really add that much value (unless there was an elaborate description on the picture which I can't think of)

0
P
Grace 27,890

@grace-snow

Posted

@thomashertog yep that's definitely a fair point ☺ I think it's valid to hide these images from assistive tech in this case, or use the person's name as the alt text. Either way works fine

0
dewslyse 3,025

@dewslyse

Posted

Hello @thomashertog! Congrats on your submission. You need to set a max-width on your main to prevent the testimonial grid from spanning the full width of the page. A width of 69.375rem should suffice. After setting the max-width, you'll need to add justify-content: center to the body so that the grid will be centered on the page. Happy coding!!

1

@thomashertog

Posted

@dewslyse done, although I went with a bigger max-width

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord