Pourquoi et Comment Désactiver les CSS pour Rendre ton Site Web Accessible

L'accessibilité, c'est important. Pourquoi ? Parce qu'en France, environ 1,7 million de personnes ont des troubles visuels, dont 207 000 sont aveugles (INSEE, 2021). Ces personnes, comme toi ou moi, naviguent sur le web et méritent une expérience aussi fluide que possible. Et pourtant, beaucoup de sites reposent trop sur leurs styles CSS pour transmettre des infos. Résultat : quand ces styles sautent, c'est un peu la panique.

Désactiver les CSS, c'est une méthode simple pour voir si ton site est vraiment accessible. Mais ce n'est pas juste une étape de test : c'est un moyen d'améliorer la structure de ton site et de t'assurer qu'il est utilisable pour tout le monde, peu importe les contraintes techniques ou physiques. En suivant les règles du Référentiel Général d'Amélioration de l'Accessibilité (RGAA) (RGAA 4.1), tu t'assures que ton site est inclusif et prêt à accueillir tous les utilisateurs. Allez, on regarde ça ensemble !

Pourquoi Désactiver les CSS ?

Désactiver les CSS, c'est comme enlever la déco d'une maison : tu regardes si la structure tient la route. Ça te permet de vérifier que ton contenu est logique, lisible et accessible, même sans effets visuels. Parce que si ton site est juste "beau" mais inutilisable sans styles, tu passes à côté d'une grosse partie de ton audience.

Et oui, certaines personnes utilisent des lecteurs d'écran ou naviguent avec des configurations minimales où les styles sont désactivés. Alors, pense à elles et vérifie que tout fonctionne correctement, même dans des conditions basiques.

Comment Désactiver les CSS ?

1. Directement dans ton Navigateur

Firefox :
1. Ouvre la page que tu veux tester.
2. Appuie sur Alt pour afficher la barre de menus.
3. Va dans Affichage > Style de la page > Aucun style (voir la doc).
Chrome/Edge :
1. Installe l'extension Web Developer.
2. Clique sur CSS > Disable All Styles.
Safari :
1. Active le menu Développement dans Safari > Préférences > Avancées.
2. Sélectionne Désactiver les styles CSS (guide complet).

2. Utiliser des Outils d'Accessibilité

axe DevTools (payant mais super complet)
Wave Accessibility Tool (gratuit, facile et rapide)

3. Désactiver les CSS dans le Code

Tu peux désactiver manuellement les styles en ajoutant l'attribut disabled dans tes balises CSS :

<link rel="stylesheet" href="style.css" disabled />

⚠️ Attention pour les Développeurs : toute les fonctionnalités de ton site doivent être accessibles

Important : toute les fonctionnalités de ton site doivent être accessibles, même si les styles CSS sont désactivés. En tant que développeur, ce n'est pas toujours simple, surtout quand tu utilises des bibliothèques externes.

Lors de ma mission d'accessibilité chez Réfugiés.info, j'ai constaté que même Radix UI, réputée pour son accessibilité, pose problème sans CSS. Par exemple, leurs menus déroulants ne fonctionnent pas correctement quand les styles CSS sont désactivés, rendant certaines fonctionnalités inutilisables pour les utilisateurs.

Pour résoudre ce problème, j'ai développé un hook React qui détecte si les styles CSS sont actifs et injecte des composants simplifiés dans le cas contraire. Ce n'est pas une solution universelle, mais ça m'a permis d'améliorer l'accessibilité du site tout en respectant les normes du RGAA.

Un Hook React pour Tester et Adapter l'Accessibilité sans CSS

Le Code du Hook

import { useEffect, useRef, useState } from "react";

const useStylesDisabled = (): boolean => {
  const [stylesDisabled, setStylesDisabled] = useState(false);
  const testElement = useRef<HTMLDivElement | null>(null);
  const resizeObserver = useRef<ResizeObserver | null>(null);

  useEffect(() => {
    const createTestElement = (): void => {
      if (!testElement.current) {
        const element = document.createElement("div");
        element.className = "test-styles-enabled";
        document.body.appendChild(element);
        testElement.current = element;
      }
    };

    const checkStyles = (): void => {
      if (testElement.current) {
        const computedColor = window.getComputedStyle(
          testElement.current
        ).color;
        const isDisabled = computedColor === "rgb(0, 0, 0)";
        setStylesDisabled(isDisabled);
      }
    };

    createTestElement();
    resizeObserver.current = new ResizeObserver(checkStyles);
    resizeObserver.current.observe(testElement.current!);
    checkStyles();

    return () => {
      resizeObserver.current?.disconnect();
      document.body.removeChild(testElement.current!);
    };
  }, []);

  return stylesDisabled;
};

Exemple d'Utilisation

import React from "react";
import useStylesDisabled from "./useStylesDisabled";

const MyComponent = () => {
  const stylesDisabled = useStylesDisabled();

  return (
    <div>
      {stylesDisabled ? (
        <p>
          Les styles CSS sont désactivés. Vérifiez que les fonctionnalités
          essentielles restent accessibles.
        </p>
      ) : (
        <p>
          Les styles CSS sont activés. L'expérience utilisateur est optimale.
        </p>
      )}
    </div>
  );
};

export default MyComponent;

TL;DR

Désactiver les CSS est une étape essentielle pour tester et améliorer l'accessibilité de ton site.
Vérifie la lisibilité, la navigation au clavier, et l'organisation du contenu.
Utilise des outils comme Wave ou axe DevTools, ou un hook React pour détecter l'état des styles CSS.

Sources et Ressources Supplémentaires

P.S : un grand merci à Anne-Sophie Tranchet et Erwan le Gall de la team accessibilité chez @beta.gouv.fr pour leur bonne humeur et leur accompagnement sans faille.