Cartes

Les cartes servent aux éléments répétés ou aux outils encadrés. Évitez les cartes dans des cartes, et gardez la bordure, les marges internes et la hiérarchie cohérentes dans un même ensemble. Les cartes rendues par les gabarits de ce système sont des tuiles liées en grille : un bloc bordé dont toute la surface est une seule ancre, avec une bordure en couleur d’accent au survol. Pour les cartes tapées dans le Markdown, les shortcodes card et cards sont l’interface de rédaction — voir les Shortcodes.

Les shortcodes card/cards sont l’équivalent côté rédaction — pas encore utilisés dans du contenu publié, mais stylés et prêts. Voici le même démonstratif, exécuté par le shortcode plutôt qu’écrit à la main :

Quand l’utiliser#

• Utilisez des cartes pour des éléments répétés du même genre, où chaque élément mène à une seule destination
• La carte entière est un seul lien — ne placez pas de liens ou de contrôles concurrents dans une carte
• N’imbriquez pas une carte dans une autre carte
• Gardez la bordure, les marges internes et la hiérarchie typographique cohérentes dans un même ensemble; les cartes du site sont à coins carrés, border border-line, accent au survol
• Lorsque la lectrice ou le lecteur compare des valeurs entre les éléments plutôt que d’y naviguer, utilisez plutôt une table
• Une autrice ou un auteur qui rédige en Markdown se sert des shortcodes card/cards pour déposer une grille ponctuelle dans un billet, sans créer un gabarit de liste comme l’exigent les quatre variantes rendues par les gabarits ci-dessous

Implémentation#

<div class="talks-link-grid">
  <a class="talks-link-card" href="/fr/talks/archive/">
    <span class="talks-link-card-label">Archives</span>
    <span class="talks-link-card-summary">Conférences, ateliers, webinaires, panels et interventions publiques précédents.</span>
  </a>
</div>

Le style des cartes vient de classes de composants dans assets/css/site.css; il n’y a pas de partiel de carte — chaque gabarit de liste écrit son propre balisage sur le motif partagé, et chaque contexte définit son propre conteneur de grille. La carte est l’ancre elle-même, le libellé et le résumé sont des éléments <span> à l’intérieur, et le résumé s’aligne de lui-même au bas de la tuile. Les classes card-item/card-inner/card-title du shortcode reprennent la même boîte à bordure et le même traitement d’accent au survol plutôt qu’un second langage visuel — la syntaxe Markdown exacte est sur les Shortcodes, générée à partir des gabarits eux-mêmes pour qu’elle ne puisse pas se périmer.

Variantes#

Accessibilité#

• Une carte est une seule ancre : son nom accessible se calcule à partir de tout son contenu — libellé, résumé, alt de l’image — donc un lecteur d’écran annonce la carte entière dans l’ordre du DOM et Tab ne s’y arrête qu’une fois
• Les libellés et les résumés sont des éléments <span>, pas des titres; la structure vient de la section englobante — la grille des conférences est un <nav> avec un aria-label, et seules les cartes non liées du bento portent des titres <h3>
• Les tuiles à image gardent un nom accessible quand le visuel porte le sens : les couvertures de livres utilisent alt="… cover", les tuiles de cartes heuristiques posent aria-label sur le lien, et l’initiale de couverture de repli est aria-hidden
• Aucune carte ne gère le focus ni n’écoute de touches — l’activation est l’Entrée native de l’ancre
• Évitez de placer un deuxième lien ou un bouton dans une carte : du contenu interactif imbriqué dans une ancre est du HTML invalide et inaccessible au clavier