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,
[image: --]
Olivier Nourry
[image: http://]about.me/oliviernourry
<http://about.me/oliviernourry>
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,
>>>
>>> [image: --]
>>> Olivier Nourry
>>> [image: http://]about.me/oliviernourry
>>> <http://about.me/oliviernourry>
>>>
>>>
>>>
>>> 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,
>>>>>
>>>>> [image: --]
>>>>> Olivier Nourry
>>>>> [image: http://]about.me/oliviernourry
>>>>> <http://about.me/oliviernourry>
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> 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
