Submitted over 2 years ago

Order Summary Component with HTML and CSS

nicolasdsa• 125

@nicolasdsa

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, any feedback is welcome. Using CSS variables for colors and a little of CSS Grid for the position.

Community feedback

Account Deleted

Hi there,

add to the body background-size:contain;
add the <a> element text-decoration:none;
check the HTML report to fix accessiblity issues

i hope this is helpful and goodluck!

Marked as helpful

nicolasdsa• 125

@nicolasdsa

Posted over 2 years ago

@Old1337 Hi there, added all of the items that you commented but in acessibility issues, i can't resolve a acessibity issues, it says "Certain ARIA roles must contain particular children", do you know how i can resolve? Thanks for the commentary, sorry for my english, it's not my native language.

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

@nicolasdsa About the accessibility issue, the element doesn't need a role attribute at all. So, remove it and the issue will disappear. 😉

Marked as helpful

nicolasdsa• 125

@nicolasdsa

Posted over 2 years ago

@vanzasetia thanks for the commentary, this part of accessibility is something that i just started learning.

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

@nicolasdsa No worries! We are all learners on this platform. 😁

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

Hi there! 👋

Congratulations on finishing this challenge! 🎉

Some areas that could be done better.

Use margin to create white space. br element has meaning and will be read out by the screen reader. So, it's a good practice to not use br element for presentational purposes. You can read what MDN documentation says about it.
Not all images need alternative text. In this case, all images are decorative images. So, you can leave the alt="" empty and add aria-hidden="true" to prevent VoiceOver pronounce those empty alt images, it's a bug of the VoiceOver.
It is recommended to not limit the height of the body element. Currently, on mobile landscape view, to be specific on 640px * 360px, the card is getting cut off and the user can't scroll the see the content that is outside of the viewport. So, I would recommend using min-height: 100vh; instead.

That's it! I hope this information is useful! 😁

Marked as helpful

nicolasdsa• 125

@nicolasdsa

Posted over 2 years ago

@vanzasetia oh really thanks for the commentary, i applied all of the tips you recommended, only i don't apllied was the tip about ''alt'' , the front-end mentor say it is error but i added ''aria-hidden="true" in all of the images. I hope to someday reach your point number :). Sorry for my english, it's not my native language.

Vanza Setia• 27,795

@vanzasetia

Posted over 2 years ago

@nicolasdsa You're welcome! It's great to help you! 😄

About the alt attribute, if you leave the alt attribute empty, there's should not be any issues that appear.

<img src="/path/to/image.png" alt="" aria-hidden="true">

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