Scss, html, JS

Community feedback

• 

  P

  Jairo Valderrama•420

  @jairovgPosted about 1 year ago

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

  Accessibility and semantics

  • This is your heading map:

    Frontend Mentor | Results summary component
      2 Your Result
        3 Great
      2 Summary
  

  • All headings should have a hierarchy and a meaning. You can check this checklist provided by Deque University to learn some best practices related to headings that will help you improve your structure.
  • All interactive elements, like anchors or buttons should provide different states to be universally accessible; those states should at least be rest (default state), hover, focus and active. Check for the requirements in the provided screenshots and try to not let the browser have the focus one to provide a unique experience across devices.
  • You're creating two section elements. There is an interesting blog post I like to share, named <article> vs. <section>: How To Choose The Right One which I invite you to read to check if they are the correct chosen elements.
  • Your solution has an a11y issue injected by the lack of a main landmark. You can read more about this issue on the Deque University Axe rules page.
  • This project has some opportunities to use techniques like sr-only or some aria attributes to improve the experience of assistive technologies. I invite you to research about it and to improve your solution with it.

  Styles

  • Your solution is missing the shadow in the component container.
  • The button element uses some browser native styles, including its focus status. As mentioned above, having a custom style following the style guides will provide a unique user experience across devices.
  • The component uses px as the unit for properties that must be dependent on the user preferences for font-size. I suggest you use rem or em depending on the use case as the units.* The project has media queries that miss devices (like extra large). If you set your monitor to a resolution greater than 1440px you'll notice the visual issue your project has.
  • You are using media queries to support a specific range of devices and miss some others. Try setting your device to 1441px to see the issue.

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

  0