Path
Build
Code. Patterns. Fixes. These articles are meant to be open next to your IDE.
13 articles — 9 in guided path
Guided path
From semantic HTML to multi-step forms, each article solves a real problem. Follow the order or pick what you need.
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.Tables are not the enemy
The
<table>was banned by reflex after the layout years. Yet for tabular data, it's the only right answer. And most sites get it wrong — or don't use it at all.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.
Beware of the Leopard — Part 1: Asking the right question
33% of form fields don't say what they expect. Labels, types, autocomplete, grouping: the foundations of a form everyone can fill in.
Beware of the Leopard — Part 2: Listening to the answer
Validation, error messages, error summaries, custom components: the second half of the conversation between your form and its users.
Beware of the Leopard — Part 3: Guiding to the end
Progress indicator, input persistence, review summary, focus management: everything needed so a multi-step form doesn't become a maze.
The Thread, the Maze, and the Stepper
Breadcrumbs and steppers: two navigation patterns everyone confuses. The semantic HTML, ARIA, CSS separators, schema.org, and the classic mistakes that make them invisible.
ARIA, the scalpel of web accessibility
ARIA is essential when HTML falls short. But misused, it poisons. Legitimate cases, anti-patterns and testing with a screen reader.
Three bills, one codebase, zero overhead
Accessibility, performance, SEO: three scores, three audits, three teams, except the practices that improve one improve the other two. And doing nothing means paying three times.
Go further
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.
Colors lie
Color blindness, insufficient contrast, forced-colors: your interfaces lie to part of your audience. Here's how to build a design that tells the truth to everyone.
Div soup, good intentions paving the road to digital hell
The
<div>is the most used element on the web. Yet it has almost no legitimate use case. Every<div>placed instead of a semantic element costs you in accessibility, performance, SEO and GEO.Put down the mouse: everything about keyboard navigation
Invisible focus, inconsistent order, keyboard traps: your interface silently excludes millions of users. Here's how to build solid keyboard navigation.