Scrim

À quoi il sert

Scrim pose le texte sur un voile uni semi-opaque : contraste d’au moins 7,1:1 sur toute image.

Quand l’utiliser

• Poser un titre ou une légende sur une photo, quelle que soit l’image dessous.
• Placer le texte en bas (place="end") ou en haut (place="start") de l’image.

Quand ne pas l’utiliser

• Pour un texte qui n’a pas besoin de l’image : placer le texte hors du média.
• Pour un dégradé ou une ombre : le composant n’en produit pas, le voile est uni.

Exemples

Soleil sur bandes

Voile uni, sans dégradé ni flou.

<Scrim place="end">
  <Photo slot="media" src={photo} decorative ratio="landscape" />
  <p>Titre sur l’image</p>
</Scrim>

Accessibilité

Clavier

• Le composant ne prend pas le focus ; les liens ou boutons du texte gardent le leur.

Lecteur d’écran

• Le média du slot media suit son alt ; avec decorative, il est masqué.
• Le texte est lu après le média, dans l’ordre du document.

Garanti par le composant

• Voile color-mix sur les tokens --pp-media-scrim-color, -opacity et -text.
• Aucun dégradé, flou ni ombre ; zéro JavaScript ; aucun style en ligne.

À la charge de l’intégrateur

• Le contrôle vaut pour le pire cas : il ne dispense pas de tester la photo réelle.
• Mettre le média dans le slot media et le texte dans le slot par défaut.

Propriétés

Jetons utilisés

• --pp-media-radius
• --pp-media-scrim-color
• --pp-media-scrim-opacity
• --pp-media-scrim-text
• --pp-space-2xs
• --pp-space-m
• --pp-space-s

Preuves et décisions

• WCAG 1.4.3 Contraste (minimum) (AA)
• Calcul du contraste : packages/astro/src/media/scrim.ts
• Tests : packages/astro/test/Scrim.test.ts