Andy Bell propose une solution élégante pour contourner l’interdiction HTML d’imbriquer des éléments interactifs : créer une fausse zone cliquable qui reste accessible. L’idée, c’est d’utiliser un pseudo-élément positionné en absolu qui couvre toute la card, tout en gardant les vrais boutons ou liens interactifs au-dessus via z-index. Ça évite le balisage dégueu avec des <div> cliquables partout.
Ce qui me plaît, c’est que ça reste propre côté DOM et que l’accessibilité n’est pas sacrifiée sur l’autel du design. Pas de role="button" sur des trucs qui n’en sont pas, pas de JavaScript tarabiscoté pour gérer les clics. Juste du CSS malin et un peu de réflexion sur la hiérarchie des interactions.
Bon, faut quand même faire gaffe : si tu multiplies les zones cliquables imbriquées, ça peut vite devenir le bordel pour l’utilisateur. Mais pour une card avec un lien principal et quelques actions secondaires, c’est nickel. Andy donne même un exemple concret avec du code commenté, ce qui aide à bien piger la mécanique. Bref, une technique à garder dans un coin.
Laisser un commentaire