Skip to content
Submitted almost 2 years ago

QR Code Component

Alex•110
@aadler91
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

Community feedback

  • Ola White•160
    @whitesoftxPosted almost 2 years ago

    Good work and well laid. But you need a quick fix to clean up your accessibly issue.

    It is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region. In HTML5, you should use elements like main, header, nav, and footer.

    For example:

      <body>
<main>
  <div class="card">
    <img src="images/image-qr-code.png" alt="QR code image, which links to frontendmentor">
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
  </main>

<footer>
  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://github.com/aadler91">Alexander Adler</a>.
  </div>
</footer>
</body>

    Let's keep learning... one step at a time.

    Marked as helpful
    0
    Alex•110
    @aadler91Posted almost 2 years ago

    @whitesoftx Thank you for this hint! I included the landmarks in all my projects to be consent with the HTML5 and ARIA rules :-)

    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