Anatomy of a product card — from 87 to 38 elements, 0 divs
We take a real e-commerce product card, dissect it, identify 8 accessibility defects, and rebuild it from scratch. Same design, less than half the elements, 0 divs.
The Bariafurii blog
Tōdai.
灯台下暗しIt is darkest at the foot of the lighthouse.
Tōdai refuses that shadow.
Where to startRead the articles20 articles97 guidesLatest:
Three paths
Where to start?
01 — Understand
Understand
Discover accessibility, its stakes, and what users experience.
Explore — Understand02 — Build
Build
Code, patterns, fixes. Open this next to your IDE.
Explore — Build03 — Transform
Transform
Convince your team, drive compliance, quantify the cost of inaction.
Explore — Transform
Featured
The article of the moment
Latest
Recent articles
Perfect contrast does not exist
A AAA ratio guarantees nothing for someone with incomplete achromatopsia. The real solution is letting users choose their own colors, and not getting in their way.
Which HTML element should I use?
129 HTML, SVG and MathML elements usable in the body, and you still default to
<div>. This interactive mind map guides you by intent: say what you want to do, it shows you the right element.