Contenu généré par CSS

Sophie Schuermans le 01/10/2014 - Réagissez

HTML pour le contenu, CSS pour la mise en forme : ce mantra a toujours été considéré comme la base d'un web de qualité. C'est également un plus pour l'accessibilité. Et pourtant il nous arrive régulièrement d'introduire par l'intermédiaire du CSS du contenu significatif dans une page web. Il n'est pas toujours possible de rendre ce contenu accessible pour tout le monde. La meilleure règle reste donc d'utiliser CSS uniquement pour la mise en forme et de mettre le contenu dans le markup ou éventuellement de l'introduire dans le DOM au moyen de Javascript.

Images insérées au moyen de CSS (background, :before ou :after)

La liste de directives AnySurfer contient un point sur les images d'arrière-plan porteuses d'information. Le plus simple est de ne pas insérer d'images porteuses d'information au moyen de CSS, mais c'est quand même une pratique courante (utilisation de sprites, par exemple):

<a class="twitter" href="https://twitter.com/anysurfer"></a>
a.twitter:after { 
    content:url('icon_twitter.png'); 
}

L'image d'arrière-plan est invisible pour un lecteur d'écran et il n'est pas possible d'y ajouter un attribut alt. Ce qui reste est donc un lien vide sans aucune signification. Pour corriger cela il faut ajouter texte de remplacement caché :

<a class="twitter" href="https://twitter.com/anysurfer">
<span class="visuallyhidden">Twitter</span>
</a>

Dans l'exemple ci-dessus, l'image est insérée avec :after. Dans le cas d'une image porteuse d'information c'est une meilleure solution que background. Lorsqu'un utilisateur malvoyant active le mode haut contraste de Windows, les images d'arrière-plan (insérées avec background) sont supprimées mais les feuilles de style ne sont pas désactivées donc le contenu caché reste caché et le lien de l'exemple ci-dessus serait invisible. Avec :after, l'image n'est pas supprimée en mode haut contraste et le lien reste visible.

Texte inséré avec :before et :after

Les pseudo-éléments :before et :after permettent d'intercaler du contenu (texte ou image) dans une page web. C'est parfait pour ajouter des éléments décoratifs comme par exemple un tiret entre les liens d'un menu horizontal. Mais il ne faut pas utiliser cette technique pour insérer de l'information comme dans cet exemple (insertion de texte avec :after).

Le contenu inséré par CSS ne fait pas partie du DOM et n'est donc normalement pas disponible pour les lecteurs d'écran. On pourrait donc penser dans ce cas que ce serait une bonne idée d'ajouter un texte caché comme pour les images porteuses d'information. Mais ce n'est pas le cas.

Nos tests ont montré qu'en réalité presque tous les navigateurs transmettent ce contenu aux lecteurs d'écran, mais Internet Explorer ne le transmet pas. En ajoutant un texte caché, le contenu sera lu deux fois dans tous les navigateurs sauf internet explorer. Ce n'est pas une bonne solution.

Il ne faut donc pas injecter de contenu textuel au moyen de CSS, mais mettre ce contenu dans le code HTML, ou éventuellement l'y insérer au moyen de JQuery. Dans cet exemple (insertion de texte avec JQuery) nous ajoutons une indication du format PDF à tous les liens vers des fichiers PDF, sans rien modifier au markup.

<script>
	$('a[href$=".pdf"]').each(function(){
	    $(this).append(' (PDF)');
	});
</script>

Polices d'icônes (icon fonts)

Les polices d'icônes sont un cas particulier. La police d'icônes associe des icônes à des caractères Unicodes. Le caractère Unicode est souvent inséré par l'intermédiaire des pseudo-éléments CSS :before et :after comme décrit plus haut. Mais la signification visuelle de l'icône affichée n'a rien à voir avec le caractère inséré que le lecteur d'écran prononce. Voir des exemples d'utilisation plus ou moins accessible de polices d'icônes.

Pour que l'information véhiculée par l'icône soit accessible, il faut

  • prévoir un texte de remplacement significatif, comme pour une image d'arrière-plan,
  • et faire en sorte que le caractère ne soit pas lu. Cela peut se faire de deux manières:
    • Choisir un caractère Unicode qui fait partie du private use area. Les lecteurs d'écran ne les lisent pas.
    • Si vous utilisez des caractères lisibles, cachez-les avec aria-hidden="true".

Conclusion

Karl Groves résume très bien le sujet dans cet article: CSS generated content is not content: si c'est une information, ne l'insérez pas par du CSS. Si c'est décoratif, utilisez CSS.

Réagissez

Les balises HTML suivantes sont autorisées: <a> <b> <ul> <li>