10.3. Garantir la compréhension de l’information même lorsque CSS est désactivé

Veiller à ce que l’information reste disponible et compréhensible même lorsque CSS est désactivé, notamment lorsque des couleurs, des tailles, des formes ou encore des positions sont vecteurs d’informations.

Veiller également à ne pas générer de contenus informatifs en passant seulement par CSS.

Exemples

Position courante dans les menus (exemple 1)

Dans cet exemple, pour le lien « Investisseurs », les couleurs de texte et de fond différentes ainsi qu’une flèche tournée vers le bas indiquent qu’il s’agit de la rubrique courante.

Ci-dessous, une solution via l’utilisation d’une balise <strong> pour ne pas perdre cette information sans CSS.

<a href="…" aria-current="true">
   <strong>Investisseurs</strong>
</a>

Position courante dans les menus (exemple 2)

Dans cet exemple, pour le lien « Organigramme », une couleur de fond différente ainsi qu’une mise en gras et une encoche indiquent qu’il s’agit de la page courante.

Ici, comme il s’agit de la page courante, une solution efficace pour véhiculer cette information sans CSS consiste à ne pas englober cet intitulé d’une balise <a>.

<ul>
   <li><a href="…">Missions</a></li>
   <li><a href="…">Budget</a></li>
   <li aria-current="page">Organigramme</li>
   <li><a href="…">Instances</a></li>
   <li><a href="…">Dates clés</a></li>
</ul>

Contenus générés en CSS (exemple 3)

Les contenus informatifs, nécessaires à la compréhension, ne doivent pas être générés en CSS.

a[href*=".pdf"]::after{
   content: ' (PDF)';
}

Dans ce premier exemple, l’indication du format des fichiers PDF en téléchargement est ajouté en CSS. Ce qui est incorrect.

a[target=_blank]::after{
   content: ' (nouvelle fenêtre)';
}

Dans ce second exemple, la mention « (nouvelle fenêtre) » est ajoutée en CSS. Ce qui est également incorrect.

Aller plus loin

2 commentaires

  • Par Sébastien Delorme, le 17 mai 2016 à 16h13.

    Suite au déplacement de recommandations de cette thématique vers Zoom et taille de texte, cette recommandation passe du numéro 10.5. à 10.3.

    Répondre

  • Par Johan Ramon, le 26 décembre 2017 à 14h14.

    Fiche mise à jour le 18 décembre 2017.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page