bohwaz added on 2016-02-24 01:16:00:

Les icon fonts c'est pas top pour les dyslexiques, SVG c'est mieux, il faudrait donc supprimer l'icon font et utiliser SVG à la place, le mieux serait probablement d'utiliser du CSS pour ça, ou faire comme github et injecter le SVG directement dans le code : [https://github.com/blog/2112-delivering-octicons-with-svg]

freepius added on 2016-04-03 18:09:56:

D'après cet article [https://css-tricks.com/icon-fonts-vs-svg/] et divers autres articles/recherches, il me semble beaucoup plus pertinent de faire à la manière GitHub, c'est à dire d'inclure les icônes sous forme de "inline SVG".

Je me propose de réaliser cette feature en vous envoyant un patch très prochainement.

Le plus chiant étant de trouver l'équivalent "petit SVG" des icônes utilisés (pour ne pas que la forme SVG prenne trop de kilo-octets).

Qu'est-ce que j'entends par "petit SVG" ?

Et bien, pour une même image SVG, on peut la représenter :
* avec beaucoup de points et de grandes coordonnées ;
* avec moins/peu de points et de petites coordonnées.

Donc, pour le même objet SVG, la seconde version prendra bien moins de place...

Pour le moment, je n'ai trouvé que les "grosses versions" des icônes SVG.

freepius added on 2016-04-03 18:25:10:

Re : Finalement, je vais peut-être utiliser la solution "SVG Sprites" [https://css-tricks.com/svg-sprites-use-better-icon-fonts/]

À voir...

freepius added on 2016-04-04 15:06:20:

Une petite remarque / question...
L'élément html <svg> étant de type image/objet/..., il est insensible aux pseudo-classes CSS :before et :after.

Ainsi, votre hack CSS de "tooltip" ne peut lui être appliqué :

.icn[title]:after {
    display: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    content: attr(title);
    ...
}

.icn[title]:hover:after {
    display: inline-block;
    opacity: 1;
    visibility: visible;
}

Que faire alors ?

1) Ne plus du tout utiliser ce hack et garder le comportement des navigateurs en ce qui concerne l'attribut "title" (la meilleur solution à mon avis).

2) Tâcher de contourner cela, par exemple en intégrant le <svg> dans un <span>, qui lui pourra afficher ce tooltip.

3) Utiliser/écrire un mini-outil javascript de tooltiping.

Perso, je suis fortement pour limiter les fioritures graphiques, surtout lorsqu'elles supplantent un comportement existant du navigateur.

freepius added on 2016-04-09 14:21:21:

J'ai envoyé un patch à patch@garradin.eu
J'espère avoir bien pris en compte toutes les icônes.
J'ai testé ce patch sur Firefox 45 et Chromium 49 (sur une Debian).
J'ai opté pour l'approche de GitHub (inclusion du SVG en inline).

bohwaz added on 2016-10-09 21:57:22:

Au final après plusieurs tests de @freepius, on n'a pas trouvé de meilleure solution que la icon font :(

bohwaz added on 2017-03-29 20:34:25:

OK, donc après plusieurs tests l'icon font ne pose pas de soucis d'accessibilité car on utilise des symboles unicode standards, pas de l'unicode "invisible" ou des caractères classiques, du coup quand l'icon font est désactivée le rendu est quand même correct.

Exemple dans firefox avec les web fonts désactivées : [http://i.kd2.org/i/3a/79TFz5L4N.Garradin_no_icon_font.png]

(certaines icônes sont en couleur car j'ai installé sur ma machine une fonte pour les emoticons)

Quand on utilise une fonte personnalisée pour les dyslexiques par exemple le résultat est du coup correct, l'icône n'est pas exactement celle de la web fonte, mais suffisamment proche pour garder le sens.

Un lecteur d'écran donne la description du symbole unicode, qui fait sens normalement.

Donc on est dans un cas d'utilisation d'icon font qui est accessible, normalement :)