QR Code Scanner - Material Card Design

Community feedback

• 

  Adriano•38,330

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Devesh shukla, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  Example:

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  2

  ---

  

  Devesh shukla•280

  @deveshshuklaPosted almost 2 years ago

  @AdrianoEscarabote Thanxs brother for sharing useful tips... I will remember these points 🤗

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Dev Shukla!

  I don't recommend adding a hover effect on the heading. The users might expect that those are links or any other interactive elements. It can be confusing when it doesn't do anything. Also, the heading (<span class="heading">) should be a h1.

  Some suggestions about alternative text:

  • It should not be hyphenated like code or class name. It should be human-readable.
  • It should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (img) so the screen reader will pronounce it as an image.
  • It should describe what will happen after the users scan the QR code.
  • An example of the QR code alternative text, "QR code to frontendmentor.io".

  Remove all br elements. Screen readers may read out br elements as "break" and not read the content within brs. Let lines wrap where they need to. Learn more about the issue by visiting the MDN documentation page for br.

  <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns

  Avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

  The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

  I hope this helps. Happy coding!

  Marked as helpful

  2

  ---

  

  Devesh shukla•280

  @deveshshuklaPosted almost 2 years ago

  @vanzasetia Thanxs brother for sharing useful tips... I will remember these points 🤗

  1