Tree shaking d'accessibilité

Le tree shaking d'accessibilité désigne le risque que les outils d'optimisation de code (webpack, Vite, PurgeCSS) suppriment involontairement du code nécessaire aux technologies d'assistance. La classe .sr-only, les utilitaires de gestion du focus, les annonces aria-live : ce code invisible à l'écran peut disparaître en production sans que personne ne le remarque visuellement.

Votre classe .sr-only fonctionne en développement. En production, elle a disparu. Le lecteur d'écran ne vocalise plus les textes alternatifs que vous aviez ajoutés sur vos boutons-icônes. Aucun test visuel ne détecte le problème. Le coupable : votre outil de build, qui a éliminé le code « inutilisé ».

#Pourquoi le code d'accessibilité est vulnérable

Le tree shaking élimine les exports JavaScript non importés. PurgeCSS et le content scanning de Tailwind suppriment les classes CSS absentes des templates. Ces outils analysent le code de façon statique : ils cherchent des chaînes de caractères dans vos fichiers sources.

Le code d'accessibilité a une particularité : il est invisible par nature. Une classe .visually-hidden masque du texte à l'écran tout en le gardant dans l'arbre d'accessibilité. Un module JavaScript qui gère les annonces aria-live ne produit rien de visible. Pour un outil d'optimisation, ce code ressemble à du code mort.

Trois scénarios reviennent régulièrement.

Classes CSS dynamiques. Vous construisez un nom de classe par concaténation en JavaScript ('sr' + '-only'). PurgeCSS ne trouve jamais la chaîne complète sr-only dans vos templates. La classe disparaît du bundle CSS final.

sideEffects: false mal configuré. Vous déclarez votre bibliothèque de composants sans effets de bord dans package.json. webpack supprime les imports CSS, y compris la feuille qui contient .visually-hidden.

Styles de liens d'évitement purgés. Un lien d'évitement n'est visible qu'au focus clavier. L'outil de purge ne détecte aucune référence dans le HTML statique et supprime les styles associés.

#Comment protéger le code d'accessibilité

Deux mécanismes suffisent.

En CSS, ajoutez vos classes d'accessibilité à la safelist de votre outil de purge :

// tailwind.config.js
module.exports = {
  safelist: ['sr-only', 'visually-hidden', 'skip-link'],
}

En JavaScript, déclarez les fichiers CSS comme ayant des effets de bord :

{
  "sideEffects": ["*.css", "*.scss"]
}

Le vrai filet de sécurité : intégrez un test d'accessibilité automatisé dans votre pipeline CI, sur le build de production. Pas sur le code source. C'est le seul moyen de repérer une régression causée par l'optimisation du bundle.

#En résumé

Les outils de tree shaking optimisent ce qu'ils comprennent : le code visible. Le code d'accessibilité est invisible par conception. Safelistez vos classes, déclarez vos effets de bord, et testez vos builds de production avec une technologie d'assistance.

Retour au glossaire

Partagez cet article

Pour aller plus loin

Sémantique HTML

La sémantique HTML consiste à choisir les éléments HTML selon leur signification, pas leur apparence. Un <nav> dit « ceci est une navigation » aux navigateurs et aux lecteurs d'écran, là où un <div> ne transmet aucune information. C'est la base de l'accessibilité côté code : un HTML bien structuré rend le contenu compréhensible sans JavaScript ni attributs ARIA supplémentaires.

ARIA

ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs HTML qui décrivent les composants d'interface aux technologies d'assistance. Un bouton personnalisé, un système d'onglets, une notification dynamique : quand le HTML sémantique ne suffit pas, ARIA ajoute les informations manquantes. Mais un attribut ARIA sans le comportement correspondant fait plus de mal que de bien.

Compatible avec les technologies d'assistance

Un contenu web est compatible avec les technologies d'assistance quand le navigateur transmet correctement ses informations (nom, rôle, valeur, états) aux lecteurs d'écran, plages braille et autres outils d'assistance. Les éléments HTML natifs comme <button> ou <input> le sont automatiquement. Les éléments génériques comme <div> ne le sont pas, sauf ajout manuel d'attributs WAI-ARIA et de comportements clavier.