Icônes, symboles, émojis

Les polices symboliques et les caractères unicode sont parfois utilisées pour afficher une icône, un symbole ; l'usage le plus connu étant le symbole de maison pour représenter la page d'accueil du site.

Polices d’icônes et de symboles

Il existe des polices de caractères qui, lorsqu’elles sont implémentées dans le site permettent d’afficher des icônes ou des symboles. Les plus connues sont :

Pour respecter la sémantique HTML, ces polices de caractères sont implémentées via des classes de style dans un élément HTML i.

Implémentation d’une icône ou d’un symbole purement décoratif

Pour savoir si l’icône (ou symbole) est décorative, le plus simple est de se poser la question : « Est-ce que je perds de l’information si je ne la vois pas ? ». Si la réponse à la question est « Non », alors l’icône est décorative.

Dans ce cas, le symbole sera masqué aux lecteurs d’écran via l’attribut aria aria-hidden="true".

<i class="fas fa-gift" aria-hidden="true"></i>

Implémentation d’une icône ou d’un symbole qui porte de l’information

Si le symbole est porteur d’information (c’est à dire que, en son absence, on perd de l’information),

on masqura l’icône via l’attribut aria-hidden="true" ;
on rajoutera un texte visuellement masqué (via une classe de style du type .sr-only ; on retrouve aussi fréquemment sur le web cette classe de style nommée .visually-hidden) qui sera lu par les logiciels de synthèse vocale.
on veillera à respecter la sémantique HTML en transformant l’élément HTML i en élément span.

HTML

<p><span class="fas fa-search" aria-hidden="true"></span>
<span class="sr-only">Rechercher</span></p>

CSS

/** sr-only : screen-reader only : seulement pour lecteur d'écran */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

Autre implémentation possible, sans l’attribut aria-hidden
Notez que le texte se trouve alors entre les balises faisant référence à la police symbolique afin de ne pas vocaliser une balise vide.

HTML

<span class="fas fa-search"><span class="sr-only">Rechercher</span></span>

CSS

/** sr-only : screen-reader only : seulement pour lecteur d'écran */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

Les caractères unicode

Les caractères unicodes sont parfois utilisés pour représenter des flèches, des symboles mathématiques ou autres… Ces caractères sont lus, pas toujours de manière compréhensible, par les synthétiseurs vocaux mêmes s’ils sont implémentés via la propriété CSS content.

Exemple d’implémentation d’une flèche en CSS qui sera vocalisée

.fleche-droite::after {
  content: "→ ";
}

Dans cet exemple de flèche, une bonne implémentation consiste à ignorer ce symbole pour les technologies d’assistance via l’utilisation de l’attribut aria-hidden="true".

Visuel
Lire la suite

HTML

<a href="..." title="Lire la suite sur....">Lire la suite<span aria-hidden="true"> →</span></a>

Les émojis

Il peut être tentant de remplacer ou d’agrémenter son texte avec des émojis. Comme pour les caractères unicode traités précédemment (d’ailleurs les émojis en sont), ceux-ci sont très mal vocalisés par les technologies d’assistance. On implémentera donc ces émojis de la manière suivante :

on cache l’émoji aux logiciels de synthèse vocale via l’attribut aria-hidden="true" ;
on propose sa signification via un texte visuellement caché mais lu par les technologies d’assistance.

Visuel

J'aime le chocolat.

HTML

<p><span class="sr-only">J'aime</span><span aria-hidden="true">J'❤️</span> le chocolat.</p>

CSS

/** sr-only : screen-reader only : seulement pour lecteur d'écran */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}