Links (Liens)

Les liens permettent à l’utilisateur d’atteindre un autre endroit de la page, une autre page, un autre site ou un document non web.

Usage

Lien par défaut

• Étant donné la spécificité des sites de presse (dont la plus part des pages sont remplies de liens), un lien par défaut n’est pas caractérisé visuellement. Il a donc l’apparence de texte standard, son contexte permettant à l’utilisateur de comprendre qu’il s’agit d’un lien.

Lien léger

• Un lien léger est peu perceptible et se trouve parmi un bloc de texte.
• Les informations fournies à l’utilisateur sont souvent légales.

Lien article

• Un lien article se trouve parmi un bloc de texte de type article. Il apporte une information supplémentaire à celui-ci.
• Les informations fournies par un lien article sont plus impactantes que celles du lien léger.

Lien bouton

• Un lien bouton se positionne comme un bouton mais a l’apparence d’un lien. Son action est mineure par rapport aux boutons primaires et secondaires.
• Un tel lien ne peut donc pas être inclus dans du texte.

Contrairement aux boutons primaires et secondaires, le lien bouton ne présente pas de padding et sa largeur minimale n’est pas définie.

Bonnes pratiques

• Si l’action modifie des données, ne pas utiliser un lien, préférez un bouton.

OK

KO

• Mettre le minimum de texte tout en expliquant clairement ce qui se passe lorsque ce lien est activé.
• Évitez les termes génériques tels que «Cliquez ici», «Ici», «En savoir plus» ou l’adresse Web qui ne fournissent pas d’information aux utilisateurs sur le contenu du lien.
• Sur une même page, mettre des noms distincts pour des liens différents.
• Il est conseillé que le lien n’ait pas plus de 10 mots pour une meilleure performance.
• Le texte du lien devrait être similaire au titre de la page qu’il ouvre.

Lien bouton

• La 1re lettre du lien est en majuscule, le reste est en minuscule.
• Le texte du lien doit être uniquement sur une seule ligne.
• Ne pas finaliser le texte par une ponctuation.

Types d’ouverture

Le même onglet

• Suite à un tape sur un lien interne, une page s’ouvre dans le même onglet. Les deux sous-domaines sont identiques, ex : ouest-france.fr et voilesetvoiliers.ouest-france.fr

Une nouvel onglet

• Suite à un tape sur un lien externe, une page s’ouvre dans une nouvelle onglet. Un lien externe ouvre une page dans un autre sous-domaine, ex : ouest-france.fr et ouestfrance-auto.com

Style & code

Comme le prévoit le HTML, les liens ont 4 états : normal (/ ou link), survolé (hover), cliqué (active) et avec focus (focus). Toutefois, la charte Ouest-France assigne la même apparence aux états survolé, cliqué, et avec focus.

Lien par défaut

Le lien par défaut est celui affiché avec une simple balise <a>, hors d’un contenu rédactionnel (càd hors d’un conteneur avec la classe su-article). Comme vu dans la présentation, ce lien n’est pas caractérisé visuellement.

<p>Etiam Venenatis Bibendum <a href="javascript:;">Lien article SipaUI</a> Tortor Cursus.</p>

Ce lien est disponible avec la classe su-negative sur un parent.

<p class="su-negative" style="background: DimGray; padding: 10px">Etiam Venenatis Bibendum <a href="javascript:;" class="surcharge-storybook">Lien article SipaUI</a> Tortor Cursus.</p>

Lien léger

Pour appliquer un style de lien léger, utilisez la classe su-link-light le lien sera alors souligné et de la couleur de son contexte.

<p><a href="javascript:;" class="su-link-light">Lien léger</a><p>
<p style="background: #bbb; color: #fff"><a href="javascript:;" class="su-link-light">Lien léger</a></p>

Ce lien aussi est disponible avec la classe su-negative sur un parent.

<p class="su-negative" style="background: DimGray; padding: 10px"><a href="javascript:;" class="su-link-light">Lien léger</a></p>

Cela fonctionne aussi dans une zone éditoriale (avec la classe su-article sur un parent) :

<section class="su-article">
    <p>Etiam Venenatis Bibendum <a href="javascript:;" class="su-link-light">Lien léger</a> Tortor Cursus.</p>
</section>

Lien éditorial ou lien article

Il s’agit du lien dans un article, s’intégrant dans du contenu textuel. Sa police, sa taille, sa graisse sont dépendants du texte dans lequel il est inclus.

On l’applique en ajoutant la classe su-article sur un bloc parent (par exemple : la balise <article>).

<section class="su-article">
    <p>Etiam Venenatis Bibendum <a href="javascript:;">Lien article</a> Tortor Cursus.</p>
</section>

On peut aussi le forcer ponctuellement (si besoin, en l’absence d’accès à un bloc parent du <a>) en appliquant la classe su-link directement sur le lien.

<a href="javascript:;" class="su-link">Lien article</a>

Ajoutez la classe su-negative à côté du su-link ou du su-article pour que le lien ait la bonne couleur sur un fond sombre.

<section style="background: DimGray; padding: 10px">
    <article class="su-article su-negative">
        <p>Etiam Venenatis Bibendum <a href="javascript:;">Lien article</a> Tortor Cursus.</p>
    </article>
    <a href="javascript:;" class="su-link su-negative">Lien article</a>
</section>

Lien non stylé

Il peut arriver qu’il soit nécessaire de supprimer le style de lien sur un élément. Par exemple avec un lien sur un bloc. Pour supprimer ce style, utilisez la classe su-not-link.

<section class="su-article">
    <a href="javascript:;" class="su-not-link" style="display: block; width: 100px; text-align: center;">
        <p style="background: rgba(0,0,0, .6); color: white;">Purus Lorem Pellentesque.</p>
    </a>
</section>

Lien bouton

Pour un lien bouton, utiliser la classe su-link-button.

<a href="javascript:;" class="su-link-button">Lien bouton SipaUI</a>

Comme un bouton, ce lien peut être rendu inactif avec la classe su-disabled et l’aria-disabled="true".

<a href="javascript:;" class="su-link-button su-disabled" aria-disabled="true">Lien bouton SipaUI</a>

Version sur fond sombre avec la classe su-negative.

<section style="background: DimGray; padding: 10px">
    <a href="javascript:;" class="su-link-button su-negative" aria-disabled="true">Lien bouton SipaUI</a>
    <div class="su-negative">
        <a href="javascript:;" class="su-link-button su-negative" aria-disabled="true">Lien bouton SipaUI</a>
    </div>
</section>

Tracking

Afin de permettre le tracking du clic sur un lien, vous devez ajouter au choix un attribut data-trk-internal-link ou data-trk-external-link avec le texte du lien en valeur. Ces attributs sont valables pour un lien standard comme pour un lien qui a l’apparence d’un bouton (à partir du moment ou le lien renvoie vers une autre page avec un href="url"). Le choix entre internal et external se fait en fonction de l’url du lien : s’il envoie sur le même site on utilise internal et s’il envoie vers un autre site on utilise external. Cette différence se fait sur le nom de domaine, si le lien pointe vers un autre sous domaine, mais qu’on reste sur le même domaine, on utilisera internal (p. ex : pour passer de https://voilesetvoiliers.ouest-france.fr à https://www.ouest-france.fr).

Le tracking de lien interne se fait normalement nativement en suivant les parcours entre les pages. Cette méthode de tracking reste l’exception et doit être utilisée avec parcimonie (suivi d’une nouvelle ergonomie, ancre du lien long, lien interne ne déclenchant pas de nouvelle page vue ou rechargement JS).

<p><a href="url" data-trk-internal-link="Lien vers une autre page" class="su-link">Lien vers une autre page</a></p>
<p><a href="url" data-trk-external-link="Lien vers un autre site" class="su-link">Lien vers un autre site</a></p>