Order Summary Card Solution

Community feedback

• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  Hello Chaz! Awesome job on your first project. It's very well implemented. Well done 👏. Remember to remove the border property you have on the body. Also, you may want to change the .maincontainer div to a main. Doing this would resolve the accessibility issues regarding use of landmark element.

  Your page is missing an h1. For accessibility reasons, pages require one h1 element. For the nature of this challenge, you could add an h1 e.g: <h1>Order summary component </h1>, visually hidden on screen but visible to screen readers. You can use this post as a reference.. You could also just change <h2>Order Summary</h2> to an <h1>.

  All the best with subsequent challenges.

  0

  ---

  

  chaz•70

  @chazm78Posted about 3 years ago

  @dewslyse thanks a lot for the feedback. After I uploaded the project I noticed the border, palm to face! I fixed it last night just haven’t uploaded the new solution and I’m glad I haven’t done that yet. I had no idea about landmark elements nor about having a h1 either. Thanks again for your feedback greatly appreciated.

  1

  

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  @chazm78 You're welcome. You don't necessarily have to upload a new solution. You can just generate a new screenshot and report once you've pushed your changes to github.

  Marked as helpful

  0

  

  chaz•70

  @chazm78Posted about 3 years ago

  @dewslyse so after doing some reading I didn't really have to change .maincontainer to .main what I had to do was give that div a role="main" and that solved the accessibility issue. Really insightful. I fixed all the issues you pointed out and spent more time on this platform getting to know the features. Thanks again. Super rad!!!

  1