QR code component

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hey,

  It's hard to set general rules, when to embed images in your html and when to apply them as backgrounds. Every image though that adds extra meaning to the content or has a distinct purpose (like being a QR code that needs to be scanned) should be included in the html.

  Just think about it. How will a user who can't see the image will know there is an image there, if you set it as a background? There's no alt text, no aria-label, nothing, just an empty div (not sure how that gets announced - if it gets announced - by a screen reader but I'm fairly sure it's not sufficient).

  This is something that is easy to forget about so I thought I'd mention. :) I'd definitely include this image in the html. If you struggle to make it responsive, use this code snippet on the image:

  display: block;
  max-width: 100%;
  height: auto;
  

  Apart from this, your solution looks great btw!

  Marked as helpful

  3

  ---

  

  Roberto Yukio Miyamoto Arita•320

  @RyukioMiyamotoPosted over 2 years ago

  @FluffyKas you're absolutely right! Accessibility plays a big role in this matter as well

  1

  

  Zhemchuzhnyi Andrii•50

  @n3kk3llPosted over 2 years ago

  @FluffyKas Thanks for your feedback! I don't know why, but the same thing you said about screen readers came to me after I posted it. Now i am working to issues I created.

  1
• 

  Roberto Yukio Miyamoto Arita•320

  @RyukioMiyamotoPosted over 2 years ago

  Impecable work Andrii! I would just adjust the color on the <p> that's differing from the proposed design.

  As for the image, what I follow when solving the challenges is considering if the image would be something static or dynamic in a real project, maybe coming from the backend. For hero sections for example, I'd use the background solution as it won't likely change or have variations.

  For this QR Code challenge, in my conception, there could be another card with a different QR Code somewhere down the line, so I chose to make it a <img>.
  This is my personal take on this by the way, I have no idea if it's a common/good practice, I'll have to look it up later.

  Keep it up!

  Marked as helpful

  1

  ---

  

  Zhemchuzhnyi Andrii•50

  @n3kk3llPosted over 2 years ago

  @RyukioMiyamoto Thanks! I agree that description text in <p> looks bold, as heading. It wasn't expected. So i made it more grey for user to see the difference between heading and description.

  1