La donnée graphique avec HTML et CSS

Baliser des données de manière sémantique est déjà un défi en HTML. De nouveaux éléments comme <meter> ou <progress> permettent d’aller (un peu) plus loin ; et <dl> ou <table> sont destinés à cet effet.

En revanche quand il s’agit de leur représentation visuelle, on se retrouve vite coincé entre <canvas> et <svg>, le tout avec sa tartine de JavaScript. L’accessibilité en est assez compliquée, et il est presque impossible de s’en sortir sans la librairire-JS-qui-fait-tout.

Pourtant les CSS contemporains — tout comme ceux du futur — proposent de nouvelles manières d’aborder la représentation visuelle des données :

• les display grid / flex, qui permettent un agencement proportionnel des éléments,
• les variables CSS pour passer des paramètres d’ordre visuel (et un jour, attr() avec un typage faible dans toutes les propriétés),
• les nouveautés en terme de gestion d’image comme clip-path et ses formes basiques — miam les polygon() — ou encore les conic-gradient(),
• le tout saupoudré de motifs en SVG / gradient et un peu d’animations pour améliorer l’accessibilité visuelle.

On peut d’ores-et-déjà faire des choses simples mais efficaces sans JavaScript, et qui demeurent accessibles grâce à une bonne sémantique. Qui en veut ?