QR CODE COMPONENT

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Spencer! 👋

  Good job on completing your first challenge! 👏

  I recommend writing the attribute without any space and making sure the value is wrapped with quotes, like this class="container".

  Even though it's not a big deal, I recommend not uppercasing the title. Some screenreaders might spell it letter by letter.

  I suggest improving the alternative text by telling the users what the QR code is about. In this case, it contains a URL to https://www.frontendmentor.io/. So, alternative text like "QR code to frontendmentor.io" would be more informative.

  You can remove the type="text/css" from the link tag. It might be redundant but it's okay to keep it there if you want.

  I don't recommend changing the html or the :root font size. It can cause huge accessibility implications for those users with different font size or zoom requirements. I suggest reading this article by Josh Comeau where he tells about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.

  I hope this information is useful! Keep up the excellent work! 👍

  1

  ---

  

  Spencer Brian Baiden•10

  @spencerbbrianPosted over 2 years ago

  @vanzasetia Thank you so much. I have enough motivation to go for a second project.

  0
• 

  Sebastian Black•60

  @SebbyBlackPosted over 2 years ago

  There are a few suggestions I can see, though some specifically relate to this project and not in general.

  • Since there is only one h1, there's not really a need to give it a class, instead just style the h1 itself. (Specific to this project)

  • You could change your "container" div into a section tag, not only will this make it a bit more readable as to what is going on, but it's also more readable for web browsers as well. (General use depending on content of page)

  • The "worded-card" div seems redundant. You could have the "main" tag be your container, and the "container div" (or section) be the worded-card portion. (General use)

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @SebbyBlack Regarding the div tag, I don't think it will make it more meaningful for the screenreader if you change it to a section tag. section would have meaning for the screenreader if it has aria-labelledby attribute pointing the heading tag. Otherwise, it's the same as div.

  Also, it's okay to use div since it's not causing any accessibility issues. 😉

  0