Contenu généré par CSS

CSS permet d'insérer du texte, des images et des polices d'icônes à une page web. A quoi faut-il être attentif pour que ces contenus soient accessibles?

Texte inséré par CSS

Les pseudo-éléments :before et :after permettent d'insérer du texte dans une page web. Ce texte se retrouve dans l'accessibility tree et est donc visible par les technologies d'assistance comme les lecteurs d'écran. Regardez cet exemple de texte inséré avec :after. Il ne faut rien faire de particulier pour que ce texte soit accessible.

Images insérées par CSS

Techniques

Il y a deux techniques pour insérer des images par CSS:

• Avec background url: c'est déconseillé, à moins que l'image soit décorative, car l'image disparait quand un utilisateur spécifie des couleurs d'arrière-plan spécifiques dans son navigateur, ou utilise le mode haut contraste de son système d'exploitation.
• Avec les pseudo-éléments :before ou :after : les images restent visibles quand on regarde la page en mode haut contraste.

Exemple

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

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

C'est un lien qui ne contient pas de texte; il ne contient qu'une icône Twitter insérée avec :after. Les images insérées par CSS ne se trouvent pas dans l'accessibility tree. Ce lien n'a pas de nom pour les utilisateurs d'aides techniques.

Alternative textuelle

Il n'est pas possible de donner un attribut alt à une image insérée par css.

• Si l'image est décorative, ce n'est pas un problème.
• Si l'image est porteuse d'information, nous devons utiliser une autre technique pour donner une alternative textuelle à cette image.

Dans l'exemple, l'icône twitter n'est pas décorative car c'est l'icône à elle seule qui permet de comprendre la fonction du lien. Il existe plusieurs techniques pour donner une alternative textuelle à cette icône:

Texte caché

On peut ajouter dans le lien un texte de remplacement qui n'est pas visible à l'écran mais qui est disponible pour les lecteurs d'écran et autres technologies d'assistance:

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

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px;
}

Vous trouverez plus d'infos sur cette technique dans l'article cacher du texte.

Avec aria-label

On peut ajouter un aria-label au lien:

<a class="twitter" 
aria-label="Twitter" href="https://twitter.com/anysurfer">
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

Cette technique est utilisable si l'image est associée à un lien ou un bouton, mais pas si elle se trouve sur un élément générique comme un span. Ajoutez l'attribut aria-label uniquement à un élément avec un rôle et qui n'a pas encore de nom. .

Dans cet exemple, l'élément a a un rôle 'link' implicite. Le lien ne contient pas de texte donc. Vous trouverez plus d'informations sur cette technique dans notre article sur aria-label.

Polices d'icônes

Quand on utilise une police d'icônes, on insère un caractère dans une page web (souvent avec les pseudo-éléments :before et :after) mais la signification visuelle du caractère ne correspond généralement pas à ce qu'un lecteur d'écran prononcerait pour ce caractère. Il faut donc faire plusieurs choses pour rendre l'information accessible:

• Cacher l'icône avec aria-hidden="true". En effet, quand on utilise une police d'icônes, on insère un caractère unicode dans l'accessibility tree. Comme ce n'est pas la signification littérale du caractère qui nous intéresse mais sa forme visuelle, on veut supprimer ce caractère de l'accessibility tree. Attention, il faut associer le caractère unicode à un élément que l'on peut cacher, par exemple un span qui se trouve dans un bouton .
• Si le caractère est décoratif il ne faut rien faire d'autre.
• Si le caractère est porteur d'information, ajoutez une alternative textuelle de la même manière que pour les images insérées par CSS (exemples plus haut).

<span class="phone" aria-hidden="true"></span>
<span class="visuallyhidden">numéro de téléphone</span>

Exemples de polices d'icônes.

Résumé

• Texte inséré par CSS: pas de problème
• Images décoratives insérées par CSS: OK
• Images porteuses d'information insérées par CSS: OK avec :before ou :after (pas background) + ajouter texte caché ou aria-label
• Police d'icône décorative: ajouter sur un span séparé, le cacher avec aria-hidden="true"
• Police d'icônes porteuse d'information: ajouter sur un span séparé, le cacher avec aria-hidden="true" + ajouter texte caché ou aria-label