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 Le 10 août 2014 00:15, Romain Gervois <[email protected]<mailto:[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]<mailto:[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]<mailto:[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]<mailto:[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]<mailto:[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]<mailto:[email protected]> http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org _______________________________________________ liste_gta mailing list [email protected]<mailto:[email protected]> http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org _______________________________________________ liste_gta mailing list [email protected]<mailto:[email protected]> http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org _______________________________________________ liste_gta mailing list [email protected]<mailto:[email protected]> http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org _______________________________________________ liste_gta mailing list [email protected]<mailto:[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
