Feuille de style

Une feuille de style est un fichier CSS qui définit l'apparence visuelle d'une page web. En accessibilité, trois origines coexistent : celle du navigateur, celle du développeur et celle de l'utilisateur. Le RGAA vérifie que le contenu informatif reste lisible quand les styles d'auteur sont désactivés.

Quand vous écrivez du CSS, vous produisez une feuille de style d'auteur. Votre navigateur en applique une autre avant même de lire la vôtre. Et l'utilisateur peut en ajouter une troisième pour adapter l'affichage à ses besoins. Trois sources, un seul résultat visuel : c'est la cascade CSS.

#Trois origines, un enjeu d'accessibilité

La spécification CSS Cascade définit trois origines :

• Agent utilisateur : les styles par défaut du navigateur. Un <h1> est gros et gras avant que vous n'écriviez une seule ligne de CSS.
• Auteur : vos fichiers .css. Ils écrasent les styles du navigateur via la cascade.
• Utilisateur : les styles personnalisés de l'internaute, comme une taille de police agrandie ou des couleurs adaptées à une déficience visuelle.

Le critère 10.2 du RGAA pose une question précise : le contenu informatif reste-t-il présent si l'on désactive les feuilles de style d'auteur ? Comme le détaille Julie Moynat, il ne s'agit pas d'obtenir un site agréable sans CSS. Le critère vérifie qu'aucune information ne disparaît.

#Le piège du contenu généré en CSS

Le cas d'échec le plus fréquent : injecter du texte informatif via la propriété content.

/* Ce texte disparaît sans CSS */
.obligatoire::after {
  content: " (requis)";
  color: red;
}

Désactivez le CSS, le mot « requis » disparaît. L'information n'existe que dans la feuille de style, pas dans le HTML. La technique F87 du W3C qualifiait ce cas d'échec automatique. Elle est désormais marquée obsolète dans les WCAG 2.2 : les lecteurs d'écran modernes lisent le contenu CSS généré. Le risque subsiste malgré tout pour les utilisateurs qui désactivent les styles ou naviguent avec des feuilles de style personnalisées, comme le documente Adrian Roselli.

Même logique pour background-image : si l'image porte un sens, elle disparaît avec la feuille de style.

#Adapter vos styles aux préférences utilisateur

Vos feuilles de style peuvent répondre aux réglages d'accessibilité du système. Deux media queries à connaître :

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
  }
}
 
@media (prefers-contrast: more) {
  :root { --border-color: #000; }
}

Ces requêtes lisent les préférences du système d'exploitation. Ne pas les respecter, c'est ignorer un signal explicite de besoin.

#En résumé

Une feuille de style n'est pas qu'un fichier .css. C'est un maillon dans une chaîne de trois origines où l'utilisateur a le dernier mot. Vérifiez que votre contenu survit sans vos styles, et exploitez les media queries d'accessibilité pour répondre aux préférences de chaque visiteur.