English

<canvas>

Dessiner au pixel : le seul élément que les lecteurs d'écran ne peuvent pas lire

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique

<canvas> — La surface de dessin

La balise <canvas> crée une surface de pixels manipulée par JavaScript. Jeux, graphiques en temps réel, éditeurs d'images : tout ce qui demande un rendu pixel par pixel passe par <canvas>. Mais son contenu est invisible pour les lecteurs d'écran, c'est une boîte noire.

Quand l'utiliser

Tu veux dessiner un graphique interactif, un jeu, une visualisation de données en temps réel ou un éditeur d'image. Le contenu est généré par JavaScript, pas par du HTML sémantique. Si tu peux exprimer ton contenu avec du SVG ou du HTML, préfère-les, ils sont accessibles nativement.

Ce que tu gagnes

Accessibilité : rien par défaut. Le contenu d'un <canvas> est opaque pour les technologies d'assistance. Tu dois fournir un contenu de repli entre les balises ouvrante et fermante, ou utiliser l'API canvas accessible (encore mal supportée). C'est le principal défaut de cette balise.

Exemple de code

<canvas id="chart" width="400" height="300">
  <!-- Fallback for screen readers and search engines -->
  <p>Monthly sales chart: January 120, February 145, March 98.</p>
</canvas>

Pour aller plus loin