Galeries photos : Accessibilité/SEO

Bonjour,

J’ai une galerie photo en ligne dont la navigation est un peu particulière : pas de bouton ‘suivant’, pour passer à la photo suivante on clique sur la photo en cours. C’est simple et sobre.

J’aimerai trouver une solution à la fois accessible et SEO.
Pour le coté SEO je souhaite utiliser uniquement l’attribut alt car title n’ai pas utilisé par les moteurs.

La solution ‘simple’ mais qui ne me convient pas d’un point de vue SEO est celle-ci :

<h1>titre de la photo<h1>
<a href="url-photo-suivant"><img src="photo-en-cours" alt="titre de la photo suivante" /></a>

- Pas besoin de alt pour la photo en cours : le titre au dessus et là pour cela
- Le alt précise l’action associée à l’image (titre de la photo suivante)

J’ai peur que les moteurs interprète mal le contenu de la page : qu’ils associent le titre de la photo suivante à la photo en cours, qu’ils n’associent pas le h1 à l’image en cours à cause du lien … bref d’un point de vue SEO ça me paraît risqué.

Autre solution :

<h1>titre de la photo<h1>
<a href="url-photo-suivant" title="titre de la photo suivante"><img src="photo-en-cours" alt="" /></a>

Guerre mieux d’un point de vue SEO il me semble.

La solution que j’ai bidouillé :

<h1>titre de la photo<h1>
<div style="position:relative">
<img src="photo-en-cours" alt="" /><br />
<a href="url-photo-suivant" style ="display:block;position:absolute;top:0;left:0;width:xx;height:xx;background-image:url('/images/vide.gif');text-indent:-9999px">titre de la photo suivante</a>
</div>

En gros : un lien transparent qui se place par dessus l’image (même dimension que l’image)

C’est ce qui me paraît le mieux. Qu’en pensez-vous ?
Si vous avez une solution autre à la fois bonne d’un point de vue accessibilité et SEO … je prend ! Merci.

Bonjour,
avant de raisonner en terme de SEO commençons par choisir le bon balisage :

Si c'est un gallerie d'image, en principe tu devrais implémenter ça dans une liste non-ordonnée (voire ordonnée si l'ordre a un sens).
Je pense qu'il est préférable de désolidariser le lien de l'image pour éviter des confusion entre la cible et l'image courante.

Donc à priori on devrait avoir un truc dans le genre :

<ul id="galerie">
<li>
<b>titre de la photo</b><br />
<img src="..." alt="" height="..." width="..." /><br />
<a href=""><span>Photo suivante : titre de la photo suivante</span></a>
</li>
...
</ul>

avec légende apparente et span apparent au survol.

#galerie li {position:relative;}
#galerie a {position absolute; width: 100%; top:0; bottom:0}
#galerie a span {position absolute; left: -10000px;}
#galerie a:hover span, #galerie a:focus span, #galerie a:active span {left:.... /*dépend de l'emplacement du span*/}

avec le lien qui englobe toute la surface...

Le titre n'est pas vraiment pertinent ici, car il ne fait qu'introduire l'image et le lien vers la photo suivante, la <b> permet d'ajouter du poids au titre.
Ceci dit sans le contexte globale il m'est difficile de te donner un réponse forcément pertinente.
Modifié par Hermann (30 May 2010 - 13:19)

Merci.
Solution intéressante.

Finalement je vais opter pour la simplicité.

<a href="url-photo-suivant"><img src="photo-en-cours" alt="" /></a>
(pas de alt)

Car de toutes façons sous la photo il y a des raccourcis (miniature + lien) vers des photos suivantes et précédentes et eux ont des alt bien renseignés.
Modifié par idec (31 May 2010 - 10:30)