Vanza Setia• 27,795
@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:root
font 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
padding
on 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 themargin
and the div element itself.
I hope this helps. Happy coding! 👍
0