L’attribut aria-label

Dans le cadre de l’accessibilité, l’attribut aria-label permet d’étiqueter une balise pour donner une explication ou une information aux liseuses. Il permet notamment de donner un texte alternatif à un éléments. Si l’option est activée dans la liseuse, alors l’étiquette pourra être lue par la voix de synthèse.

L’attribut aria-label peut être utilisé sur n’importe quelle balise mais il faut que celle-ci ne soit pas vide…

Exemple 1 :
<span class="mon_pictogramme" aria-label="Pour les élèves de 6eme" />
Exemple 2 :
<span class="mon_pictogramme" aria-label="Pour les élèves de 6eme">&#160;</span>

L’exemple 1 affiche un pictogramme « 6eme » en CSS avec une propriété de type :
.mon_pictogramme::after{content:"6ème"; ...}
Bien que conforme, l’exemple 1 sera intercepté par l’outil d’analyse DAISY car la balise est auto-fermée, elle n’entoure aucun texte.

Pour contourner le problème, il suffit de fermer la balise normalement en plaçant une espace (insécable ou non).

Astuce
Attention l'attribut aria-label est un attribut qui ne sera accessible qu'aux liseuses spécifiques à l'accessibilité. 
Si vous souhaitez activer la lecture synthétique sur votre outils de lecture en ligne, vous glissez dans le monde de l'audiobook, mais la balise aria-label ne sera pas lue, seul le texte dans les balises est lu.
Aussi posez-vous la question à savoir s'il n'est-il pas plus pertinent de glisser du texte "invisible" qui sera lu par la voix de synthèse ce qui aura deux avantages :
1) Permettre une lecture accessible,
2) Rendre le livre audio.

Exemple de style CSS pour du texte "invisible" :
.sr-only {
   display:inline-block;
   overflow: hidden!important;
   clip: rect(1px, 1px, 1px, 1px)!important;
   width: 1px!important;
   height: 1px!important;
   padding: 0!important;
   white-space: nowrap!important;
   border: 0!important;
   -webkit-clip-path: inset(50%)!important;
   clip-path: inset(50%)!important;
   }