Order Summary Component with HTML and CSS

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

  2

  ---

  

  nicolasdsa•125

  @nicolasdsaPosted 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.

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted 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

  2

  

  nicolasdsa•125

  @nicolasdsaPosted over 2 years ago

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

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

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

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted 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

  1

  ---

  

  nicolasdsa•125

  @nicolasdsaPosted 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.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted 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">
  

  1