my solution

Community feedback

• 

  s17•60

  @s17-gitPosted over 1 year ago

  Hello, 1- Why do you have two (2) html structure ?

  2- Try to use relative path <img src="./image-qr-code.png" /> instead of this <img src="image-qr-code.png"></img>

  Marked as helpful

  1
• 

  Ola•520

  @Great-kiolaPosted over 1 year ago

  Hello when I cloned your repo into mine in noticed some errors you should try to fix

  • Try to put the CSS link in the head tag no in the body
  • Add an alt tag to the img
  • The URL of the image you linked to does not exist in the repo. If you're linking to a file, it should be in your repo.

  Try those and see if it works.

  Marked as helpful

  1

  ---

  

  Hugo8814•200

  @Hugo8814Posted over 1 year ago

  @Great-kiola yep that fixed it thanks

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  iMAGES 📸:

  • alt text is a descriptive text attribute added to an HTML image tag that provides a textual description of an image for users who are visually impaired or cannot see the image for any other reason.

  ---

  • The purpose of alt text is to convey the meaning and context of an image to these users so that they can understand the content and information conveyed by the image.

  ---

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

  ---

  • E.g. alt="QR code to frontendmentor.io"

  ---

  HEADINGS ⚠️:

  ---

  • This solution has also generated accessibility error report due to lack of level-one heading <h1>

  ---

  • Every site must want at least one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0