Frontend Mentor | Order Summary HTML + Vanilla CSS [project #6] coding challenge solution

Community feedback

@vanzasetia

Posted almost 2 years ago

Hi, Zou!

There are a few changes you could make to this solution better.

illustration-hero.svg is a decorative image. So, leave the alternative text empty (alt="").
For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
Decorative images that are using inline SVG should have aria-hidden="true" to prevent them from getting pronounced by screen readers.
<button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons
Remove font-size: 1rem from the <body> styling. It is already the default styling.
Prefer unitless numbers for line-height values to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN

I hope you find this useful.

Marked as helpful

Zou• 190

@zouvier

Posted almost 2 years ago

@vanzasetia Thanks, I've gone through and updated everything that you've said, ty

@vanzasetia

Posted almost 2 years ago

@zouvier

You are welcome!

For the decorative SVG, you should put aria-hidden="true" and focusable="false" on the <svg>.

Order Summary HTML + Vanilla CSS [project #6]