@MelvinAguilar
Posted
Hi @guidoaguiar π, good job on completing this challenge, and welcome to the Frontend Mentor Community! π
I have some suggestions you might consider to improve your code:
- Your solution must contain a title tag with the name of the challenge and an icon.
<title>Frontend Mentor | QR code component</title>
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
- Instead of using
<section>
to wrap the whole content, use<main>
tag.
- Use
<footer>
instead of<div class="attribution">
. The<footer>
element contains authorship information or remove it from your code if you don't use it.
- To make alternative texts more useful, add descriptive text to the alt attribute of the QR image to explain what the QR image does.
- Use an h1 tag for your solution. The
<h1>
element is the main heading on a webpage, also, there should only be one<h1>
tag per page.
<h1>Improve your front-end skills by building projects</h1>
I hope those tips will help you! π
Good job, and happy coding! π
Marked as helpful
@guidoaguiar
Posted
@MelvinAguilar Thank you, Melvin, I reviewed your tips and made changes to the code, I'll keep this feedback in mind, it was constructive to see what I have missed.
@MelvinAguilar
Posted
@guidoaguiar Hi, please remove aria-hidden="true"
from the image tag, this image is not a decorative image, this image is the main content of the component, You can read more about alternative text here.
Here is the solution for this challenge from an accessibility expert: Simple single-card challenge built with scss (Grace-snow)
Marked as helpful