Bubble (Bulle de nouveauté)

Une bulle de nouveautés est un petit marqueur, pouvant contenir un nombre, qui vient s’ajouter à un élément. Il permet d’apporter 2 types d’informations pour l’utilisateur : quelque chose de nouveau lié à cet élément mérite son attention, ou cet élément contient des sous-éléments importants (mais pas forcément nouveaux).

Usage

• Une bulle de nouveauté doit être utilisée pour des informations importantes.
• Elle doit être utilisée pour donner des informations sur un élément à valeur variable (p. ex. le nombre de commentaires sur un article, le nombre d’articles sauvegardés par l’utilisateur, le nombre d’éléments non-lus…).
• Il existe plusieurs types de bulles : standard, secondaire et petite (sans nombre).

Bonnes pratiques

• Le nombre du bulles visibles en une fois doit être limité.

Style & code

Standard

La bulle est construite à l’aide de la classe su-bubble sur un <div> contenant des <span> pour l’information chiffrée et le texte nécessaire à l’accessibilité. L’élément chiffré porte la classe su-bubble-value.

<div class="su-bubble" role="status">
    <span class="su-bubble-value">1</span><span class="su-visually-hidden">élément non lu</span>
</div>

Déclinaisons numériques

La bulle est prévue pour afficher un nombre à 2 chiffres maximum. Si le nombre à afficher dépasse 99, il faudra alors :

• ajouter la classe su-over à côté de su-bubble,
• remplacer le <span class="su-bubble-value"> du nombre par <span>+</span><span class="su-visually-hidden">de</span><span class="su-bubble-value">99</span>

<div class="su-bubble" role="status">
    <span class="su-bubble-value">1</span><span class="su-visually-hidden">élément non lu</span>
</div>
<div class="su-bubble" role="status">
    <span class="su-bubble-value">22</span><span class="su-visually-hidden">élément non lu</span>
</div>
<div class="su-bubble su-over" role="status">
    <span>+</span><span class="su-visually-hidden">de</span><span class="su-bubble-value">99</span><span class="su-visually-hidden">élément non lu</span>
</div>

Secondaire

On obtient la bulle secondaire avec la classe su-secondary. Attention, la version secondaire n’a pas de fond, elle ne pourra donc pas être affichée n’importe où…

<div class="su-bubble su-secondary" role="status">
    <span class="su-bubble-value">1</span><span class="su-visually-hidden">élément non lu</span>
</div>

Version petite

Pour afficher une bulle moins forte visuellement ou lorsque l’on n’a pas d’information chiffrée à donner, on peut utiliser la petite version de la bulle avec la classe su-small. Dans ce cas, aucun contenu de la bulle ne sera affiché. Il est toutefois nécessaire de laisser un texte pour l’accessibilité.

<div class="su-bubble su-small" role="status">
    <span>Plusieurs éléments non lu</span>
</div>
<div class="su-bubble su-small" role="status">
    <span class="su-bubble-value">1</span><span class="su-visually-hidden">élément non lu</span>
</div>

Sur fond sombre

La classe su-negative permet d’afficher cette bulle sur un fond sombre.

<section class="su-negative">
    <div class="su-bubble" role="status">
        <span class="su-bubble-value">1</span><span class="su-visually-hidden">élément non lu</span>
    </div>
    <div class="su-bubble su-secondary" role="status">
        <span class="su-bubble-value">1</span><span class="su-visually-hidden">élément non lu</span>
    </div>
    <div class="su-bubble su-small" role="status"></div>
</section>

Accessibilité

Pour rendre cet indicateur accessible, il faut lui attribuer un role aria de type status et ajouter un texte explicatif.

Ce rôle status définit un conteneur dont le contenu est une information destinée à l’utilisateur mais dont l’importance ne justifie pas l’utilisation du rôle alert et dont la mise en forme ne permet pas à l’utilisateur de faire disparaitre l’information (dialog).

Le texte, quant à lui, est construit par plusieurs <span> qui permettent de découper les informations en plusieurs zones affichées (le nombre) ou non (le texte explicatif masqué avec la classe su-visually-hidden issue des classes d’aide). Il est important que ce texte soit bien choisi afin que le composant soit compréhensible pour un lecteur d’écran.