Profile Card Component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Shawn!

  The background positioning is tricky. I recommend to see ApplePieGiraffe solution on this challenge. His background positioning works well on any devices.

  Some feedback:

  • Alternative text (alt) for the image should be informative and human readable, not meaningless and hyphenated.
  • For any decorative images, you should leave the alt="" empty and add aria-hidden="true" to make all screen readers ignore the images. In this case the background pattern is decorative image.
  • For the person photo, you can write his name as the alt value.
  • For the stats, I recommend to use ul and wrap each item with li to make it more semantic.
  • I don't think you should limit the width of the body element.
  • You shouldn't change the html root font size. It can cause a lot of issues. Here's what an accessibility expert (Grace Snow) has said about it. (original comment)

  Yeah, I would never resize html/root font size down to 62.5% mainly because it is completely unnecessary, and it carries risk. You are correct you can mitigate against the accessibility issues by scaling the font size back up with 1.6rem on the body, BUT

  • not all elements inherit font size from the body so you have to remember to manually scale up them as well
  • you need to do extra testing for that reason
  • any rem sizes on third party components or plugins you bring in will need loads more overrides
  • because you’re changing an established default, you cannot guarantee it will work correctly for everyone on every device, operating system, browser and tech set up

  Basically it comes with a lot of risks for almost no benefit.

  There is no reason 1rem needs to equal 10px. As soon as you start thinking entirely in REM - building for alignment, proportionality and spacing - rather than thinking in pixels, the whole point disappears.

  That's it! Hopefully this is helpful!

  Marked as helpful

  0

  ---

  

  Shawn•90

  @ShawwnscottPosted about 3 years ago

  @vanzasetia Very helpful feedback thank you! with every new challenge i keep learning new things.

  0