Baliser des données de manière sémantique est déjà un défi en HTML. De nouveaux éléments comme ou permettent d’aller (un peu) plus loin ; et ou sont destinés à cet effet.
En revanche quand il s’agit de leur représentation visuelle, on se retrouve vite coincé entre et , 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 ?
