Textes alternatifs, icônes et médias

Le texte alternatif d’une image

À la place de l’image, le lecteur d’écran lit son attribut alt, et le navigateur l’affiche quand l’image ne se charge pas (critère 1.1.1). Il doit dire ce que l’image transmet à cet endroit – et non la décrire en détail :

<img src="visites.png" alt="Le nombre de visites du site est passé en 2025 de 12 000 en janvier à 30 000 en décembre" width="640" height="320">
<a href="/"><img src="logo.svg" alt="Garth.cz – accueil" width="160" height="40"></a>
<img src="vague-decorative.svg" alt="" width="200" height="12">

• Image informative (graphique, photo de produit, schéma) – le alt dit ce qui y est important. Pour un graphique, sa conclusion, et non « graphique ».
• Image servant de lien – le alt décrit la destination du lien, et non l’image. Le logo de l’en-tête, c’est « Garth.cz – accueil », et non « logo ».
• Image décorative (ornement, photo d’illustration qui ne transmet rien) – alt="". Le lecteur d’écran l’ignore alors. N’omettez cependant pas l’attribut lui-même : une image sans alt, le lecteur d’écran l’annonce par le nom du fichier.
• Ne commencez pas par les mots image ou photo – le lecteur d’écran dit « image » de lui-même.
• Une image contenant du texte (bannière de promotion) reprend ce texte dans le alt. Mieux vaut ne pas mettre de texte dans une image et l’écrire en HTML – il ne devient pas flou une fois agrandi et peut être traduit.
• Une image complexe (graphique détaillé, carte) a un alt court et, à côté, une description complète ou un tableau des données, par exemple dans un élément figure avec figcaption.

Erreur – une image sans attribut alt ; le lecteur d’écran annonce le nom du fichier :

<img src="IMG_20250614_101523.jpg" width="640" height="480">

Sur les sites plus anciens, les textes alternatifs manquent souvent pour des centaines d’images. L’intelligence artificielle peut en proposer en masse, mais un humain doit vérifier les propositions.

Boutons et liens à icône

Un bouton avec une seule icône (Fermer, Rechercher, Menu, Panier) n’a pas de texte, le lecteur d’écran ne dit donc que « bouton ». L’attribut aria-label lui donne un nom et aria-hidden="true" masque l’icône elle-même :

<button type="button" class="icon" aria-label="Fermer">
  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
    <path d="M4 4 L16 16 M16 4 L4 16" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>
<a href="/panier/" class="icon">
  <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
    <path d="M2 3 H5 L7 13 H16 L18 6 H6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  <span class="count">Panier (3)</span>
</a>

.icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 24px;
  min-height: 24px;
  padding: 6px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #fff;
  color: #1a1a1a;
}

Le lecteur d’écran annonce le bouton comme « Fermer, bouton » et le lien comme « Panier (3), lien ». Là où il y a de la place, un texte visible à côté de l’icône est préférable – il aide aussi les voyants. La taille minimale de 24 × 24 pixels correspond au critère 2.5.8.

Erreur – un bouton avec une seule icône de police et sans nom :

<button type="button" class="icon"><i class="icon-search"></i></button>

Les images SVG

Un élément svg inséré directement dans la page n’a pas d’attribut alt. Un SVG informatif reçoit le rôle img et un nom – tiré de son propre élément title par aria-labelledby ou donné par aria-label. Un SVG décoratif se masque avec l’attribut aria-hidden="true". Un SVG sous forme de fichier dans un élément img se comporte comme n’importe quelle image avec alt.

<svg role="img" aria-labelledby="chart-title" width="240" height="90" viewBox="0 0 240 90">
  <title id="chart-title">Note des clients : 4,6 sur 5</title>
  <rect x="0" y="30" width="240" height="30" fill="#e6e6e6"/>
  <rect x="0" y="30" width="221" height="30" fill="#2e7d32"/>
</svg>

Vidéo et audio

• Sous-titres – une vidéo avec du son a besoin de sous-titres (critère 1.2.2). On les ajoute à l’élément video avec un élément track au format WebVTT. Vérifiez et corrigez les sous-titres automatiques de YouTube – ils font des erreurs, surtout dans les noms et les termes techniques.
• Transcription – un podcast ou un enregistrement sans image a besoin d’une transcription textuelle (1.2.1). Les moteurs de recherche l’apprécient aussi.
• Audiodescription – si la vidéo montre quelque chose qu’on ne comprend pas à partir des paroles (un tutoriel avec « cliquez ici »), décrivez-le avec des mots dans le commentaire ou dans le texte sous la vidéo (1.2.5).
• Lecture automatique – un son qui démarre tout seul couvre le lecteur d’écran. S’il dure plus de 3 secondes, il doit pouvoir être arrêté ou baissé (1.4.2). Le mieux est de ne rien lire automatiquement.

<video controls width="640" height="360" preload="metadata">
  <source src="tutoriel-commande.mp4" type="video/mp4">
  <track kind="captions" src="tutoriel-commande.fr.vtt" srclang="fr" label="Français" default>
</video>
<p><a href="tutoriel-commande-transcription.html">Transcription de la vidéo</a></p>

Mouvement et animation

Chez les personnes souffrant de troubles de l’équilibre ou de difficultés de concentration, les animations (parallaxe, défilement, zoom) peuvent provoquer des nausées ou les distraire. Quand quelqu’un active la réduction des animations dans son système, la page doit désactiver ou atténuer les animations – grâce à la caractéristique média prefers-reduced-motion :

<div class="card">Carte qui glisse au chargement</div>

.card {
  animation: slide-in 0.6s ease-out;
}
@keyframes slide-in {
  from { transform: translateY(40px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Rien ne doit clignoter plus de trois fois par seconde (critère 2.3.1 – risque de crises chez les personnes atteintes d’épilepsie photosensible). Les contenus en mouvement qui durent plus de 5 secondes (carrousel, texte défilant) doivent pouvoir être arrêtés (2.2.2).