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
