Premium title (Titre premium)

Un article premium est un contenu rédactionnel à valeur ajoutée. Un abonnement payant est alors nécessaire pour accéder à l’intégralité du contenu (excepté lors d’opération commerciales…). Sans cet abonnement, l’article est donc vérrouillé. Son titre se base bien sûr, sur le composant Tiles (titres), mais il comporte une identification particulière grâce à l’ajout d’une icône.

Usage

• Le cadenas permet d’identifier visuellement un article premium et d’indiquer, par son aspect ouvert ou fermé, si cet article est lisible complètement par le lecteur ou non (grâce à un abonnement, un déverrouillage spécial par l’équipe éditoriale…).
• Puisque le droit d’accès complet à l’article est lié à l’abonnement, ce cadenas reprendra la couleur de l’abonnement.

Bonnes pratiques

• Si le cadenas est intégrer après le titre, intégrer une espace insécable entre le dernier mot du titre et l’icône du cadenas afin d’éviter que celui-ci se retrouve orphelin en début de ligne.

Style & code

Comme le composant titre standard, le composant titre premium est utilisé dans 2 cas :

• dans un article affiché dans une liste d’articles
• dans la page d’un détail article (article complet).

Il est bien sûr construit à partir du composant titre standard auquel on ajoute sa spécificité premium.

Article dans une liste

L’icône illustrant les articles premium est affichée grâce à la classe su-premium sur un article enfant de su-articles-list. Cette icône s’affiche par défaut après le titre.

Attention ! Il est impératif de ne pas mettre d’espace ou de retour chariot entre le </a> et son parent dans le code HTML. Cela permet d’éviter que le cadenas se retrouve orphelin en début de ligne si le titre prend toute la largeur du parent.

Icône après le titre

<div class="su-articles-list">
    <article class="su-articles-list-item su-premium">
        <h2 class="su-title"><a href="" aria-label="(Article premium, contenu complet réservé aux abonnés)">Météo. Fort coup de vent dans le nord-ouest de la France&nbsp;: des rafales jusqu’à 120&nbsp;km/h attendues</a></h2>
    </article>
</div>

Icône avant le titre

Si vous souhaitez mettre l’icône avant le titre, ajoutez la classe su-at-start aussi sur l’article. Toutefois, cette position est incompatible avec la position de l’icône des Live-title (titre En direct) qui est forcément devant le titre…

<div class="su-articles-list">
    <article class="su-articles-list-item su-premium su-at-start">
        <h2 class="su-title"><a href="" aria-label="(Article premium, contenu complet réservé aux abonnés)">Cop27. L’humanité a le choix entre «&nbsp;solidarité&nbsp;» et «&nbsp;suicide collectif&nbsp;», selon le chef de l’Onu</a></h2>
    </article>
</div>

Accessibilité

Pour des raisons d’accessibilité, on ajoute aussi un attribut aria-label contenant le texte utile pour les lecteurs d’écran : (Article premium, contenu complet réservé aux abonnés) (bien sûr, ce texte n’est pas figé).

Article dans une liste, version abonné

Un article premium, quand il est vu par un lecteur abonné et identifié, a une icône différente pour indiquer que l’article est complètement disponible à la lecture. Pour cela on peut mettre la classe su-subscribed à côté de la classe sipaui. Pour l’accessibilité, il est bien sûr préférable de changer le message du aria-label par (Article premium, contenu complet accessible) (p. ex.).

<div class="sipaui su-subscribed ">
    <div class="su-articles-list">
        <article class="su-articles-list-item su-premium">
            <h2 class="su-title"><a href="" class="surcharge-storybook" aria-label="Une éclipse totale de Lune aura lieu ce mardi 8 novembre (Article premium, contenu complet accessible)">Une éclipse totale de Lune aura lieu ce mardi 8 novembre</a></h2>
        </article>
    </div>
</div>

Détail article

Étant donné la complexité du composant, sa construction est découpée en plusieurs étapes.

1. Base

Le titre d’article premium répond à plusieurs contraintes :

• Pour des raisons d’accessibilité, il doit comporter un texte expliquant son statut de premium et le fait qu’il est complètement lisible ou non (en fonction de l’abonnement).
• Pour des raisons de SEO, ce texte ne peut être dans la balise H1
• Pour des raisons de design, cette information peut être affichée différemment en mobile et desktop et offrir de la souplesse pour les choix potentiellement différents en fonction des thèmes.

Ce sont ces raisons qui expliquent la structure choisie, à savoir une div contenant le texte expliquant le statut payant de l’article avant le h1 de l’article lui-même. Par ailleurs, cette div comporte une particularité : il doit porter l’attribut data-nosnippet afin de s’assurer que ce texte ne soit pas pris en compte par le crawl de Google (documentation chez Google). Pour le texte d’information, vous pouvez bien sûr mettre là aussi ce que vous voulez, mais il est important d’être le plus explicite possible (notamment sur l’état bloqué ou débloqué de l’article).

<div data-nosnippet>Article premium, réservé aux abonnés</div>
<h1>Route du Rhum&nbsp;: Charles Caudrelier vainqueur</h1>

Les étapes suivantes détaillent la construction complète du composant afin de démontrer les différentes possibilités

2. Masquage de texte

Il est possible de masquer le texte superflu pour les navigateurs standards avec la classe su-visually-hidden disponible dans les Helpers (classes d’aide). Notez qu’ici, le « r » de « réservé » est passé en majuscule pour être cohérent avec le design attendu (ce qui n’a aucun impact sur l’accessibilité).

<div data-nosnippet><span class="su-visually-hidden">Article premium, </span>Réservé aux abonnés</div>
<h1>Route du Rhum&nbsp;: Charles Caudrelier vainqueur</h1>

Bien sûr si vous souhaitez masquer complètement sur les navigateurs standards tout ce texte dédié à l’accessibilité, il vous est possible de mettre cette classe su-visually-hidden directement sur la div…

3. Intégration dans l’article

Pour intégrer ce titre dans un article, comme pour un titre standard, il faut l’inclure dans une balise <article class="su-article">, à laquelle on ajoute la classe su-premium qui permettra d’afficher le pictogramme à gauche du titre, sur la ligne de texte (le positionnement à droite n’est pas supporté). On ajoute aussi la balise <header> pour la sémantique du code.

<article class="su-article su-premium">
    <header>
        <div data-nosnippet><span class="su-visually-hidden">Article premium, </span>Réservé aux abonnés</div>
        <h1>Route du Rhum&nbsp;: Charles Caudrelier vainqueur</h1>
    </header>
</article>

4. Design du texte d’information

La div d’information doit maintenant être designée. On lui ajoute alors la classe su-premium-info et, dans ce cas de figure, une espace insécable est ajoutée au texte restant visible pour forcer le retour à la ligne à l’endroit attendu.

<article class="su-article su-premium">
    <header>
        <div class="su-premium-info" data-nosnippet><span class="su-visually-hidden">Article premium, </span>Réservé aux&nbsp;abonnés</div>
        <h1>Route du Rhum&nbsp;: Charles Caudrelier vainqueur</h1>
    </header>
</article>

Détail article, version abonné

Pour passer en mode connecté/abonné (et donc déverrouillé) il suffit d’ajouter la classe su-subscribed, soit à côté de sipaui, soit sur un parent de su-premium. Il faut aussi que l’information de disponibilité de l’article, avec <span class="su-visually-hidden"> (contenu complet accessible)</span> soit ajoutée à la fin du texte d’information.

<div class="su-subscribed">
    <article class="su-article su-premium">
        <header>
            <div class="su-premium-info" data-nosnippet><span class="su-visually-hidden">Article premium, </span>Réservé aux&nbsp;abonnés<span class="su-visually-hidden"> (contenu complet accessible)</span></div>
            <h1>Route du Rhum&nbsp;: Charles Caudrelier vainqueur</h1>
        </header>
    </article>
</div>

Abonnés professionnels

Les titres premium peuvent aussi servir à viser un public de professionnels que l’on souhaite différencier des abonnés standards. Dans ce cas, le cadenas est remplacé par le texte « PRO ». Bien sûr, il n’y a plus alors de différenciation possible entre l’état article verrouillé et l’état article déverrouillé.

Dans une liste

Dans une liste d’articles, il faut ajouter la classe su-pro à côté de su-premium.

<div class="su-articles-list">
    <article class="su-articles-list-item su-premium su-pro su-at-start">
        <h2 class="su-title"><a href="" class="surcharge-storybook" aria-label="Cop27. L’humanité a le choix entre «&nbsp;solidarité&nbsp;» et «&nbsp;suicide collectif&nbsp;», selon le chef de l’Onu (Article premium, contenu complet réservé aux abonnés)">Cop27. L’humanité a le choix entre «&nbsp;solidarité&nbsp;» et «&nbsp;suicide collectif&nbsp;», selon le chef de l’Onu</a></h2>
    </article>
</div>

En détail article

En détail article, il faut aussi ajouter la classe su-pro à côté de su-premium, mais vous pouvez en plus modifier le texte accompagnant qui est visible en desktop. Dans cet exemple, le nom du site « le marin » a été ajouté. Attention toutefois à ne pas mettre un texte trop long et à bien gérer les sauts de ligne (avec des <br /> ou comme ici, des espaces insécables).

<article class="su-article su-premium su-pro">
    <header>
        <div class="su-premium-info" data-nosnippet><span class="su-visually-hidden">Article Pro, </span>Réservé aux&nbsp;abonnés le&nbsp;marin</div>
        <h1>Route du Rhum&nbsp;: Charles Caudrelier vainqueur</h1>
    </header>
</article>