Bonjour,
Effectivement, si la font n'est pas chargée, cela peut poser soucis, cf.
cette discussion intéressante sur twitter :
https://twitter.com/GaetanBt/status/515510170634706945
Dans la page : http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
Ils donnent l'exemple de librairie qui testent le bon chargement d'une
font-face et du coup visiblement ajoutent une class sur le <html> et
masquer le texte associé uniquement à ce moment.
Et du coup le selecteur CSS pourrait devenir :
||.fontface-loaded| .hors-ecran {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}|||
-> https://github.com/filamentgroup/a-font-garde
Le 02/03/2015 15:52, Cyril Lamotte a écrit :
Bonjour,
Je suis peut-être hors sujet, mais je ne suis pas sur que cette
méthode soit accessible.
En cas de désactivation (ou non-téléchargement) des images/police (par
exemple sur un mobile avec mauvaise connexion), on perd l'information.
Mais je ne suis peut-être pas à jour avec AW-HTML5
<a href="/" title="Accueil">
<span class="home"aria-hidden="true"></span>
<span class="hors-ecran">Accueil</span>
</a>
Si d'autres personnes ont des billes sur ce sujet je suis preneur.
++
*Cyril Lamotte*
Jouve I.T. Solutions - Développeur Front-end / Expert accessibilité
02 43 08 39 97
Adoptez l'éco-attitude. N'imprimez ce courriel que si c'est vraiment
nécessaire.
Le présent mail ainsi que toutes les informations qu'il contient ne
peuvent en aucun cas être considérés comme un engagement juridique de
quelque nature que ce soit de JOUVE. Tout accord devra être formulé
par écrit papier ultérieur signé par un représentant légal de JOUVE.
Par ailleurs, si vous recevez ce mail par erreur, merci de nous le
signaler et de le détruire ainsi que l'intégralité du document qui
pourrait y être joint.
Jouve Its <http://www.jouve.com/fr/signature>
Le 02/03/2015 14:42, Simon Bonaventure a écrit :
Bonjour à tous,
Je me pose certaines questions pour l'utilisation des web-font icon,
si leur utilisation est de plus en plus rependu, quid de
l'accessibilité ?
1. Est ce que c'est de la sur-qualité/accessibilié d'exiger (ou
d'autoriser) un title="Accueil" ou alors si on a un title="Accueil",
est ce que celui-ci ? Car je me rappel qu'en formation avec
Jean-Pierre, il avait été évoqué qu'il était autorisé pour les liens
sur des icons d'avoir un title=alt. Et dans le cas que j'expose
ci-dessous, j'ai l'impression que ce cas s'en rapproche, car si
l'icone n'est pas intelligible pour tout le monde (et que le texte
est masqué), le title pourrait servir à mieux comprendre la
destination du lien.
2. Ou autoriser ce title ? Soit sur le lien, ou alors sur le span qui
va servir a afficher l'icone ?
<a href="/" title="Accueil">
<span class="home"aria-hidden="true"></span>
<span class="hors-ecran">Accueil</span>
</a>
@font-face {font-family: 'FontAwesome';}
a span.home {
content: "\f015";
color: #02799f;
speak: none;
}
a:hover span, a:focus span {
color: #587d2b;
}
.hors-ecran {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}
Quelques ressources que j'ai trouvé sur le net :
* http://johanramon.fr/techniques-integration-icones-liens/
* http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/
* http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html
Merci pour vos réponses.
cdt,
--
V-Technologies, solutions Web et mobiles
Simon Bonaventure
Développeur de guichet/arrière-guichet
[email protected]
+33 2 41 72 10 75 <tel:33%202%2041%2072%2010%2075>
------------------------------------------------------------------------
Groupe V-Technologies | www.vtech.fr <http://www.vtech.fr/> |
@VtechFr <https://twitter.com/vtechfr>
*Angers* | 3, rue Louis Boisramé 49000 Angers | +33 2 41 72 10 75
<tel:33%202%2041%2072%2010%2075>
*Paris* | 14, rue Lincoln 75008 Paris | +33 1 72 87 48 40
<tel:33%201%2072%2087%2048%2040>
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
--
V-Technologies, solutions Web et mobiles
Simon Bonaventure
Développeur de guichet/arrière-guichet
[email protected]
+33 2 41 72 10 75 <tel:33%202%2041%2072%2010%2075>
------------------------------------------------------------------------
Groupe V-Technologies | www.vtech.fr <http://www.vtech.fr/> | @VtechFr
<https://twitter.com/vtechfr>
*Angers* | 3, rue Louis Boisramé 49000 Angers | +33 2 41 72 10 75
<tel:33%202%2041%2072%2010%2075>
*Paris* | 14, rue Lincoln 75008 Paris | +33 1 72 87 48 40
<tel:33%201%2072%2087%2048%2040>
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
