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

Result Summary

@Saguneo

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@jairovg

Posted

Hi @Saguneo, congrats on your solution; here are some comments that might help you to improve it:

  • Even if the challenge is a single component and you probably won't have a page in a real project with just one of it, think about how to improve the component's semantics. May it have a main title? Probably a subtitle in any particular section? Just to give you an example: You have some recurrent categories for the summary section, is the <div> element the best one to use for each category? MDN docs have a guide named Content Categories that may help you with this.
  • You have multiple a11y issues; you can use tools like axe dev tools if you're not using them yet.
  • If you run an a11y audit you will notice 9 serious issues, 7 of then related to colour contrast that are easily fixed on this challenge, but on a daily basis may be handled with the UX designer, and another one that is "Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies", related to the anchor you have within the button you can read more about this issue on the Deque University Axe rules page.

I hope you find it useful. I'm happy to take another look at your solution if you make some other changes.

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