Skip to content
Submitted almost 3 years ago

QR code component challenge

adilido99•90
@adilido99
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

any feedback is welcome

Community feedback

  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    Hay There ! Good Job on this challenge

    These below mentioned tricks will help you remove any Accessibility Issues

    -> Add Main tag after body like it should be your container

    -> For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc

    -> But use header tag only once in main heading element.

    -> I Think the "width the max is 100%" so don't use more then that (I may be wrong pls correct me if i am)

    -> The "p" element text is too light and use there given color for it

    Your all Accessibility Issues will solve by above steps👆

    -> for the Anchor tag "<a href="/" class="logo logo-img-1x">" use "#" insted of "/"

    -> Add <html lang="en"> under the Doctype [This is for html issue]

    Keep up the good work!

    Marked as helpful
    0
    adilido99•90
    @adilido99Posted almost 3 years ago

    @Crazimonk thank you so much for your support, i really appreciate it :)

    0
  • Anosha Ahmed•9,300
    @anoshaahmedPosted almost 3 years ago

    hey good job on this challenge! your report above shows a few issues though:

    • wrap everything in your body in <main> OR use semantic tags! if you're using div right after body, then give them a role=""; however, it's a little frowned upon to use role right after body, so try to stick with semantic tags instead. you can read more about landmarks here
    • you should have at least one <h1> in your webpage

    here is a list i made of accessibility issues & best practices

    hope this helps :))

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord