Bonjour Olivier, Tu écris : Maintenant ce n'est pas toujours possible. Si par exemple le lien est également un titre, la balise <a> sera dans la balise <hn>, et on ne peut pas ou souhaite pas forcément avoir l'image dans le titre également.
Cela ne change pas grand chose en fait. Sur le "on ne peut pas", c'est plus par contrainte de temps ou de connaissance de l'outil de génération du contenu que contrainte technique. La vraie seule contrainte technique que je vois est l'utilisation d'images de dimension différentes, en général en contexte "client contributeur" (même si ça peut se gérer et là l'effort à fournir devient juste lourd vu la finalité). Pour le souhait, je ne sais pas ; c'est le statut particulier des images cliquables qui fait qu'on ne sait pas trop les gérer et où les mettre (c'est loin d'être innocent de faire 2 liens). Pour la réflexion de Tanguy, je pense qu'il s'agit juste de souligner qu'il n'y a pas de perte d'infos juste des "nuisances" comme ce que l'on peut avoir avec des titres de lien identiques aux intitulés. Il me semble bien que Jaws remonte un lien vide, c'est naze mais en soit avec le lien qui suit il n'y a pas de perte. Romain Le 11 août 2014 13:56, Olivier Nourry <[email protected]> a écrit : > Hello Tanguy, > Si je comprends bien l'explication donnée pour la technique H2 (exemple 4, > échec car alt vide sur une image lien, malgré la présence du lien texte > adjacent): il peut y avoir des situations où le lien sera quand même > signalé à l'utilisateur, sans qu'il puisse déterminer sa destination. > J'imagine que tous les lecteurs d'écran (ou autres technos d'assistance?) > ne se comportent pas comme Jaws en ignorant totalement le lien image. > > Cordialement, > > [image: --] > Olivier Nourry > [image: http://]about.me/oliviernourry > <http://about.me/oliviernourry> > > > > Le 11 août 2014 12:55, <[email protected]> a écrit : > > Bonjour, >> >> Selon moi, même si le référentiel AW oblige à avoir un alt non vide sur >> toutes les images-liens, le cas que tu présentes ne le justifie pas. En >> effet, si j’ai bien compris, tu as une image-lien, puis un lien séparé >> (donc une deuxième balise a), et tous deux pointent vers la même ressource. >> Si l’intitulé du lien texte est explicite, il n’y a donc pas de perte >> d’information ni de fonctionnalité à mettre un alt vide sur l’image-lien. >> Je ne vois donc pas quel utilisateur est pénalisé. >> >> Or c’est bien dans ce sens que je conçois l’accessibilité. >> >> En cherchant un peu, on peut dire que celui qui ne charge pas les images >> et voit une croix rouge cliquable sans texte d’aide peut se trouver >> désorienté. Mais il n’est pas lésé puisque le lien texte vient à son >> secours. >> >> >> >> Cordialement / Best regards >> >> Tanguy Lohéac >> >> Expert for the Accessibility of Information >> >> Collaboration Services >> >> 1 rue Victor Basch >> >> 91349 Massy CEDEX >> >> Tél +33 1 41 24 56 73 / poste Line 2 56 73 >> >> Intranet accessibilité >> <http://accessibilite.sanofi-aventis.com/Pages/01_Actualites/Accueil_fr_FR.aspx> >> / Accessibility intranet >> <http://accessibilite.sanofi-aventis.com/Pages/01_Actualites/Accueil_en_US.aspx> >> >> >> >> *De :* liste_gta [mailto:[email protected]] *De la >> part de* Olivier Nourry >> *Envoyé :* lundi 11 août 2014 12:42 >> *À :* [email protected] >> *Objet :* Re: [Liste GTA] liens images avec alt vide, redondants avec >> des liens textes adjacents >> >> >> >> Hello, >> le lien composite reste le must, clairement. Maintenant ce n'est pas >> toujours possible. Si par exemple le lien est également un titre, la balise >> <a> sera dans la balise <hn>, et on ne peut pas ou souhaite pas forcément >> avoir l'image dans le titre également. >> >> Dans cet article http://john.foliot.ca/aria-hidden/ , un peu daté mais >> bien documenté, John Foliot traite ce cas, le teste sur différentes config, >> et propose le code suivant: >> >> >> >> >> >> <a href="tbl.html" aria-hidden="true" role="presentation" tabindex="-1"> >> >> <img src="tim_th.jpg" class="thumb" >> >> alt="Tim Berners-Lee Takes the Stand to Keep the Web Free" >> >> role="presentation"></a> >> >> <h3> >> >> <a href="tbl.html">Tim Berners-Lee Takes the Stand to Keep the Web Free</a> >> >> </h3> >> >> Donc par rapport à la technique décrite par Johan, on a en plus un >> role="presentation" sur le <a> de l'image, et sur l'image. Cette >> implémentation est celle qui se rapproche le plus du résultat voulu par >> l'auteur, à savoir pas de lien en doublon en lecture d'écran, et pas de tab >> sur l'image au clavier. >> >> Ceci étant dit, mon validateur (analyseur SGML W3C via l'extension HTML >> Validator inclus à Firefox) tique sur le fait d'avoir role="presentation" >> sur un élément A. Malheureusement je n'ai pas trouvé de ressource sur ce >> point précis. Si vous avez... >> >> >> Cordialement, >> >> >> >> *Erreur ! Nom du fichier non spécifié.* >> >> *Olivier Nourry* >> >> *Erreur ! Nom du fichier non spécifié.*about.me/oliviernourry >> >> [image: Image supprimée par l'expéditeur.] >> >> >> >> >> >> >> >> Le 10 août 2014 00:15, Romain Gervois <[email protected]> a écrit >> : >> >> Bonjour, >> >> Si on peut se permettre de mettre des tabindex -1 et du aria-hidden true, >> on est déjà dans un contexte favorable et on peut alors faire bien mieux >> (et viser des liens composites comme préconisé). Attention à l'usage de >> aria-hidden pour masquer aux TAs des contenus visibles, Une note dans la >> spéc. explique très bien comment cela peut poser d'autres problèmes >> (contexte de pilotage à la voix, difficultés dans certaines procédures >> d'assistance...). Bon, le problème est peut être réduit avec des liens du >> type "Lire la suite" mais la diversité des cas fait qu'on ne peut >> l'affirmer. >> >> Concernant la solution du onclick sur le conteneur, on ne parle plus de >> la même implémentation (le cas d'Olivier se limitant à une image et un >> intitulé) puisqu'il s'agit d'une implémentation type lien block. La >> solution Javascript a quelque effet de bord pas top côté restitution ; >> j'avais fait il y a quelques temps une page de tests au sujet de 3 >> implémentations différentes de lien block : >> http://www.romaingervois.fr/implementations/lien-block.html >> >> Bonne journée. >> >> Romain >> >> >> >> Le 9 août 2014 23:26, Goulven CHAMPENOIS <[email protected]> a écrit : >> >> >> >> Johan Ramon a présenté à Paris-Web 2013 >> <http://www.paris-web.fr/2013/conferences/accessibiliser-avec-subtilite.php> >> une technique intéressante pour ce type de problème justement : sur les >> liens en doublon, on ajoute *tabindex="-1"* pour les empêcher de prendre >> le focus, et *aria-hidden="true"* pour les cacher complètement aux >> lecteurs d'écran. >> >> Comme Johan le dit lui-même, ça peut apporter des problèmes de >> compatibilité et quand le code passe de mains en mains. >> >> >> C'est à partir de la diapo 13 de son support : >> http://www.johanramon.fr/accessibiliser-subtilite/ >> >> Ou de 11 minutes 30 à 15 minutes 45 dans la vidéo : >> http://vimeo.com/83912475 >> >> Jacques Pyrat présente une autre solution (à 21 minutes dans la vidéo) : >> mettre un *onclick* sur le conteneur, et pas de lien autour de l'image. >> On évite ainsi de mettre des outils dangereux dans les mains d'utilisateurs >> non formés. >> >> >> >> Bonne soirée, >> >> >> -- >> Goulven >> >> >> >> 2014-08-08 18:03 GMT+02:00 Olivier Nourry <[email protected]>: >> >> >> >> ...et donc l'exemple 4 explique pourquoi ce que j'ai sous les yeux pose >> problème. >> Merci Romain! >> >> >> Cordialement, >> >> >> >> *Erreur ! Nom du fichier non spécifié.* >> >> *Olivier Nourry* >> >> *Erreur ! Nom du fichier non spécifié.*about.me/oliviernourry >> >> *Erreur ! Nom du fichier non spécifié.* >> >> >> >> >> >> >> >> Le 8 août 2014 17:53, Romain Gervois <[email protected]> a écrit : >> >> >> >> Bonjour Olivier, >> >> La technique WCAG H2 "Combining adjacent image and text links for the >> same resource" (http://www.w3.org/TR/WCAG20-TECHS/H2.html) correspond à >> ce que tu préconises. >> >> Elle n'est effectivement pas prévu dans le référentiel car "elle fait >> partie de cette grande famille de technique WCAG qui adressent des Critère >> de succès permettant de passer mais pas d'invalider ce même critère de >> succès" dixit Jean-Pierre dans une discussion de février sur cette >> technique. >> >> Concernant l'implémentation, ça peut être délicat mais tu as aussi la >> solution du position de l'image via CSS et si il y a une bonne source HTML >> ça doit pouvoir se faire sans trop de bobo. >> >> Romain >> >> >> >> Le 8 août 2014 17:25, Olivier Nourry <[email protected]> a écrit : >> >> Hello, >> >> Je tombe souvent sur des liens images avec alt vide, qui se trouvent être >> en redondance avec des liens textes adjacents qui font strictement la même >> chose. >> >> En appliquant le référentiel stricto sensu, je suis censé invalider ces >> liens images avec le critère 6.6. >> >> En termes de préco, je recommande généralement d'inclure l'image au lien, >> en gardant le alt vide, de manière à former un lien composite conforme et à >> conserver une zone de clic large (image + texte). >> >> Seulement ce n'est pas toujours évident à implémenter. Auquel cas on a >> deux choix pour rester conforme: >> >> 1. renseigner le alt avec le même texte que le lien >> 2. ou supprimer le lien sur l'image >> >> (note: je ne traite pas l'option consistant à passer l'image en >> background, et à agrandir le conteneur du lien, car dans mon cas, l'image >> étant animée au survol, via CSS, ça risque d'être compliqué). >> >> Avec l'option 1, je pollue la liste de liens avec des doublons. Pas glop >> pour la lecture non visuelle. >> >> Avec l'option 2, je réduis la zone de clic, ce qui peut être >> préjudiciable aux utilisateur avec des difficultés de dextérité. >> >> Donc en devenant conforme je crée des problème d'utilisabilité pour >> certains utilisateurs en situation de handicap. En ne faisant rien je n'ai >> pas ces problèmes, mais je ne suis pas conforme. >> >> Comme le cas n'est pas prévu par le référentiel, je me dis que j'ai loupé >> quelque chose. Pouvez-vous m'éclairer svp? >> >> Merci d'avance >> >> >> Cordialement, >> >> >> >> *Erreur ! Nom du fichier non spécifié.* >> >> *Olivier Nourry* >> >> *Erreur ! Nom du fichier non spécifié.*about.me/oliviernourry >> >> *Erreur ! Nom du fichier non spécifié.* >> >> >> >> >> >> >> >> _______________________________________________ >> 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 >> >> >> >> >> _______________________________________________ >> 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
