Stats preview card component using CSS Grid, Flexbox and BEM method

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 2 years ago

  Hello

  not sure why you have tagged this with #accessibility? Do you think you've done something specifically to address that?

  1. This is not how you use the picture element! You are missing all the built-in performance benefits the browser gives you with this element. Look it up on MDN and use it properly. You should not be messing with any display properties in the css
  2. If you think this is a valuable image, you must describe it properly in the alt attribute. You never write words like 'image' in alt as it is already an image element. The alt has to either describe what the image looks like, or it should be left empty if the image is decorative.
  3. The image is distorted at some screen sizes - use the object-fit property to fix it.
  4. Do not do this on the html element! font-size: 0.938rem; This changes the value of 1rem and will mess with user's font size preferences. If you want to change the base font size for text on a site, place that on the body element and it will inherit to everything except form-related elements.
  5. The text area of the card is not a section element. You have an alt on that image, which meants you are treating it as meaningful content - That means this is allllll one component, an image and some text. So you could place a section element around the whole card, but you shouldnt be making just one inner part of it a section. But overall, sections are unnecessary in this challenge. They act just like divs unless labelled so it makes little difference, it's just a bad habit to get into if you use them inappropriately.
  6. Text should never be in a div or span alone. Always use a meaningful element like paragraph, list, heading, button etc
  7. The detail__stats here should be an unordered list with 3 list items inside, one for each stat (number + word). Those numbers can be wrapped in a strong or span with a class set to display block so they sit on their own line.
  8. A quick accessibility note once you change that to a list and list items - Setting the list style to none will remove the list semantics for some screenreaders. The easiest way to remedy that is by adding role="list" to the ul and role="listitem" to each li.
  9. Some of the text on this is unreadably small! Try to get that closer to the design
  10. You are missing a mix-blend mode to get the correct purple color on the image. i expect you will need to change opacity on the image to about 0.7 once that's done.
  11. Try not to place paddings on elements like paragraphs. Usually the line breaks will happen based off the parent elements padding (i.e. the available space) and you shouldn't worry about it. However if you do need to limit the width of a paragraph, it would be much better to use max-width (usually in ch units)

  10

  Marked as helpful