@fernandolapaz
Posted
Hi π, perhaps some of this may interest you:
HTML π§±, ACCESSIBILITY β:
πΉSemantic elements:
- The main content of every document (the whole card in this case) should be wrapped with the
<main>
tag, just leave the attribution out. - There is no reason to skip headings, and every page should have an
<h1>
.
πΉThis is a meaningful image and therefore should have an alt text
with a description in case the user cannot see it for some reason.
CSS π¨:
πΉThe card must have a "max width" that matches the layout provided for the desktop version. And the height should be determined by the content, without the need to define it.
πΉThe images provided are already optimized, it is not necessary to assign them measurements.
πΉAlso, as part of the CSS Reset, the following is very useful regarding images:
picture,
img,
svg {
display: block;
max-width: 100%;
}
πΉLength units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units donβt scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).
And since you asked about this topic, I leave this in case you want to take a look at it: The Surprising Truth About Pixels and Accessibility π
Please let me know if you disagree with something or if you would like more information on any of these topics.
If you have any questions Iβm here to answer so don't hesitate π
Regards,
Marked as helpful
@evtimov-ptr
Posted
@fernandolapaz
Hello Fer,
Appreciate all of the valuable advices πI will check the topic regarding the pixels. Also I just checked your youtube channel and saw the QR code component solution, loving the fact that you are using vars for the colors, I might also start doing it that way as it looks cleaner in my opinion. Also amazing solution overall π
@fernandolapaz
Posted
@evtimov-ptr
Hi,
You are welcome π
And thank you so much! π