[Résolu] Lien vide ?

Bonjour,
J'utilise les font-icons pour des éléments comme pour la page des flux :

<a href="rss.php"><span class="icon-rss"></span></a>

Néanmoins, j'ai ouïe dire que ça pose un problème d'accessibilité. Comment le rendre accessible ? J'avais pensé à un display:none. Des idées ?

Bonjour,

oui un lien vide pose un gros problème d'accessibilité puisqu'il n'y a aucun moyen de savoir à quoi sert cet élément essentiel de "l'hypertexte" s'il est vide.

Un display: none; … il n'y a en fait rien à cacher puisque c'est vide (de contenu), à moins que span:before { content: 'a'; } ne soit utilisé pour l'icône, auquel cas, certains lecteurs d'écrans (mais pas tous !) vont lire "a" (a, x, u, 4 super on est bien avancés ).

Faute d'avoir du texte visible dans ce lien, il est alors recommandé :
- d'utiliser des caractères Unicode du "Private User Area" (voir lien ci-dessous pour plus de détails) et pas "a" pour éviter qu'ils ne soient lus par un lecteur d'écran
- si on a la contrainte d'utiliser des caractères comme a, rajouter un aria-hidden="true" sur le span qui comporte le caractère (comme contenu HTML ou contenu généré en CSS). Pas sur l'élément a. Ça permet au moins aux lecteurs d'écran les plus récents d'ignorer ce caractère.
- d'ajouter du texte affiché hors écran (text-indent négatif par exemple pour que ce soit lu par les lecteurs d'écran mais pas visible par les autres utilisateurs. display: none et visibility: hidden masqueraient le contenu à tous avec CSS activé, c'est pas ce qu'on veut). Il faut l'ajouter dans un span enfant de span.icon-rss (ou frère si span.icon-rss a aria-hidden="true" puisqu'on veut que ce soit lu par les lecteurs d'écran...)

<a href="rss.php">
    <span class="icon-rss">
        <span class="visually-hidden">Go to RSS feed</span>
    </span>
</a>

ou

<a href="rss.php">
    <span class="icon-rss" aria-hidden="true"></span>
    <span class="visually-hidden">Go to RSS feed</span>
</a>

Ça résoud au moins le problème pour les non-voyants utilisateurs de lecteur d'écran.
Les malvoyants et autres utilisateurs de lecteurs d'écran étaient sans ce texte supplémentaire dans le même cas que les autres utilisateurs : on espère que l'icône est très explicite et qu'on comprend ce qu'elle va faire ou vers quoi elle pointe, faute de texte explicatif...

Un dernier point qui aurait dû être le premier : est-ce bien un lien (qui pointe vers une ressource) et non un bouton (qui réalise une action) qu'il faut ? Bon dans le cas d'icon-rss pointant vers rss.php, je me doute que c'est un lien

Un article en anglais a récemment abordé ce sujet : Bulletproof Accessible Icon Fonts.

Bonjour,
j'ai vu que clip: rect(0 0 0 0); pouvait remplacer text-indent:-xxpx. Est-ce approuvé ou pas ?
Sinon, que pensez vous de http://kudakurage.com/ligature_symbols/ ?

Désolé du double post.

.visually-hidden {clip: rect(0 0 0 0);overflow: hidden;position: absolute;height: 1px;width: 1px;}

marche parfaitement. Merci (à quand un guide des bonnes pratiques, où du moins un checklist ou autres, sur alsa ?)

Salut,

Pourquoi ne pas faire plus simple que ça :

<a href="rss.php"><img src="icon-rss.png" alt="Flux RSS" /></a>

?

Je pense qu'utiliser la balise title peux également t'aider sur ton a.

<a href="rss.php" title="flux RSS"><span class="icon-rss"></span></a>

Edit :

L'utilisation du JS pourrait-être adapté dans ton cas également. Par défaut, tu affiches RSS dans ton lien, et tu le remplace par ton image au chargement. Genre grâce à un attribut

data-span-replace

qui te permet de rester générique.
Modifié par totopsy (10 Mar 2014 - 10:35)

Victor BRITO a écrit :
Salut,

Pourquoi ne pas faire plus simple que ça :

<a href="rss.php"><img src="icon-rss.png" alt="Flux RSS" /></a>

?

Parce que c'est plus pratique d'utiliser les fonticons pour les changements de styles... ?!
@Totopsy : J'évite un max le js quand cela n'est pas nécessaire.

Désolé du double post, mais dernier problème : Pour les labels, on fait comment quand on veut pas afficher un label (car évident visuellement : la recherche) mais que ça reste quand même accessible ? le coup du div invisible ne semble plus marcher.

Eviter le JS, c'est bien. Sauf que dans ce cas la, tu changes le texte en image, au moins, c'est correct, et cela ne perturbe pas trop le référencement.

Non, utiliser title n'est pas totalement fiable, il peut parfois poser des problèmes car il n'est pas systématiquement rendu comme on le voudrait. Le lien proposé par Felipe expose la meilleure solution si tu tiens aux icônes textuelles.

Pour ta deuxième question sur les labels, tu peux envoyer le texte du label hors de la zone d'affichage avec du text-indent ou du clip ou ce que tu veux (sauf display:none ou visibility:hidden ou width/height:0).

Certains sites mettent aussi une image à la place du texte et ça va très bien, p.ex. <label...><img alt="recherche" ... /></label>

Si tu veux aussi utiliser des icônes textuelles comme labels, par contre, je pense que la solution bullet-proof ne fonctionnera pas (ça reste à vérifier, mais j'ai des gros doutes, notamment avec jaws qui a parfois tendance à outrepasser le DOM pour obtenir ses informations). Dans ce cas je ne vois qu'une possibilité, plutôt sale j'en conviens: mettre l'icône textuelle en-dehors du label et programmer toi-même la prise de focus au clic (qui est implicite avec un label). Naturellement si tu sors l'icône du label, tu n'oublieras pas de mettre quand même un label, éventuellement en-dehors de la zone d'affichage.

Le meilleur conseil que je te donnerais bien, c'est tout simplement de ne pas utiliser ces icônes textuelles peu importe la situation tant que les lecteurs d'écran ne sont pas capables de les lire. J'espère qu'un jour ils le pourront, car oui, ça serait plus simple pour tout le monde.

Pour peu qu'on connaisse ces symboles, on peut les ajouter dans les dictionnaires de prononciation, mais ça relève de la personnalisation moyennement avancée, que les novices ignorent totalement. Par ailleurs j'ai déjà essayé de recenser ces symboles pour les ajouter moi-même à mon dictionnaire, mais en vain, tous les sites qui les listent n'en donnent qu'un aperçu graphique sans description textuelle qui soit suffisament claire; et j'ai jamais vu de site listant des caractères-icônes, la plupart se limitent aux symboles mathématiques (c'est très bien, mais pas suffisant) et parfois aux flèches; jamais au grand jamais d'icônes textuelles genre téléphone, triangle de panne, mini logo de réseau social, etc. IL faut croire que tout le monde crée ses propres polices et qu'ils les placent tous dans des zones unicode non normalisées; ce qui ne permet pas d'avancer pour qu'il y ait un support utile dans les lecteurs d'écran.
Modifié par QuentinC (10 Mar 2014 - 22:55)

doc mcfly a écrit :
Bonjour,
j'ai vu que clip: rect(0 0 0 0); pouvait remplacer text-indent:-xxpx. Est-ce approuvé ou pas ?

Je n'utilise pas mais Yahoo! n'utilise que ça, je pense donc que tu peux utiliser tranquillement

doc mcfly a écrit :
Sinon, que pensez vous de http://kudakurage.com/ligature_symbols/ ?

C'est beau mais … c'est quoi déjà la compatibilité IE ? IE9+, IE10+, pas IE ?

totopsy a écrit :
Je pense qu'utiliser la balise title peux également t'aider sur ton a.

<a href="rss.php" title="flux RSS"><span class="icon-rss"></span></a>

Ça reste un lien vide, il n'y a que si par chance l'Assistance Technique (lecteur d'écran ou autre) lit les title sur les liens que ça fonctionnera ; dans tous les autres cas rien donc je déconseille fortement. La moins pire des solutions reste de cacher un texte (cacher = hors viewport ou clip() mais pas display: none ou visibility: hidden qui cachent visuellement et aux AT, ce qu'on ne veut justement pas)
Modifié par Felipe (14 Mar 2014 - 10:44)

Felipe a écrit :

[…]

C'est beau mais … c'est quoi déjà la compatibilité IE ? IE9+, IE10+, pas IE ?

IE10+ sauf erreur.
J'adore le concept, ça fait un moment que j'y réfléchit, mais, en dehors de la compatibilité, l'autre problème est la langue et la maintenabilité.
Il faut une font par langue, et les modifications ne sont pas aisées. Ce qu'il faudrait c'est un générateur.
Ainsi que des tests d'accessibilité.

Un truc super à base de fichiers de description json, qui compile la font en C avec une api node.js que l'on peut ajouter dans son grunt
Mais je n'ai pas les compétences ni l'intention de les acquérir pour réaliser ça pour le moment…
Modifié par kustolovic (14 Mar 2014 - 14:01)

kustolovic a écrit :

IE10+ sauf erreur.
J'adore le concept, ça fait un moment que j'y réfléchit, mais, en dehors de la compatibilité, l'autre problème est la langue et la maintenabilité.
Il faut une font par langue, et les modifications ne sont pas aisées. Ce qu'il faudrait c'est un générateur.
Ainsi que des tests d'accessibilité.

Un truc super à base de fichiers de description json, qui compile la font en C avec une api node.js que l'on peut ajouter dans son grunt
Mais je n'ai pas les compétences ni l'intention de les acquérir pour réaliser ça pour le moment…

IE10 ? OK merci.
Très bonne remarque pour la langue, c'est sûr que "twitter" pose pas de problème mais en dehors de ça...

Pour la génération de la fonte, après avoir planté Fontsquirrel sur la "zero width font" et joué (sans succès) avec 3-4 softs, générer des fontes plus complexes qu'une font icon c'est un vrai métier avec des considérations dont j'ai jamais entendu parler et il n'y a que Fontforge (horreur ergonomique) qui soit un minimum utile ou sinon (et là j'ai fui) le Adobe SDK. Un peu comme Acrobat, y a d'autres outils mais le seul qui fasse tout et le reste est chez Adobe et si on pouvait s'en passer... mais on peut pas, pour les applications les plus pointues et incongrues en tout cas.