Carte cliquable

Une carte est une zone de contenu proposant généralement un titre, une phrase de résumé et un lien menant vers des informations complémentaires.

Règles d’implémentation pour l’accessibilité

  • Une carte cliquable est une zone délimitée par une div qui contient un titre, du texte et un lien. Une mauvaise pratique consiste à englober le conteneur div dans un lien.
  • En recourant au CSS, nous allons pouvoir implémenter un lien à l’intérieur du conteneur et faire en sorte que sa surface cliquable recouvre tout le conteneur.

Visuel

Carte cliquable

Extrait de code pour créer une carte cliquable valide selon le W3C et les critères d'accessibilité numérique.

Extraits de code

Code HTML

<div class="carte">
     <h2><a href="...">Carte cliquable</a></h2>
     <p>Extrait de code pour créer une carte cliquable valide selon le W3C et les critères d'accessibilité numérique.</p>
</div>

Code CSS

:root {
  --SHADOW-BOX: 0 0 1em gray;
  --WHITE-color: white;
  --DARK-color: black;
  --BACKGROUND-HOVER-LIGHT-color: silver;
  --BACKGROUND-HOVER-DARK-color: #575757;
}
.carte {
  margin: 1em 0;
  box-shadow: var(--SHADOW-BOX);
  padding: 0;
  background-color: var(--WHITE-color);
  transition: 0.5s;
  position: relative;
  height: 250px;
  width: 300px;
}
.carte h2 {
  font-size: 1.5em;
  margin: 0;
  padding: 0.25em;
  background-color: var(--BLACK-color);
}
.carte h2::after {
  width: 0;
  height: 0;
}
.carte p {
  padding: 0.5em;
  color: var(--BLACK-color);
}
.carte a {
  color: var(--WHITE-color);
  border: 0;
}
/** L'astuce de code qui permet d'avoir un lien à l'intérieur du conteneur qui recouvre toute la carte cliquable */
.carte a::before {
  bottom: 0;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
/** si on veut une flèche après le lien */
.carte a::after {
  --icon-size: 1.5rem;
  content: "";
  float: right;
  background-color: currentColor;
  padding-top: var(--icon-size);
  height: var(--icon-size);
  width: var(--icon-size);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url(../images/arrow.svg);
  mask-image: url(../images/arrow.svg);
}
/** Personnaliser si besoin les états hover et focus */
.carte:hover,
.carte:focus {
  background-color: var(--BACKGROUND-HOVER-LIGHT-color);
}
.carte:hover h2,
.carte:focus h2 {
  background-color: var(--BACKGROUND-HOVER-DARK-color);
}
.carte:hover a,
.carte:focus a {
  text-decoration: none;
}