results-summary-component-main

Community feedback

• 

  Saiful Islam•500

  @saifuldtPosted 21 days ago

  thank you for your suggestion

  0
• 

  T

  Grace•31,270

  @grace-snowPosted 22 days ago

  I noticed some issues in this so hope these recommendations are helpful.

  1. All content should be contained within landmarks. Specifically, everything in this design should sit within a main landmark.
  2. This is overflowing my screen because an explicit width of 350px has been set. Either only set align-items on the parent on larger screens or set the width to 100% instead of 350px width.
  3. You need to really think through the HTML structure more carefully. What you have made into headings at the moment doesn't make much sense. For example, the main page heading is currently "80" which is meaningless. The actually heading should be "Your results". The score "80 of 100" should be in one paragraph.
  4. Headings should go in hierarchical order. So "Summary" should be a h2.
  5. Personally, I'd expect the list of results to be in a list or description list. Description list makes sense because they are a set of key-value pairs. Alternatively, they could be one unordered list, with the topic as a h3 and the scores as paragraphs.
  6. The icon images are decorative so should have empty alt. There is no benefit and only damage when image alt repeats the text that's right next to them.
  7. The text shouldn't have a width in px. If users change their text size that would result in a very narrow text container. Instead, use max-width and make the value use the rem unit so the value is responsive and respects the end user's font size settings. I'd recommend using rem for the circle width and height for the same reason. And use pixels for the icons, as they probably shouldn't scale with the user's font size.
  8. I recommend including gap and flex-wrap on each result item. This will allow them to wrap if and when necessary. (For example again when people change their font size or zoom/magnify).
  9. The button doesn't need wrapping in a div. And it's a strange choice to give it padding. Make sure you understand when to use padding vs margin. I think you understand it and maybe that choice was just a typo.

  0