Accessible stats preview card component

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The images serve no other purpose than to be decorative; It adds no value. The alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  More Info:📚

  [https://www.w3.org/WAI/tutorials/images/](https://www.w3.org/WAI/tutorials/images/

  • To get the image to look like the FEM example, you are going to want to use the mix-blend-mode along with the multiply value and include a opacity with the value of 0.8.

  Code:

  img {
    opacity: 0.8;
    mix-blend-mode: multiply;
  }
  

  • The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a paragraph element.

  • The statistics at the bottom are a list, so it should be built using an unordered List element.

  More Info:📚

  MDN <ul>: The Unordered List element

  • For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎄🎁

  Marked as helpful

  0

  ---

  

  AbdulMalik•80

  @cyberweb8Posted almost 2 years ago

  @vcarames FIrst off, thank you a lot for taking your time and giving feedback. I learned about decorative images, and used 'mix-blend-mode:multiply' and opacity as you've instructed me. However I have a question to ask. I watched other videos before about using em units for media queries. Since current font-size is 15px=0.9375rem, not default 16px=1rem, do I have to change anything to do a calculation for media query let's say for 1200px. 1200px:16=75em or 1200px:15=80em.

  0

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @cyberweb8

  Glad I could help.

  I looked at your CSS and from the looks of it, your root font-size is still 16px (you did create a variable --fs-normal: 0.9375rem;, which does not affect the root font-size). So based off that, it would be the former (1200px /16= 75em).

  Definitely, never change the root font-size. It is outdated and cause a lot of issues in the long run.

  0

  

  AbdulMalik•80

  @cyberweb8Posted almost 2 years ago

  @vcarames

  body {
    background-color: var(--clr-primary-1);
  
    font-family: var(--ff-base);
    font-weight: var(--fw-normal);
    font-size: var(--fs-normal);
  
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
  

  As you see above I included it in my body tag, so it should inherit all across the project, right? I am not someone who is enthusiastic about tinkering root font-size, but in the instruction it is suggested we use 15px. Thus I changed it in root and wanted to apply all over with one bullet, instead of using several times.

  0

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @cyberweb8

  It doesn’t affect the media query’s min-width so the 1200px /16= 75em is still valid.

  0