Accessibilité et référencement d'un composant de notation 5 étoiles en CSS HTML

Extrait d'avis accessible. Créer un bloc d'évaluation 5 étoiles vectorielles avec CSS et buttons, conforme accessibilité (WAI-ARIA) avec navigation au clavier et lecteurs d'écrans.

Rechercher un autre article (3 caractères )

lundi 26 mai 2025 par Anthony LADEUIL

Les extraits d'avis. C'est un classique sur les sites internet mais qui peut comporter des difficultés pour l'accessibilité, notamment pour le rendu vocal et la navigation clavier.

Voici un exemple d'une implémentation simple qui répond à ces besoins tout en conservant un aspect visuel habituel.

Deux types de blocs sont présentés :

un bloc cliquable pour effectuer un vote (mécanique de vote à coder de votre côté) ;
un bloc de simple visualisation de note, vocalisé en lecture d'écran.

Pour les deux versions, le mode sombre est pris en charge et les taux de contraste sont respectés.

Le but de cet article n'est pas de fournir un plugin. Il faut donc raccorder ça à votre système de gestion de contenu.

Pour visualiser un comportement réel, faites un petit tour sur les photos… et notez une photo !

L'affichage de l'infobulle est géré par une fonction à retrouver sur la page Côté blog Kortic.

Exemples

Étoiles cliquables

Passez la souris ou naviguez au clavier.

Agrandies si @media (any-hover: none)

Étoiles cliquables larges

Passez la souris ou naviguez au clavier

Noté 1.3 sur 5

Étoiles non cliquables

Noté 3.6 sur 5

Étoiles non cliquables et taille réduite

Noté 2.3 sur 5

Extrait du code des blocs

<!-- bloc cliquable étoiles -->
<div class="five-rate-active"><button type="button" data-popover class="rate-value-empty" aria-label="Noter 1 sur 5"><span aria-hidden="true">1</span></button><button type="button" data-popover class="rate-value-empty" aria-label="Noter 2 sur 5"><span aria-hidden="true">2</span></button><button type="button" data-popover class="rate-value-empty" aria-label="Noter 3 sur 5"><span aria-hidden="true">3</span></button><button type="button" data-popover class="rate-value-empty" aria-label="Noter 4 sur 5"><span aria-hidden="true">4</span></button><button type="button" data-popover class="rate-value-empty" aria-label="Noter 5 sur 5"><span aria-hidden="true">5</span></button></div>

<!-- bloc désactivé étoiles -->
<div class="five-rate-inactive"><p class="screen-readers">Noté 3.6 sur 5</p><span  class="rate-value-full"><span aria-hidden="true"><!-- --></span></span><span  class="rate-value-full"><span aria-hidden="true"><!-- --></span></span><span  class="rate-value-full"><span aria-hidden="true"><!-- --></span></span><span  class="rate-value-half"><span aria-hidden="true"><!-- --></span></span><span  class="rate-value-empty"><span aria-hidden="true"><!-- --></span></span></div>

Fonction d'affichage

Exemple de fonction PHP d'affichage des blocs étoiles

function displayRate($value, $label = null, $enable = true, $size = null, $json = null): string
  {
    $value = max(0, min(5, $value)); // Contrainte entre 0 et 5
    $tag = $enable ? 'button' : 'span';
    $label = sprintf($label ?? translate('FIVE_RATE_BLOC_LABEL', false), $value);

    // Définition des valeurs
    if ($value == 0) {
      $result = array_fill(0, 5, 0); // Toutes les étoiles sont "empty"
    } else {
      $range = range(1, floor($value));
      if ($value > 1 && $value < 5 && !is_int($value)) {
        $range[] = $value; // Ajout de la demi-étoile
      }
      $result = array_merge($range, array_fill(count($range), 5 - count($range), 0)); // Complétion à 5
    }

    // Génération des classes CSS
    $classes = ['five-rate-' . ($enable ? 'active' : 'inactive')];
    if ($size) $classes[] = $size;

    // Début du rendu
    $dom = '<div class="' . implode(' ', $classes) . '"'
      . ($enable && $json ? ' data-rate=\'' . $json . '\'' : '') . '>';

    if ($value !== 0) {
      $dom .= '<p class="screen-readers">' . $label . '</p>';
    }

    foreach ($result as $i => $v) {
      $rate = $i + 1;
      $val = $v > 0 ? (($rate / $v) == 1 ? 'full' : 'half') : 'empty';

      $dom .= "<$tag " . ($tag === 'button' ? 'type="button"' : '') . " class=\"rate-value-$val\""
        . ($enable ? ' aria-label="' . sprintf(translate('FIVE_RATE_BUTTONS_ARIA_LABEL', false), $rate) . '"' : '')
        . '>';
      $dom .= '<span aria-hidden="true">' . ($enable ? $rate : '<!-- -->') . '</span>';
      $dom .= "</$tag>";
    }

    $dom .= '</div>';
    return $dom;
  }

Une version alternative pour l'affichage des étoiles non cliquables, avec moins d'éléments dans le code. La mise en forme spécifique se trouve aussi dans la feuille de styles.

L'avantage de cette méthode est que l'affichage est plus graduel. Par exemple, si la note collectée est de 4,3 sur 5, l'affichage des étoiles en surbrillance sera de 4,3×4×5 = 86%.

Trois dimensions sont possibles, plus variantes « bulle » et monochrome.

Taille par défaut, note 3.3
class="notation"

noté 3,3 sur 5

160×32 pixels

Taille réduite, note 0.75
class="notation-s"

noté 0,75 sur 5

80×16 pixels

Taille réduite et bulles, note 3.65,
class="notation-s monochrome bullets"

noté 3,65 sur 5

80×16 pixels

Taille minimale, note 2.55
class="notation-xs monochrome"

noté 2,55 sur 5

50×10 pixels

Restitution des notes

Gérer un système de notation veut aussi dire qu'il faut afficher ces notes. Pour ce faire, il faut aussi prévoir une lecture compréhensible avec les technologies d'assistance. Rien de bien compliqué mais nécessaire.

Exemple courant : 3/5 (415 avis). L'inconvénient de cet affichage est qu'un lecteur d'écran va restituer la note comme « trois barre oblique cinq ». Il faut donc un peu plus de données.

Un peu comme ça :

La note actuelle est de 3 sur 5, 415 avis

. Ça y ressemble beaucoup non ? En réalité, le code est un peu plus « parlant ».

Il est bien entendu conseillé de poser le balisage nécessaire pour les microdata, type schema.org. Il existe un outil de test pour valider le balisage.

<meta itemprop="ratingValue" content="3">
<meta itemprop="ratingCount" content="415">
<span class="screen-readers">La note actuelle est de 3 sur 5, 415 avis</span>
<span aria-hidden="true">3/5 (415 avis)</span>

Le texte restitué est beaucoup plus sympa pour les utilisateurs qui en ont besoin : La note actuelle est de trois sur cinq, quatre cent quinze avis.

L'étape suivante est de générer un affichage graphique qui soit tout aussi parlant. Exemple d'affichage d'une échelle de votes compatible avec les lecteurs d'écran.

5 étoiles sur 5: 4 avis sur 7 exprimés
4 étoiles sur 5: 1 avis sur 7 exprimés
3 étoiles sur 5: 2 avis sur 7 exprimés
2
1

<dl class="rating-scale ml-0 ignore-dot" aria-label="Détails des 7 avis">
  <dt>
    <span aria-hidden="true">5</span>
    <span class="screen-readers" id="dt_En6rS"> 5 étoiles sur 5</span>
  </dt>
  <dd>
    <span class="scale" role="img" aria-label="57%  des utilisateurs ont noté 5 étoiles">
      <span style="width:57%"></span>
    </span>
    <span aria-describedby="dt_En6rS">4 avis<span class="screen-readers"> sur 7  exprimés</span></span>
  </dd>
  <dt>
    <span aria-hidden="true">4</span>
    <span class="screen-readers" id="dt_VXjYi"> 4 étoiles sur 5</span>
  </dt>
  <dd>
    <span class="scale" role="img" aria-label="14%  des utilisateurs ont noté 4 étoiles">
      <span style="width:14%"></span>
    </span>
    <span aria-describedby="dt_VXjYi">1 avis<span class="screen-readers"> sur 7  exprimés</span></span>
  </dd>
  <dt>
    <span aria-hidden="true">3</span>
    <span class="screen-readers" id="dt_6Xx-c"> 3 étoiles sur 5</span>
  </dt>
  <dd>
    <span class="scale" role="img" aria-label="29%  des utilisateurs ont noté 3 étoiles">
      <span style="width:29%"></span>
    </span>
    <span aria-describedby="dt_6Xx-c">2 avis<span class="screen-readers"> sur 7  exprimés</span></span>
  </dd>
  <dt aria-hidden="true">2</dt>
  <dd aria-hidden="true">
    <span class="scale"></span>
  </dd>
  <dt aria-hidden="true">1</dt>
  <dd aria-hidden="true">
    <span class="scale"></span>
  </dd>
</dl>

Feuille de styles

Les images (3 uniquement) sont embarquées directement dans la feuille de style en data:image/svg+xml et utilisées sous forme de mask sur les pseudo classes :before et :after. De cette manière, les couleurs sont gérées en utilisant les couleurs définies dans les variables de la feuille de styles globale.

Les variables personnalisées des styles ci-dessous ont des fallback par sécurité.

/* Définition des variables personnalisées pour les images embarquées */

[class*="five-rate-"], .rating-scale, figure[class*="notation"] {
  /* angles 0°
  --rating-mask-full: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m16.04,0l4.89,10.5,11.07,1.7-7.98,8.24,1.88,11.56-9.86-5.49-9.93,5.49,1.88-11.56L0,12.19l11.07-1.7L16.04,0Z"/></svg>');
  --rating-mask-half: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m16,.08v26.45l-9.89,5.47,1.88-11.56L0,12.19l11.07-1.7L16,.08Z"/></svg>');
  --rating-mask-empty: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m25.91,32l-9.87-5.49-9.94,5.49,1.88-11.56L0,12.2l11.06-1.69L16.04,0l4.9,10.51,11.06,1.69-7.98,8.23,1.88,11.56ZM2.04,12.89l6.97,7.2-1.64,10.06,8.66-4.78,8.59,4.78-1.64-10.06,6.97-7.19-9.67-1.48-4.26-9.14-4.32,9.13-9.67,1.48Z"/></svg>');
  */
  /*
  Angles arrondis */
  --rating-mask-full: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.97,1.32l3.99,8.58c.06.14.24.27.39.29l9.14,1.41c1.08.17,1.34.95.58,1.73l-6.64,6.87c-.1.1-.16.3-.14.44l1.55,9.55c.19,1.16-.49,1.63-1.51,1.07l-8.03-4.48c-.14-.08-.36-.08-.5,0l-8.11,4.49c-1.02.56-1.7.08-1.51-1.07l1.55-9.56c.02-.14-.04-.34-.14-.44L.94,13.32c-.76-.79-.5-1.57.58-1.73l9.14-1.41c.15-.02.32-.15.39-.29L15.1,1.32c.52-1.09,1.35-1.09,1.86,0Z"/></svg>');
  --rating-mask-half: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,26.73c-.08,0-.15.02-.21.05l-8.11,4.49c-1.02.56-1.7.08-1.51-1.07l1.55-9.56c.02-.14-.04-.34-.14-.44L.94,13.32c-.76-.79-.5-1.57.58-1.73l9.14-1.41c.15-.02.32-.15.39-.29L15.1,1.32c.25-.52.57-.79.9-.81v26.22Z"/></svg>');
  --rating-mask-empty: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M7.05,31.5c-.21,0-.4-.06-.57-.17-.36-.26-.51-.75-.4-1.4l1.53-9.41c.01-.06-.03-.18-.07-.22L1,13.53c-.43-.44-.59-.92-.45-1.33.14-.41.55-.69,1.16-.79l9-1.38c.06-.01.17-.09.2-.15L14.9,1.44c.29-.61.69-.94,1.14-.94h0c.45,0,.85.34,1.13.95l3.92,8.44c.03.06.13.14.2.15l9,1.38c.61.09,1.02.37,1.16.79.14.42-.02.89-.45,1.33l-6.53,6.76s-.08.16-.07.22l1.53,9.4c.1.65-.04,1.15-.4,1.4-.37.25-.88.22-1.45-.1l-7.9-4.41c-.06-.03-.19-.03-.25,0l-7.98,4.42c-.32.18-.62.26-.88.26ZM16.03.99c-.24,0-.49.24-.69.66l-3.99,8.44c-.1.21-.34.39-.57.42l-9,1.38c-.41.06-.69.23-.77.46s.05.53.34.83l6.54,6.77c.15.16.24.43.2.64l-1.53,9.41c-.07.44,0,.78.2.92.2.14.54.09.93-.12l7.98-4.42c.21-.12.52-.11.73,0l7.9,4.41c.39.22.73.27.93.13.2-.14.27-.47.2-.92l-1.53-9.4c-.03-.22.05-.49.2-.64l6.54-6.76c.29-.3.41-.6.34-.83-.08-.23-.36-.4-.77-.46l-9-1.38c-.23-.04-.47-.22-.57-.43l-3.92-8.44c-.2-.42-.44-.67-.69-.67Z"/></svg>');
  --foreground-outline: var(--canvasText, gray);
}

figure.mask-bullets[class*="notation"] {
  --rating-mask-empty: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,31c-8.27,0-15-6.73-15-15S7.73,1,16,1s15,6.73,15,15-6.73,15-15,15ZM16,4.75c-6.2,0-11.25,5.05-11.25,11.25s5.05,11.25,11.25,11.25,11.25-5.05,11.25-11.25-5.05-11.25-11.25-11.25Z"/></svg>');
  --rating-mask-full: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,2.25c7.59,0,13.75,6.16,13.75,13.75s-6.16,13.75-13.75,13.75S2.25,23.59,2.25,16,8.41,2.25,16,2.25ZM16,31c-8.27,0-15-6.73-15-15S7.73,1,16,1s15,6.73,15,15-6.73,15-15,15ZM16,3.5c-6.89,0-12.5,5.61-12.5,12.5s5.61,12.5,12.5,12.5,12.5-5.61,12.5-12.5S22.89,3.5,16,3.5Z"/></svg>');
  --foreground-outline:  rgb(102,156,49);
}

@media (prefers-color-scheme: dark) {
  figure.mask-bullets[class*="notation"] {
    --foreground-outline: yellowgreen;
  }

}

:root.contrast [class*="five-rate-"], :root.contrast .rating-scale, :root.contrast figure[class*="notation"] {
  --foreground-outline: var(--basic-color, black);
}

@media (prefers-color-scheme: dark) {
  :root.contrast [class*="five-rate-"], :root.contrast .rating-scale, :root.contrast figure[class*="notation"] {
    --foreground-outline: var(--basic-color, white);
  }
}

@media (max-width: 63.9375rem) {
  [class*="five-rate-"] {
    --size-small: 1rem;
    --size-medium: 1.5rem;
    --size-large: 2rem;
  }
}

@media (min-width: 64rem) {
  [class*="five-rate-"] {
    --size-small: 1.5rem;
    --size-medium: 2rem;
    --size-large: 2.5rem;
  }
}

[class*="five-rate-"] {
  display: inline-flex;
  flex: none;
  flex-flow: row;
  text-align: center;
  margin: auto;
  white-space: nowrap;
}

[class*="rate-value"] {
  width: var(--size-medium);
  height: var(--size-medium);
  font-size: inherit;
  position: relative;
  margin: 0 !important;
}

[class*="rate-value"]:before,
[class*="rate-value"]:after {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  position: absolute;
  content: '';
  inset: 0;
}

[class*="rate-value"]:before {
  background-color: var(--foreground-outline);
  -webkit-mask-image: var(--rating-mask-empty);
  mask-image: var(--rating-mask-empty);
}

[class*="five-rate-"].larger [class*="rate-value"] {
  width: var(--size-large);
  height: var(--size-large);
}

[class*="five-rate-"].smaller [class*="rate-value"] {
  width: var(--size-small);
  height: var(--size-small);
}

[class*="five-rate-"] button [aria-hidden="true"] {
  white-space: nowrap;
  overflow: hidden;
  width: 0 !important;
  height: 0 !important;
  text-indent: -6.25rem;
  line-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0;
}

.rate-value-half:before {
  -webkit-mask-image: var(--rating-mask-half);
  mask-image: var(--rating-mask-half);
  background-color: var(--yellow, orange);
}

/* ajout d'une bordure de contraste en mode clair pour les demies étoiles */
.rate-value-half:after {
  -webkit-mask-image: var(--rating-mask-empty);
  mask-image: var(--rating-mask-empty);
  background-color: var(--foreground-outline);
}

@media (prefers-color-scheme: dark) {
  /* bordure de contraste en arrière en mode dark */
  .rate-value-half:before {
    z-index: 1;
  }

  .rate-value-half:after {
    z-index: 0;
  }
}

.rate-value-full:before {
  -webkit-mask-image: var(--rating-mask-full);
  mask-image: var(--rating-mask-full);
  background-color: var(--yellow, orange);
}

.five-rate-active:focus-within button:before {
  -webkit-mask-image: var(--rating-mask-full);
  mask-image: var(--rating-mask-full);
  background-color: var(--link-color,  rgb(93,63,224));
}

/*
Gestion des changements visuels à la navigation clavier = :hover
 */
.five-rate-active button:focus ~ [class*="rate-value"]:before {
  -webkit-mask-image: var(--rating-mask-empty);
  mask-image: var(--rating-mask-empty);
  background-color: var(--foreground-outline);
}

@media (prefers-color-scheme: light) {
  /* ajout d'une bordure de contraste en mode clair */
  .rate-value-full:after, .five-rate-active:focus-within button:after {
    -webkit-mask-image: var(--rating-mask-empty);
    mask-image: var(--rating-mask-empty);
    background-color: var(--foreground-outline);
  }

  .five-rate-active:focus-within button:after {
    background-color: transparent;
  }
}

@media (any-hover: hover) {
  .five-rate-active:hover button:before {
    -webkit-mask-image: var(--rating-mask-full);
    mask-image: var(--rating-mask-full);
    background-color: var(--link-color,  rgb(93,63,224));
  }

  .five-rate-active:hover button:after {
    background-color: transparent;
  }

  .five-rate-active button:hover ~ [class*="rate-value"]:before {
    -webkit-mask-image: var(--rating-mask-empty);
    mask-image: var(--rating-mask-empty);
    background-color: var(--foreground-outline);
  }
}

.five-rate-inactive * {
  cursor: default !important;
}

/*
 *
 *
 *
Affichage alternatif de la note en pourcentage

Exemples :

<figure aria-label="Évaluation actuelle (image 5 étoiles)" class="notation">
    <span role="img" aria-labelledby="rating-647da09c0ab9d" style="width: 66%"></span>
    <figcaption class="screen-readers" id="rating-647da09c0ab9d">noté 3,3 sur 5</figcaption>
</figure>

<figure aria-label="Évaluation actuelle (image 5 étoiles)" class="notation-xs">
    <span role="img" aria-labelledby="rating-647da09c0aba3" style="width: 51%"></span>
    <figcaption class="screen-readers" id="rating-647da09c0aba3">noté 2,55 sur 5</figcaption>
</figure>

 *
*/
figure[class*="notation"] {
  position: relative;
  display: inline-block;
  width: 10rem; /* 160px */
  height: 2rem; /* 32px */
  vertical-align: middle;
}

figure[class*="notation"]:before {
  -webkit-mask-image: var(--rating-mask-empty);
  -webkit-mask-repeat: repeat-x;
  mask-image: var(--rating-mask-empty);
  mask-repeat: repeat-x;
  content: "\A0" / "";
  inset: 0;
  position: absolute;
  background-color: var(--foreground-outline);
}

figure.notation-s {
  width: 5rem; /* 80px */
  height: 1rem; /* 16px */
}

figure.notation-xs {
  width: 3.125rem; /* 50px */
  height: 0.625rem; /* 10px */
}

figure[class*="notation"] [role='img'] {
  position: absolute;
  inset: 0;
}

figure[class*="notation"] [role='img']:after {
  -webkit-mask-image: var(--rating-mask-full);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: contain;
  mask-image: var(--rating-mask-full);
  mask-repeat: repeat-x;
  mask-size: contain;
  content: "\A0" / "";
  position: absolute;
  inset: 0;
  background-color:  rgb(102,156,49);
}

figure[class*="notation"][data-rate-value^="0.1"] [role='img']:after {
  -webkit-mask-size: cover;
  mask-size: cover;
}

@media (prefers-color-scheme: dark) {
  figure[class*="notation"] [role='img']:after {
    background-color: yellowgreen;
  }
}

/*
afficher les blocs en noir sans mode contrasté
 */
figure[class*="notation"]:before, figure[class*="notation"].monochrome [role='img']:after {
  background-color: var(--basic-color, black);
}

/*
afficher les blocs en blanc en mode sombre sans mode contrasté
 */
@media (prefers-color-scheme: dark) {
  figure[class*="notation"]:before, figure[class*="notation"].monochrome [role='img']:after {
    background-color: var(--basic-color, white);
  }
}

:root.contrast figure[class*="notation"] [role='img']:after {
  background-color: var(--basic-color);
}

/***********************
 * Restitution des votes
 **********************/

.rating-scale {
  padding: var(--size-large) calc(var(--size-large) / 2) calc(var(--size-large) / 2);
  max-width: 100%;
  width: 25rem; /* 400px */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: var(--background-color-secondary);
  border-radius: var(--radius, 0.625rem);
  text-align: left;
  margin: auto;
}

:root.contrast .rating-scale {
  box-shadow: 0 0 0 1px var(--box-shadow, grey) inset;
}

@media (max-width: 63.9375rem) {
  .rating-scale {
    --size-small: 1rem;
    --size-medium: 1.5rem;
    --size-large: 2rem;
  }
}

@media (min-width: 64rem) {
  .rating-scale {
    --size-small: 1.5rem;
    --size-medium: 2rem;
    --size-large: 2.75rem;
  }
}

.outer-line .rating-scale {
  background-color: var(--background-color-hero);
}

.rating-scale[aria-label] {
  padding-top: 2.5rem; /* 40px */
  position: relative;
}

.rating-scale[aria-label]:before {
  content: attr(aria-label);
  position: absolute;
  left: calc(var(--size-large) / 2);
  top: 0;
  line-height: 2.5rem; /* 40px */
  font-size: inherit;
}

.rating-scale > * {
  height: var(--size-small);
  line-height: var(--size-small);
  font-size: smaller;
  margin-bottom: 0.1875em;
}

.rating-scale dt {
  width: 2.5rem; /* 40px */
  position: relative;
  margin: 0 !important;
}

.rating-scale dt:before, .rating-scale dt:after {
  content: "";
  position: absolute;
  height: var(--size-small);
  width: calc(var(--size-medium) / 2);
  top: 50%;
  right: 0.625rem; /* 10px */
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  transform: translateY(-50%);
}

.rating-scale dt:not([aria-hidden]):before {
  -webkit-mask-image: var(--rating-mask-full);
  mask-image: var(--rating-mask-full);
  background-color: var(--yellow, orange);
}

.rating-scale dt[aria-hidden]:before {
  -webkit-mask-image: var(--rating-mask-empty);
  mask-image: var(--rating-mask-empty);
  background-color: var(--foreground-outline);
}

@media (prefers-color-scheme: light) {
  .rating-scale dt:after {
    -webkit-mask-image: var(--rating-mask-empty);
    mask-image: var(--rating-mask-empty);
    background-color: var(--foreground-outline);
  }
}

.rating-scale dd {
  display: inline-block;
  width: calc(100% - 2.5rem); /* 100% - 40px */
  position: relative;
}

.rating-scale dd span.scale {
  background-color:  rgba(0, 0, 0, 0.05);
  width: calc(100% - 4.375rem); /* 100% - 70px */
  border-radius: var(--radius);
  position: absolute;
  left: 0;
  top: 51%;
  transform: translateY(-50%);
  height: calc(var(--size-medium) / 2);
}

@media (prefers-color-scheme: dark) {
  .rating-scale dd span.scale {
    background-color:  rgba(0, 0, 0, 0.3);
  }
}

/* si gestion du mode « contrast » */
:root.contrast .rating-scale dd span.scale {
  box-shadow: 0 0 0 1px var(--basic-color, grey);
}

.rating-scale dd .scale span {
  display: block;
  background-color: var(--yellow, orange);
  height: calc(var(--size-medium) / 2);
  border-radius: var(--radius, 0.625rem);
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  font-size: 1px;
  color: transparent;
}

/* si gestion du mode « contrast » */
@media (prefers-color-scheme: light) {
  :root.contrast .rating-scale dd span.scale span {
    box-shadow: 0 0 0 1px var(--basic-color, black);
  }
}

.rating-scale dd > span:not(.scale) {
  position: absolute;
  color: var(--foreground-outline);
  line-height: var(--size-small);
  height: var(--size-small);
  top: 50%;
  width: 3.75rem; /* 60px */
  text-align: right;
  right: 0;
  transform: translateY(-50%);
}

@media (any-hover: none) {
  [class*="five-rate-active"] button {
    width: var(--size-medium, 2rem) !important;
    height: var(--size-medium, 2rem) !important;
  }
}

Performance et intégration des pictogrammes dans Hyper Text Language Markup et Cascading Style Sheets ?
En savoir plus

Version Tripadvisor™

L'affichage en version Tripadvisor habituelle peut vite générer beaucoup de code. Sur le même principe que la version ci-dessus, une proposition d'affichage simple et toujours accessible aux lecteurs d'écrans.

Tripadvisor « large »

Tripadvisor « standard »

Tripadvisor inférieur à 1

Tripadvisor monochrome

Code des blocs Tripadvisor

<p class="tripadvisor-component tripadvisor-larger"
  data-rate-value="0.86" data-popover="Note des voyageurs TripAdvisor : 4,3 sur 5" data-popover-css="font-size-18"> <span class="tripadvisor--figure">
        <span role="img" aria-label="Note des voyageurs TripAdvisor : 4,3 sur 5" style="width: 86%"></span>
    </span>
    <span aria-hidden="true">4,3/5</span>
</p>
<p class="tripadvisor-component"
  data-rate-value="0.8" data-popover="Note des voyageurs TripAdvisor : 4 sur 5" data-popover-css="font-size-18">    <span class="tripadvisor--figure">
        <span role="img" aria-label="Note des voyageurs TripAdvisor : 4 sur 5" style="width: 80%"></span>
    </span>
    <span aria-hidden="true">4/5</span>
</p>
<p class="tripadvisor-component"
  data-rate-value="0.14" data-popover="Note des voyageurs TripAdvisor : 0,7 sur 5" data-popover-css="font-size-18"> <span class="tripadvisor--figure">
        <span role="img" aria-label="Note des voyageurs TripAdvisor : 0,7 sur 5" style="width: 14%"></span>
    </span>
    <span aria-hidden="true">0,7/5</span>
</p>
<p class="tripadvisor-component monochrome"
  data-rate-value="0.8" data-popover="Note des voyageurs TripAdvisor : 4 sur 5" data-popover-css="font-size-18">    <span class="tripadvisor--figure">
        <span role="img" aria-label="Note des voyageurs TripAdvisor : 4 sur 5" style="width: 80%"></span>
    </span>
    <span aria-hidden="true">4/5</span>
</p>

CSS Tripadvisor

.tripadvisor-component {
  all: unset;
  display: inline-flex;
  align-items: center;
  position: relative;
  --trust-color-bubble:  rgb(0,166,128);
  --trust-color-text: var(--basic-color, currentColor);
  --trust-color-logo: var(--trust-color-text);
  --logo-review: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 18"><path d="M11.81,10.33c0,1.29-1.03,2.33-2.3,2.33s-2.3-1.04-2.3-2.33,1.03-2.33,2.3-2.33c1.27,0,2.3,1.04,2.31,2.33h0s0,0,0,0ZM22.5,8c-1.27,0-2.3,1.04-2.3,2.33s1.03,2.33,2.3,2.33,2.3-1.04,2.3-2.33-1.03-2.33-2.3-2.33ZM22.5,14.78c-2.43,0-4.4-1.99-4.4-4.45s1.97-4.45,4.4-4.45,4.4,1.99,4.4,4.45-1.97,4.45-4.4,4.45ZM16,10.2c0-2.93-2.1-5.44-4.88-6.52,3.12-1.32,6.63-1.32,9.76,0-2.77,1.08-4.88,3.59-4.88,6.52ZM9.51,14.78c-2.43,0-4.4-1.99-4.4-4.45s1.97-4.45,4.4-4.45,4.4,1.99,4.4,4.45-1.97,4.45-4.4,4.45ZM26.87,5.47l2.13-2.34h-4.71C19.29-.31,12.72-.31,7.73,3.13H3l2.13,2.34c-2.66,2.44-2.85,6.6-.44,9.29,2.41,2.69,6.52,2.89,9.17.45.02-.02.04-.04.06-.05l2.08,2.3,2.08-2.29c1.2,1.13,2.78,1.75,4.41,1.75,3.59,0,6.5-2.94,6.5-6.58,0-1.85-.77-3.62-2.12-4.86Z"/></svg>');
  --trust-border: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,31c-8.27,0-15-6.73-15-15S7.73,1,16,1s15,6.73,15,15-6.73,15-15,15ZM16,4.75c-6.2,0-11.25,5.05-11.25,11.25s5.05,11.25,11.25,11.25,11.25-5.05,11.25-11.25-5.05-11.25-11.25-11.25Z"/></svg>');
  --trust-filled: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16,2.25c7.59,0,13.75,6.16,13.75,13.75s-6.16,13.75-13.75,13.75S2.25,23.59,2.25,16,8.41,2.25,16,2.25ZM16,31c-8.27,0-15-6.73-15-15S7.73,1,16,1s15,6.73,15,15-6.73,15-15,15ZM16,3.5c-6.89,0-12.5,5.61-12.5,12.5s5.61,12.5,12.5,12.5,12.5-5.61,12.5-12.5S22.89,3.5,16,3.5Z"/></svg>');
  --trust-height: 0.875rem;
  margin: 0.3125rem 0;
  padding-left: calc(var(--trust-height) * 1.5);
  height: var(--trust-height);
  line-height: var(--trust-height);
  font-size: 0.75rem;
  font-weight: 500;
}

@media (max-width: 47.9375rem) {
  .tripadvisor-component.tripadvisor-larger {
    --trust-height: 1.25rem;
  }
}

@media (min-width: 48rem) {
  .tripadvisor-component.tripadvisor-larger {
    --trust-height: 1.75rem;
  }
}

/*
 si gestion du dark mode…
 */
@media (prefers-color-scheme: dark) {
  .tripadvisor-component:not([data-brand]) {
    --trust-color-bubble: var(--green, greenyellow);
    --trust-color-text: white;
    --trust-color-logo: white;
  }
}

.tripadvisor-component.monochrome {
  --trust-color-bubble: var(--basic-color, black);
}

@media (prefers-color-scheme: dark) {
  .tripadvisor-component.monochrome {
    --trust-color-bubble: var(--basic-color, white);
  }
}

.tripadvisor-component:before {
  width: calc(var(--trust-height) * 1.5);
  height: var(--trust-height);
  -webkit-mask-image: var(--logo-review);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  -webkit-mask-size: calc(var(--trust-height) * 1.3);
  mask-image: var(--logo-review);
  mask-repeat: no-repeat;
  mask-position: left center;
  mask-size: calc(var(--trust-height) * 1.3);
  content: "\20" / "";
  left: 0;
  position: absolute;
  background-color: var(--trust-color-logo);
}

.tripadvisor-component .tripadvisor--figure {
  position: relative;
  width: calc(var(--trust-height) * 5);
  height: var(--trust-height);
  line-height: var(--trust-height);
  margin-right: 0.3125rem;
}

.tripadvisor-component .tripadvisor--figure:after {
  -webkit-mask-image: var(--trust-border);
  -webkit-mask-repeat: repeat-x;
  mask-image: var(--trust-border);
  mask-repeat: repeat-x;
  content: "\20" / "";
  inset: 0;
  position: absolute;
  background-color: var(--trust-color-bubble);
}

.tripadvisor-component.tripadvisor-larger {
  font-size: var(--font-size, inherit);
}

.tripadvisor-component .tripadvisor--figure [role='img'] {
  position: absolute;
  inset: 0;
}

.tripadvisor-component .tripadvisor--figure [role='img']:after {
  -webkit-mask-image: var(--trust-filled);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: contain;
  mask-image: var(--trust-filled);
  mask-repeat: repeat-x;
  mask-size: contain;
  content: "\20" / "";
  position: absolute;
  inset: 0;
  background-color: var(--trust-color-bubble);
}

.tripadvisor-component[data-rate-value^="0.1"] .tripadvisor--figure [role='img']:after {
  -webkit-mask-size: cover;
  mask-size: cover;
}

.tripadvisor-component .tripadvisor--figure + span {
  line-height: 1;
  color: var(--trust-color-text);
}

Vous aimez cette page ?
Dites-le !

Licence Creative commons CC BY-NC-SA 4.0

Lien vers la licence : Creative commons CC BY-NC-SA 4.0

Les sources proposées sur Kortic Anthony Ladeuil sont mises à disposition selon les termes suivants :

Pas d’utilisation commerciale: Vous n'êtes pas autorisé à faire un usage commercial de cette Œuvre, tout ou partie du matériel la composant.
Bien entendu, la probabilité est faible pour que ce point soit respecté. En cas de sursaut d'honnêteté, vous pouvez payer un café, cette page soulagera votre conscience.
Attribution: Vous devez créditer l'Œuvre, intégrer un lien vers la licence et indiquer si des modifications ont été effectuées à l'Œuvre. Vous devez indiquer ces informations par tous les moyens raisonnables, sans toutefois suggérer que l'Offrant vous soutient ou soutient la façon dont vous avez utilisé son Œuvre.
Partage dans les mêmes conditions: Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir du matériel composant l'Œuvre originale, vous devez diffuser l'Œuvre modifiée dans les mêmes conditions, c'est-à-dire avec la même licence avec laquelle l'Œuvre originale a été diffusée.
Pas de restrictions complémentaires Vous n'êtes pas autorisé à appliquer des conditions légales ou des mesures techniques qui restreindraient légalement autrui à utiliser l'Œuvre dans les conditions décrites par la licence.

Note : Vous n'êtes pas dans l'obligation de respecter la licence pour les éléments ou matériel appartenant au domaine public ou dans le cas où l'utilisation que vous souhaitez faire est couverte par une exception.

Aucune garantie n'est donnée. Il se peut que la licence ne vous donne pas toutes les permissions nécessaires pour votre utilisation. Par exemple, certains droits comme les droits moraux, le droit des données personnelles et le droit à l'image sont susceptibles de limiter votre utilisation.

À défaut de tout ça, un petit message et une référence à Kortic restent les bienvenus.

Limitation de responsabilité

Le code est fourni « tel quel », sans garantie d'aucune sorte, expresse ou implicite. En aucun cas l’auteur ou les détenteurs du copyright ne seront responsables de toute réclamation, dommage ou autre responsabilité, que ce soit dans une action contractuelle, délictuelle ou autre, résultant de, en dehors ou en relation avec le logiciel ou l'utilisation ou d'autres transactions.

Contenu géré grâce à Parsedown et Parsedown Extra

Vous aimez cette page ?
Dites-le !