Submitted almost 3 years ago

Responsive and Accessible Stat Card Solution

Olutimilehin Olushuyi• 10

@ShuyiOlutimi

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would like to know what approach anyone might have used for the hero image and the overlay.

I started with the HTML first. I am very particular about accessibility, so my first concern was to ensure that I have an HTML that was meaningful without any styling.

This influenced how I approached the hero image. I was going to insert the image as an URL() background-image via CSS and then use a RGBA() to add the purple overlay as a background-color, but I realized it would pass no meaning to persons using screen readers or assistive technology. Additionally, I realized that I would not be able to use multiple sources for the image if inserted as a background. So I used the srcset attribute with the img tag.

I included the hero image as an img tag, added an alt text and achieved the pink overlay using mix-blend-mode instead. Now everyone can appreciate the page and not just visual users.

Still would like to know what approach anyone might have used for the hero image and the overlay.

Community feedback

Luis Colina• 1,043

@Comet466

Posted almost 3 years ago

Hello, Olutimilehin Olushuyi.

nice job in this challenge just a few things to point out.

-you can center the card more if you set a "hight:100vh" in the body tag

also the .hero-text its way bigger than the image, you can fix this by declaring a flex propertie like this "flex:1" in the class ".hero-text"

happy coding

Olutimilehin Olushuyi• 10

@ShuyiOlutimi

Posted almost 3 years ago

@Comet466

Thank you so much!

I did try using a 100vh but I noticed it broke the design on mobile. Also, seeing that most users would use mobile first, I wasn't willing to trade off a good mobile experience for pixel perfect design. Hence, I removed it. Is there a way to ensure that the mobile view is not broken when I use a 100vh?

I will use the flex property to fix the ratio of the hero-text to the hero-image.

Thanks for your feedback!

Luis Colina• 1,043

@Comet466

Posted almost 3 years ago

@ShuyiOlutimi sure there is, just change the heigh from 100vh in the desktop media querie to auto in the mobile

Olutimilehin Olushuyi• 10

@ShuyiOlutimi

Posted almost 3 years ago

@Comet466 I immediately thought of that after sending my first response. I fixed it now.

tediko• 6,580

@tediko

Posted almost 3 years ago

Hello, Olutimilehin Olushuyi! 👋

Congrats on finishing your first challenge! Your solution looks very good and also responds well. Im glad that you take some time to write semanticly good HTML. Your first thought about hero image was correct. This image is decorative and since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies. So, if you put them in CSS it'd be good! :)

Good luck with that, have fun coding! 💪

Olutimilehin Olushuyi• 10

@ShuyiOlutimi

Posted almost 3 years ago

Oh, that is fascinating! I did not interpret the image as merely decorative that was why I wanted it to be read by assistive technologies.

Quick question, how do you determine if an image is merely decorative in situations like this?

I would appreciate link to resources as well!

Thanks for your feedback, Tediko!

tediko• 6,580

@tediko

Posted almost 3 years ago

@ShuyiOlutimi Web Accessibility Tutorial - Decorative images

Please log in to post a comment

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