Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component Challenge Using CSS Grid

hamzzei 60

@jameshamling

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@zitescody

Posted

Hello @hamzzei, below is some feedback on how to eliminate some of the accessibility issues on your report:

1.) I recommend changing <div id="card"> to <main id="card">. This is important because it shows to the screen reader that THIS is your main content (what is inside is what you want people to see). Using baseline div elements doesn't allow for that.

2.) I recommend changing the <div class="attribution"> to <footer class="attribution">. Again, this shows the screen what the content contained within the element is.

Overall, wonderfully done. I have attached an article recommended by Frontend Mentor that will help you optimize your frontend journey to be more accessible!

https://dequeuniversity.com/rules/axe/4.3/region?application=axeAPI

0

hamzzei 60

@jameshamling

Posted

@zitescody Thanks for the feedback! It is very appreciated. I don't know why I forgot to split this up into main and footer but I will remember this for the next project!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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