Caractères unicode, icônes textuelles et accessibilité

Aujourd'hui, de plus en plus de sites utilisent des caractères unicode pour afficher des caractères spéciaux (des flèches par exemple) ou de petites icônes sous forme de caractères (ce qu'on appelle des icônes textuelles; les icônes pour partager un contenu sur des réseaux sociaux ou pour lancer la lecture d'un clip multimédia intégré par exemple), qui n'étaient autrefois qu'affichables en tant qu'images.

Afficher des caractères unicode à la place d'images a plusieurs avantages dont ceux-ci :

• Les caractères inclus dans des polices posent moins de problèmes quand ils sont redimensionnés car ils ont été prévu pour être lissables (pas d'artéfacts, de pixélisation, etc.). Par conséquent cela permet aux malvoyants qui zooment ou qui utilisent des loupes d'écran de les voir mieux et sans effets gênants quelque soit le support
• Mème s'il faut télécharger une police spéciale, c'est presque toujours moins lourd qu'une image classique; et puis les polices se multiplient sur le web, donc il y a de bonnes chance que la même soit utilisée sur plusieurs sites.
• IL est extrêmement facile d'en changer non seulement la taille sans risques, mais aussi la couleur ou d'autres propriétés, là où il faudrait refaire autant d'images qu'il n'y a de variantes
• Ces caractères et icônes tendent à devenir toujours les mêmes d'un site à l'autre. C'est très bien pour l'utilisateur d'avoir moins souvent à retrouver des repères qui changent d'un site à l'autre
• IL est probable que l'alignement text-texte soit plus facile que de l'alignement texte-image; les experts en CSS confirmeront.

Malheureusement, tout cela ne va pas sans inconvénients :

• Bien entendu, les caractères sont toujours unicolorres.
• La probabilité est très grande pour que les caractères unicode ne soient pas accessibles avec les lecteurs d'écran, car pas reconnus par ces derniers et donc pas ou mal restitués.

Vous l'aurez compris, c'est surtout ce dernier point qui fâche.

Rendre accessible les icônes textuelles et les caractères unicode

En ce qui concerne les icônes textuelles précisément, plusieurs articles expliquent comment les rendre accessibles aux lecteurs d'écran, mais c'est une gymnastique compliquée. Ces solutions se basent souvent sur des moyens de cacher les caractères aux lecteurs d'écran via aria-hidden, et afficher un texte de remplacement invisibles aux utilisateurs bien voyants à la place.

S'il faut reconnaître que ces solutions marchent plutôt bien, en fait, elles sont mauvaises :

• C'est une technique relativement compliquée
• Le texte de remplacement est à la charge du concepteur, donc il y a un risque qu'il soit oublié, mauvais ou pas représentatif; et surtout, il peut changer d'un site à l'autre, et c'est un bon moyen pour perdre ses repères

En fait, ça devrait être le travail de nos lecteurs d'écran que de nous rendre ces caractères correctement; que ce soit des flèches, une icône twitter, ou une formule mathématique, peu importe ! Les avantages seraient les suivants :

• Tous les concepteurs qui utilisent des caractères suffisament répandus n'ont plus à se poser la question de l'accessibilité; sachant que 99.9% des sites sont toujours aussi inaccessibles en 2014, que ce soit par ignorance ou par manque de volonté, ça serait toujours ça de moins à leur refourguer comme travail
• L'utilisateur de lecteur d'écran peut, s'il le souhaite, personnaliser ce qui est énoncé lorsque ces caractères sont rencontrés. Une dénomination courte pour les habitués qui roulent leur bosse sur le web depuis 10 ou 15 ans, et des dénominations plus longues ou plus explicites pour les débutants et ceux qui sont encore mal habitués au web serait envisageable et sans doute utile.

Et c'est ici que les ennuis commencent: la bonne nouvelle, c'est qu'on peut le plus souvent ajouter les caractères qui nous manquent dans le dictionnaire de prononciation; la mauvaise, c'est que c'est excessivement long et pénible, et surtout que personne n'a encore sérieusement pris l'initiative de le faire d'office par défaut. A l'heure où les boutons qui ne sont constitués que d'une simple flèche se multiplient dans les applications natives comme sur le web, pour ne citer ne serait-ce que ça, il faudrait vraiment qu'ils s'y mettent. Notons quand même que VoiceOver de chez Apple a une petite avance en la matière, car il annonce déjà correctement et par défaut un certain nombre de flèches par exemple (il risque de la perdre rapidement si les autres se bougent vu qu'il n'y a pas de dictionnaire de prononciation sur iOS, mais c'est un autre sujet). Toujours est-il que la vaste majorité des caractères unicode actuellement utilisés, avancés ou pas, spécialisés ou pas, ne sont pas reconnus et c'est bien dommage.

Lister les caractères unicode d'utilisation courante

Fort de ce superbe constat, j'ai entrepris d'ajouter dans mon dictionnaire jaws tous les caractères unicode spéciaux que j'ai déjà pu rencontrer et identifier.

Des listes de caractères unicode, on en trouve plein sur le web ! Mais aucune ne réunit toutes les nécéssités suivantes :

• être assez complète
• lister des caractères dans plusieurs catégories variées (par exemple on trouve plein de listes de symboles mathématiques; mais pour le reste, nada!)
• être à la fois suffisament rangé en catégories, mais suivre un autre ordre que croissant dans les codes ou des entités si ça paraît plus logique
• contenir une description compréhensible, et éventuellement un exemple où ce caractère peut être utilisé si la description n'est pas assez claire
• L'entité HTML si elle existe, et le code décimal, pour référence et pour pouvoir ajouter facilement aux dictionnaires
• ET le tout, en françAis de préférence

Sachant que les dictionnaires jaws ne sont pas aisément partageables (impossible de les fusionner par exemple), j'ai choisi de vous envoyer ma liste ci-dessous ! Je souhaiterais dans l'idéal que vous m'aidiez à la compléter et à la corriger, si vous vous y connaissez mieux que moi ou si vous avez repéré des erreurs.

Sachant qu'il peut y avoir 4 milliards de caractères, il serait illusoir et totalement inutile de vouloir les lister vraiment tous. Mais cette petite liste n'est de loin pas complète; il manque notamment :

• Les boutons multimédia (play, pause, stop, etc.)
• Les icônes de réseaux sociaux (twitter, facebook, etc.)
• Des symboles courants (valide, invalide, téléphone, microphone, fax, imprimante, danger, attention, feu, tête de mort, etc.)
• Des caractères divers (cases cochée, enveloppe, envoyer, télécharger, partager, etc.)
• il manque aussi 36000 variétés de flèches, de doigts et autres
• et aussi d'autres caractères styllistiques parfois utilisés dans des listes à puces, des listes numérotés, des questionnaires et autres (chiffres/lettres entourés/encadrés, etc.)

Enfin bref, si vous vous sentez d'attaque, il y a encore du boulot ! La liste actuelle est ci-dessous.

Liste des caractères unicode avec description, exemple, code et entité

Flèches

Doigts et mains

Multimédia

Symboles mathématiques

Fractions

Caractères de ligature

Caractères typographiques

Symboles divers

Météo et astronomie

Symboles de jeux

Musique

Caractères divers

Lettres grecques

Caractères styllistiques

Caractères accentués occidentaux