Pour compléter je pense qu'une solution accessible réside dans les "ligatures" qui permettent de composer des icônes à partir de mots. Le support navigateur est il me semble encore assez limité (aucun IE) mais au moins on a une alternative texte accessible à tous quand ça ne fonctionne pas.
--- Célio Conort [email protected] 2015-03-02 16:42 GMT+01:00 Célio Conort <[email protected]>: > Bonjour, > > Je pense que cette technique peut aussi poser problème dans le cas d'une > feuille de style utilisateur qui forcerait une typo. > Dans ce cas on aurait donc des caractères aléatoires (ou rien) à la place > des icônes. > > > --- > Célio Conort > [email protected] > > 2015-03-02 16:13 GMT+01:00 Frédéric BERNIER-MALCOIFFE < > [email protected]>: > >> Bonjour, >> >> >> >> Le critère 10.2 de RGAA3 supprime la condition "images désactivées", par >> rapport à AW-HTML5. Une note de glossaire sur les contenus visibles >> rappelle néanmoins que « la pratique qui consiste à gérer des images en >> propriété de fond d'éléments via CSS » peut être problématique. >> >> >> >> *De :* liste_gta [mailto:[email protected]] *De la >> part de* Cyril Lamotte >> *Envoyé :* lundi 2 mars 2015 15:52 >> *À :* [email protected] >> *Objet :* Re: [Liste GTA] web font icon et accessibilité et title >> >> >> >> 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. >> >> [image: 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, >> >> -- >> >> [image: V-Technologies, solutions Web et mobiles] >> >> >> *Simon Bonaventure**Développeur de guichet/arrière-guichet* >> *[email protected] <[email protected]>* >> *+33 2 41 72 10 75 <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 >> <33%202%2041%2072%2010%2075> >> *Paris* | 14, rue Lincoln 75008 Paris | +33 1 72 87 48 40 >> <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 >> >> >
_______________________________________________ liste_gta mailing list [email protected] http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
