Frontend Mentor | QR code component solution coding challenge solution

@purnimakumarr

Posted about 2 years ago

Hi Joao,

I would suggest these changes:

There is 1 accessibility issue. You can remove that by replacing the <h2></h2> tag with an <h1></h1> tag. It is a good practice to put the first heading of your site in an <h1></h1> tag. It makes your site more accessible.
Also, I would suggest to put the <footer></footer> outside of the <main></main>. Footer is not a part of the main content of the website. So, your code would look something like this:-

<body>
    <main>
           main content goes here...
    </main>
    <footer>
         attribution goes here...
    </footer>
</body>

And I see you are using a <div></div> tag for the QR code image. The issue is that it makes the code hard to read as one cannot know what the div is for unless they observe the CSS file, and also it is not an accessible option because screen readers see this as just an empty div and therefore, people using screen readers can't know that there is a QR code image there. The fix for this would be to use role and aria-label attributes. <div role="img" aria-label="A QR code to frontendmentor.io"></div> The role="img" specifies that the div is being used to render an image and aria-label attribute works as alt-text for the image in this case.
Lastly, you can put the CSS in the index.html file in the CSS file. It is good practice to put all the styles in a seperate CSS file.

Marked as helpful

QR code component solution