Texte et icônes générés par une CSS
Conception avec du contenu généré par une CSS
Une CSS peut générer du texte et des icône au moyen des pseudo-classes ::before
et ::after
. Cependant, les DACW 2.1 ne permettent pas d’utiliser du contenu non décoratif généré par des feuilles de style en cascade (CSS), car il peut être écrasé par des feuilles de style d’utilisateur (utilisées par des utilisateurs malvoyants), il manque un rôle, et il est invisible pour la fonctionnalité de recherche du navigateur; voici, entre autres, les raisons évoquées dans le document defense of WCAG Failure F87. Cela dit, il existe un scénario d’utilisation pour du texte supplémentaire généré par des feuilles de style en cascade ainsi qu’une technique généralement accessible pour les icônes d’information.
Veuillez suivre les pratiques exemplaires suivantes en présence d’un contenu généré par des feuilles de style en cascade :
- Masquer le contenu décoratif généré par des feuilles de style en cascade des lecteurs d’écrans en utilisant l’attribut
aria-hidden="true"
. - Ne pas utiliser du texte généré par des feuilles de style en cascade.
- Exception : Utiliser du texte généré par des feuilles de style en cascade pour afficher les éléments
mark
,del
,ins
ets
aux utilisateurs de lecteur d’écran.
- Exception : Utiliser du texte généré par des feuilles de style en cascade pour afficher les éléments
- Concernant les icônes d’information générées par des feuilles de style en cascade :
- Configurer l’icône sur un élément
<span>
, et :- Le masquer sur le lecteur d’écran des utilisateurs avec l’attribut
aria-hidden
. - Ajouter une étiquette visible pour les utilisateurs de souris en utilisant l’attribut
title
.
- Le masquer sur le lecteur d’écran des utilisateurs avec l’attribut
- Ajouter une étiquette pour les utilisateurs de lecteur d’écran dans un deuxième élément
<span>
, masqué visuellement avec la classe CSS de la BOEW.wb-inv
.
Cette approche diffère du modèle d’icônes du Guide de style de la BOEW du fait de l’ajout des attributs
title
etaria-hidden
. Elle ne tient pas compte des besoins des utilisateurs de clavier malvoyants.Les DACW 2.1 proposent également une technique d’icônes informatives CSS, ARIA24 : Semantically identifying a font icon with role="img", mais elle nécessite une déclaration de style particulière dans la feuille de style de l’utilisateur, déclaration conçue pour protéger la déclaration de la famille de polices de l’icône contre l’écrasement. Bien que cela ne soit pas mentionné dans les DACW 2.1, l’utilisation de la technique ARIA24 suppose que l’on fasse connaître cette technique aux utilisateurs malvoyants. De même, le document defense of WCAG Failure F87 laisse pensé que la solution ARIA24 ne dispose pas de la sémantique nécessaire.
Il n’existe pas de technique idéale pour les polices d’icônes générées par des feuilles de style en cascade.
- Configurer l’icône sur un élément
Bon exemple : Déclarations de limite générées par CSS pour des éléments non présentés aux lecteurs d’écran
Les rôles de l’élément <mark>
et des éléments rédactionnels <del>
, <ins>
et <s>
ne sont pas déclarés par les lecteurs d’écran. Pour signaler leur présence aux utilisateurs de lecteur d’écran, un texte visuellement masqué généré par CSS signale le début et la fin de chaque rôle.
CSS
Début du code
mark::before { content: " [mise en évidence du début] "; }
mark::after { content: " [mise en évidence de la fin] "; }
del::before { content: " [suppression du début] "; }
del::after { content: " [suppression de la fin] "; }
ins::before { content: " [insertion du début] "; }
ins::after { content: " [insertion de la fin] "; }
s::before { content: " [début d’un texte biffé] "; }
s::after { content: " [fin d’un texte biffé] "; }
/* masque visuellement le contenu généré */
mark::before, mark::after,
del::before, del::after,
ins::before, ins::after,
s::before, s::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
Fin du code
Billet de blogue d’Adrian Roselli F87: CSS Generated Content and WCAG Conformance. 24 février, 2019.
Bon exemple : Icône CSS informative
Dans cet exemple, l’icône de marteau Font Awesome est utilisée pour représenter une tâche.
- L’élément
<span>
avec les classes.fas
et.fa-hammer
affiche l’icône par l’entremise d’une pseudo-classe de CSS,:before
. - Son attribut
title
contient une infobulle pour les utilisateurs de souris, « Tâche ». - Son attribut
aria-hidden="true"
cache l’élément aux lecteurs d’écran, car leur support de l'attributtitle
est incohérent. - Juste après l’icône on trouve un élément
<span>
visuellement masqué qui porte le nom « Tâche », et qui se déclare sur tous les lecteurs d’écran.
L'exemple commence
Tâche Remplir la demande
L'exemple finit
Si leurs feuilles de style personnalisées écrasent la déclaration font-family de l’icône, les utilisateurs de souris malvoyants peuvent accéder au nom de l’icône en survolant le carré du paramètre fictif, ce qui active l’infobulle de l’attribut title.
HTML
Début du code
<p>
<span class="fas fa-hammer" title="Tâche" aria-hidden="true"></span>
<span class="wb-inv">Tâche</span>
Remplir la demande
</p>
Fin du code
CSS
Début du code
.fa-hammer:before { content: "\f6e3"; }
.fas { font-family: "Font Awesome 5 Free"; }
.wb-inv {
clip: rect(1px,1px,1px,1px);
height: 1px;
margin: 0;
overflow: hidden;
position: absolute;
width: 1px;
}
Fin du code
Ressources WCAG connexes
Ressources WCAG connexes
Critères de succès
Techniques
- G94 : Fournir un court équivalent textuel pour un contenu non textuel qui a la même fonction et présente la même information que le contenu non textuel (en anglais)
- ARIA6 : Utiliser aria-label pour attribuer des étiquettes aux objets (en anglais)