Bonjour, Le title sur lien image est une tolérance du référentiel (dans l'idéal on devrait déporter vers l'image). Dans ce cas précis : title sur le span doté d'aria-hidden true. Enfin pour le texte, privilégier l'usage de la police Adobe Blank plutôt qu'un masquage via CSS.
Romain Le 2 mars 2015 16:46, Célio Conort <[email protected]> a écrit : > 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 > >
_______________________________________________ liste_gta mailing list [email protected] http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
