Vanza Setia• 27,835
@vanzasetia
Posted
Hi, Rodriguez Facundo Gabriel! 👋
Here are some suggestions for improvements:
- Alternative should describe the image: Alternative text is not for telling the users the image fails to load. It should describe the purpose of the image. Describe what is the image about (QR code).
- Do not skip heading levels: Start from
<h1>. Heading levels must always be in order to give structure to a page. - Do not change the
<html>or the:rootfont size: It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?. - Remove extra element: You do not need
<div class="component">. You can use the<body>element as the flex container of the card. Then, use the<main>element as the card component. Also, you do not need<div class="attribution">. You can just use the<footer>. - Use padding to prevent child elements from touching the edges of the parent element: You can set
paddingon the card to push the element toward inside the card. For the image, you can remove themargin: 6% 6% 0 6%;and set the width to 100%. The same goes for the<div class="textContainer">, remove themarginand the div element itself.
I hope this helps. Happy coding! 👍
0
