Icônes

La plupart des images font partie de votre contenu, mais les icônes font partie de votre interface utilisateur. Elles doivent être mises à l'échelle et s'adapter de la même manière que le texte de votre interface utilisateur.

Scalable Vector Graphics

En ce qui concerne les images photographiques, vous avez le choix entre de nombreux formats : JPG, WebP et AVIF. Pour les images non photographiques, vous pouvez choisir entre les formats PNG (Portable Network Graphics) et SVG (Scalable Vector Graphics).

Les formats PNG et SVG sont adaptés aux zones de couleur unie et permettent tous deux d'avoir des arrière-plans transparents. Si vous utilisez un PNG, vous devrez probablement créer plusieurs versions de votre image dans différentes tailles et utiliser l'attribut srcset sur votre élément img pour rendre l'image responsive. Si vous utilisez un SVG, il est responsive par défaut.

Les PNG (ainsi que les JPG, WebP et AVIF) sont des images bitmap. Les images bitmap stockent les informations sous forme de pixels. Dans un SVG, les informations sont stockées sous forme d'instructions de dessin. Lorsque le navigateur lit le fichier SVG, les instructions sont converties en pixels. Mieux encore, ces instructions sont relatives. Quelles que soient les dimensions que vous utilisez pour décrire les lignes et les formes, tout s'affiche avec la netteté appropriée. Au lieu de créer plusieurs SVG de différentes tailles, vous pouvez en créer un seul qui fonctionnera dans toutes les tailles. Il n'est pas nécessaire d'utiliser l'attribut srcset.

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

Le langage XML est utilisé pour écrire les instructions dans un fichier SVG. Il s'agit d'un langage de balisage, comme le HTML.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

Vous pouvez même insérer un SVG dans du HTML.

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

Si vous intégrez un SVG de cette manière, le navigateur n'a plus besoin d'envoyer une requête. Il n'y aura pas d'attente pour le téléchargement de l'image, car elle arrive avec le HTML…dans le HTML. De plus, comme vous le verrez bientôt, l'intégration de SVG de cette manière vous permet de mieux contrôler leur style.

Icônes et texte

Les images d'icônes présentent souvent des formes simples sur un arrière-plan transparent. Le format SVG est idéal pour les icônes.

Si vous avez un bouton ou un lien contenant du texte et une icône, l'icône est de présentation. C'est le texte qui compte. Lorsque vous utilisez un élément img, un attribut alt vide indique que l'image est de présentation.

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

Comme le CSS est destiné à la présentation, vous pouvez placer l'icône dans votre CSS en tant qu'image d'arrière-plan.

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

Si vous placez le SVG dans votre HTML, utilisez l'attribut aria-hidden pour le masquer des technologies d'assistance.

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

Icônes autonomes

Utilisez du texte dans vos boutons et liens si vous voulez que leur objectif soit clair. Vous pouvez utiliser une icône sans texte, mais ne supposez pas que tout le monde comprend la signification d'une icône particulière. En cas de doute, effectuez des tests auprès de vrais utilisateurs.

Si vous décidez d'utiliser une icône sans texte d'accompagnement, elle n'est plus de présentation. Une image d'arrière-plan en CSS n'est pas un moyen approprié d'afficher l'icône. L'icône doit recevoir un nom accessible en HTML.

Si vous utilisez un élément img, l'icône reçoit son nom accessible à partir de l'attribut alt.

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

Une autre option consiste à placer le nom accessible sur le lien ou le bouton lui-même et à déclarer que l'image est de présentation. Utilisez l'attribut aria-label pour fournir le nom accessible.

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

Si vous placez le SVG dans votre HTML, utilisez l'attribut aria-label sur le lien ou le bouton pour lui donner un nom accessible et utilisez l'attribut aria-hidden sur l'icône.

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

Styliser les icônes

Si vous intégrez vos icônes SVG directement dans votre HTML, vous pouvez styliser certaines parties comme n'importe quel autre élément de votre page. Vous ne pouvez pas le faire si vous utilisez un élément img pour afficher vos icônes.

Dans l'exemple suivant, les éléments rect à l'intérieur du SVG ont une valeur fill de blue pour correspondre aux styles du texte du bouton.

button {
 color: blue;
}
button rect {
  fill: blue;
}

Vous pouvez également appliquer des styles hover et focus.

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

Ressources

• Si vous devez styliser des SVG qui sont des images d'arrière-plan dans votre CSS, consultez l'article d'Una sur la colorisation des arrière-plans SVG.
• Sara Soueidan a écrit un article sur les boutons d'icônes accessibles.
• Scott O'Hara a écrit un article sur le balisage contextuel des images et des SVG accessibles.
• Si vous utilisez un outil de conception graphique pour exporter des SVG, utilisez SVGOMG pour optimiser la sortie.

Les icônes sont un élément important de l'image de marque de votre site. Vous allez maintenant découvrir comment rendre d'autres aspects de votre image de marque responsives grâce à la puissance des thèmes.

Vérifiez vos connaissances

Testez vos connaissances sur les icônes