Vous le savez: j’aime jouer avec le CSS ! Et les pseudo-éléments offrent toute une gamme de possibilités pour s’amuser un peu. Mais notre amusement se fait-il parfois au détriment de l’accessibilité de notre site ?
Vous me répondrez que globalement il s’agit purement d’esthétisme donc aucune information essentielle. Et c’est le cas la plupart du temps, mais qu’en est-il des images ?
Du côté des développeurs de navigateurs, la question s’est posée ! Et leur réponse est désormais utilisable, donc découvrons ça ensemble !
Ajouter un alt à nos images dans un before ou un after
Il n’est pas rare que pour des raisons de simplicité, ou lorsque nous n’avons pas trop la main sur le HTML (comme lors de l’utilisation d’un CMS par exemple) nous utilisions un pseudo-élément pour afficher une image.
Deux options s’offrent à nous: passer par un background-image ou passer par le content. Mais comment ajouter un attribut alt à un élément qui n’existe pas vraiment dans le DOM ? Afin de ne pas avoir à ajouter de propriété CSS sortie de nulle part, une solution très simple a été mise en place sur les navigateurs récents:
h1:before {
content: url(bg.png) / "Une plaine avec des buissons";
height: 100px;
width: 100px;
}Comment être sûrs désormais que notre alt a bien été pris en compte ? Quand vous allez dans votre inspecteur d’élément, que ce soit sous Firefox ou Chrome, vous avez en plus des onglets de styles ou de listener un onglet d’accessibilité. En cliquant dessus, votre navigateur vous affichera ce qu’il détecte:
Mais quid du background image ? Malheureusement, comme nous pouvons facilement le tester, ceci ne marche ni avec background-image, ni avec background:
Vérifier la compatibilité
Un des souci que nous rencontrons souvent avec ce type d’initiative, c’est le manque de compatibilité entre tous les navigateurs. En effet, un navigateur non compatible ne comprendra tout bonnement pas la ligne et l’ignorera. Pour cela, on peut utiliser un workaround tout simple:
h1:before {
content: url(bg.png);
content: url(bg.png) / "Une plaine avec des buissons";
height: 100px;
width: 100px;
}De cette façon, si la seconde option n’est pas compatible, c’est la première qui sera exécutée. Si elle est compatible, elle viendra overrider la première et diffusera donc le texte dans les paramètres d’accessibilité.
