Parcours
Construire
Du code. Des patterns. Des corrections. Ces articles sont faits pour être ouverts à côté de ton IDE.
13 articles — dont 9 en parcours guidé
Parcours guidé
De la sémantique HTML aux formulaires multi-étapes, chaque article résout un problème concret. Suis l'ordre ou pioche selon tes besoins.
Quelle balise HTML utiliser ?
129 balises HTML, SVG et MathML utilisables en body, et tu utilises toujours
<div>. Cette mind map interactive te guide par intention : dis ce que tu veux faire, elle te montre la balise qu'il te faut.Les tableaux ne sont pas l'ennemi
L'élément
<table>a été banni par réflexe après les années layout. Pourtant, pour des données tabulaires, c'est la seule bonne réponse. Et la plupart des sites le font mal — ou ne le font plus du tout.Autopsie d'une card produit — de 87 à 38 éléments, 0 div
Je prends une vraie card produit e-commerce, je la décortique, j'identifie 8 défauts d'accessibilité, et je la reconstruis de zéro. Même design, moins de la moitié des éléments, 0 div.
Le laissez-passer A-38 — Partie 1 : Poser la bonne question
33% des champs de formulaire ne disent pas ce qu'ils attendent. Labels, types, autocomplete, groupement : les fondations d'un formulaire que tout le monde peut remplir.
Le laissez-passer A-38 — Partie 2 : Écouter la réponse
Validation, messages d'erreur, résumé d'erreurs, composants custom : la deuxième moitié de la conversation entre ton formulaire et ses utilisateurs.
Le laissez-passer A-38 — Partie 3 : Guider jusqu'au bout
Indicateur de progression, persistance de la saisie, récapitulatif, gestion du focus : tout ce qu'il faut pour qu'un formulaire multi-étapes ne devienne pas un labyrinthe.
Le fil, le labyrinthe et le stepper
Fil d'Ariane et stepper : deux patterns de navigation que tout le monde confond. Le HTML sémantique, l'ARIA, les séparateurs CSS, le schema.org — et les erreurs classiques qui les rendent invisibles.
ARIA, ce scalpel de l'accessibilité web
ARIA est indispensable quand le HTML ne suffit pas. Mais mal utilisé, il empoisonne. Cas légitimes, anti-patterns et tests avec un lecteur d'écran.
Trois factures, un seul code, zéro surcoût
Accessibilité, performance, référencement : trois scores, trois audits, trois équipes — sauf que les pratiques qui améliorent l'un améliorent les deux autres. Et ne rien faire, c'est payer trois fois.
Pour aller plus loin
Le contraste parfait n'existe pas
Un ratio AAA ne garantit rien pour une personne atteinte d'achromatopsie incomplète. Le vrai levier, c'est de laisser l'utilisateur choisir ses propres couleurs, et de ne pas lui mettre de bâtons dans les roues.
Les couleurs mentent
Daltonisme, contrastes insuffisants, forced-colors : tes interfaces mentent à une partie de ton audience. Voici comment construire un design qui dit la vérité à tout le monde.
Les soupes de div, les pavés d'or qui mènent à l'enfer numérique
La
<div>est l'élément le plus utilisé du web. Elle n'a pourtant presque aucun cas d'usage légitime. Chaque<div>posée à la place d'un élément sémantique coûte en accessibilité, en performance, en SEO et en GEO.Posez la souris : tout sur la navigation clavier
Focus invisible, ordre incohérent, pièges à clavier : ton interface exclut silencieusement des millions d'utilisateurs. Voici comment construire une navigation clavier solide.