Aller au contenu

lynx et mon site

Mado

Par Mado
dans Accessibilité et Ergonomie Web

 Partager

Sujets conseillés

Monique

Monique

Posté
Posté

Bonjour Marie,

Rien d'étonnant, tes liens sont faits sur du vide... pas de texte ni d'image, uniquement des images de fond dans ta feuille de style ;)

Mado

Mado

Posté
  • Auteur
Posté

ha merci Monique :wacko:

alors c'est peut etre mieux que je fasse pas de rollover ou alors y'a peut etre un autre moyen de faire modifier l'image au passage de la souris?

:unsure:

ElMoustiko

ElMoustiko

Posté
Posté

Une petite technique assez simple :

(ps en passant : l'effet roll over donne du dynamisme au site, et c'est vraiment mieux je trouve, même si l'effet negatif photo sur qui suis je est moyen je trouve)

code xhtml :

<ul>
<li><a href="lien1"><span>Titre du lien1</span></a></li>
<li><a href="lien2"><span>Titre du lien2</span></a></li>
<li><a href="lien3"><span>Titre du lien3</span></a></li>
<li><a href="lien4"><span>Titre du lien4</span></a></li>
<li><a href="lien5"><span>Titre du lien5</span></a></li>
<li><a href="lien6"><span>Titre du lien6</span></a></li>
<li><a href="lien7"><span>Titre du lien7</span></a></li>
<li><a href="lien8"><span>Titre du lien8</span></a></li>
<li><a href="lien9"><span>Titre du lien9</span></a></li>
</ul>

code css :

ul {
width: XXpx;
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
}
ul li a {
display: block;
width: (XX/3)px;
height: YYpx;
background: url(image_du_lien) no-repeat 0 0;
}
ul li a span {
display: none;
}
ul li a:hover {
backgrounf: url(image_du_lien) no-repeat 0 -YYpx;
}

Et pour l'image utilisée, tu prend une image par carré, et l'image contient l'etat survolé et l'etat normal l'un en dessous de l'autre pour diminuer les temps de chargement. Pour plus de détails, je te laisse consulter ces quelques tutoriels :

http://www.elmoustikoblog.net/tutoriels.php?tut=roll_over

http://www.alsacreations.com/articles/rollover_unique/

Voila @++

ps : j'ai pas testé le code xhtml/css, c'est ecrit à chaud et à cette heure ci, victime d'insomnie (fatigué donc ! ) je ne garanti rien ! Mais a priori ca doit etre bon

Mado

Mado

Posté
  • Auteur
Posté

merci elmoustiko et je fais un ul pour chaque petit carré sinon j'aurai tooujours la meme image en survol nan?

ai je bien compris?

merci :unsure:

LaurentDenis

LaurentDenis

Posté
Posté

ElMoustiko, ton menu accessible... est inaccessible en fait ;)

Tu utilises la technique FIR:

ul li a span {
display: none;
}

<li><a href="lien1"><span>Titre du lien1</span></a></li>

L'idée étant qu'un lecteur d'écran ignorera la feuille de style et/ou ignorera le display:none et restitura le contenu du span... Mais ce n'est hélas pas le cas : Jaws, Window Eyes et IBM HPR appliquent le display:none (ou aussi bien un visibilty: hidden), et ton menu devient alors une succession de liens sans texte ni contenu, comme si tu avais écrit:

<li><a href="lien1"><span></span></a></li>

Mieux vaut utiliser la méthode de Paul Bohman pour laquelle aucun problème n'a jusqu'ici été signalé dans les lecteurs d'écran :

ul li a span {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

Et mieux vaudrait encore tout simplement inclure l'image directement dans le lien, et la seconde (celle du survol) via CSS.

LaurentDenis

LaurentDenis

Posté
Posté

Tiens, au passage, il faudrait vérifier ce que donne dans les navigateurs et les lecteurs d'écran :

ul li a span {

span {
position: absolute;
clip: rect(1px 1px 1xp 1xp);
clip: rect(1px, 1px, 1px, 1px);
}

<li><a href="lien1"><span>Titre du lien1</span></a></li>

Cette syntaxe de clip ramènant à zéro la zone de visibilité du span... ce pourrait être une alternative au FIR et à la méthode de Bohman.

Monique

Monique

Posté
Posté

Bonjour Laurent,

Je viens de faire un essai avec Jaws, le lien est lu mais pas la liste (normal, il n'y a pas ul dans ton code)

Il dit : link Titre du lien1

LaurentDenis

LaurentDenis

Posté
Posté

La version de Jaws que tu utilises n'appliquerait donc pas la propriété "clip". Mais reste à voir comment le style est invoqué (link, _AT_import, règle média ?), car ce n'est pas neutre, si mes souvenirs sont exacts.

Intéressant, ça. Il va falloir creuser ;)

D'autant que cette solution permettrait en fait d'éliminer le <span> commun à ces méthodes de masquage de contenu. Par exemple, pour un titre dont le contenu texte est remplacé par un logo, on utiliserait quelque-chose comme :

h1 {
background-image:url(titre.jpg);
background-repeat:no-repeat;
background-position: top left;
padding-left: 200px;
position: absolute;
clip: rect(auto 200px auto auto);
}

<h1>Texte du titre</h1>

(Pour une image de 200 px de large)

Avec évidemment la contrainte de cette position absolue...

Mado

Mado

Posté
  • Auteur
Posté (modifié)

bijour

comme j'ai trois serie de 3 bouton je mets 9 ul un pour chacune des images background?

je vais essayer la methode de laurent en mettant l'image sur le lien et l'image hover dans la css

merci

marie

un lien que je viens de trouver

http://www.projectseven.com/tutorials/css/uberlinks/

Modifié par mariepetroni
ElMoustiko

ElMoustiko

Posté
Posté

Wé exact laurent, bien vu, tu me reprend une fois de plus à juste titre...

Moi qui pensait bien faire...

Non non pas 9 ul ! l'ul englobe toutes les petites icones, 1 ul contenant 9 li.

@++

Monique

Monique

Posté
Posté
La version de Jaws que tu utilises n'appliquerait donc pas la propriété "clip". Mais reste à voir comment le style est invoqué (link, @import, règle média ?), car ce n'est pas neutre, si mes souvenirs sont exacts.

Ma version de Jaws : 5.00.621

J'ai essayé avec link et avec @import

Jaws ne prend pas cette règle de style en compte et dit : heading level 1 texte du titre

Si j'ajoute un media dans l'élément link, le style n'est pris en compte ni par IE ni par Firefox.

Si j'ajoute un media à @import, le style est pris en compte par les navigateurs graphiques.

Mais la règle de style n'est prise en compte dans aucun cas par Jaws.

LaurentDenis

LaurentDenis

Posté
Posté (modifié)
Mais la règle de style n'est prise en compte dans aucun cas par Jaws.

:)

Ce qui est intéressant, c'est que, d'après ces essais rapides, cette technique de masquage du texte dans le titre est extrêmement facile à utiliser...

Modifié par LaurentDenis
Monique

Monique

Posté
Posté
d'après ces essais rapides, cette technique de masquage du texte dans le titre est extrêmement facile à utiliser...

... et cela semble bien fonctionner

J'ai testé ton essai pour OpenWeb avec Jaws :up:

Mado

Mado

Posté
  • Auteur
Posté

j'ai tente de vous suivre mais je ne comprends pas grand chose...

je fais comme ca alors?

ul {

width: XXpx;

margin: 0;

padding: 0;

list-style-type: none;

}

ul li {

float: left;

}

ul li a {

display: block;

width: (XX/3)px;

height: YYpx;

background: url(image_du_lien) no-repeat 0 0;

}

ul li a span {

position:absolute;

left:0px;

top:-500px;

width:1px;

height:1px;

overflow:hidden;

}

li_folio a hover {background-image : url(image1)}

li_cv a hover{ background-image url(image2)}

etc?

je crois que j'ai rien compris

desolée

:wacko:

Mado

Mado

Posté
  • Auteur
Posté (modifié)

j'ai trouvé une façon de faire mais je ne sais pas si elle est bonne

j'ai mis du texte dans une balise <p class="hidden"></p>

p { visibility : hidden;}

ce qui fait qu'on ne le voit pas mais qu'apparement ca marche avec lynx

My Webpage

merci

Modifié par mariepetroni
petit-ourson

petit-ourson

Posté
Posté (modifié)
j'ai trouvé une façon de faire mais je ne sais pas si elle est bonne

j'ai mis du texte dans une balise <p class="hidden"></p>

p { visibility : hidden;}

ce qui fait qu'on ne le voit pas mais qu'apparement ca marche avec lynx

My Webpage

merci

Sous lynx oui, cela marche.

Mais comme disais LaurentDenis :

L'idée étant qu'un lecteur d'écran ignorera la feuille de style et/ou ignorera le display:none et restitura le contenu du span... Mais ce n'est hélas pas le cas : Jaws, Window Eyes et IBM HPR appliquent le display:none (ou aussi bien un visibilty: hidden), et ton menu devient alors une succession de liens sans texte ni contenu, comme si tu avais écrit:
Modifié par petit-ourson
Mado

Mado

Posté
  • Auteur
Posté

alors svp expliquer moi ce que je dois faire parce que je n'ai pas compris

ce que elmoustiko m'a donné comme soluce n'est pas good apparement et je n'ai pas compris le reste

qu'est ce qui fonctionne pour tous alors svp

merci

LaurentDenis

LaurentDenis

Posté
Posté

Marie, dans http://www.zengrafom.org/cv/blocks_zen.css , remplace 

 { visibility : hidden;}

par :

p.hidden {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

Ton code est un peu touffu, et il est difficile de te donner une solution complète. Mais ceci devrait déjà remédier déjà au problème des lecteurs d'écran pour lesquels tes liens risquent de ne pas avoir de contenu

Mado

Mado

Posté
  • Auteur
Posté

Merci Laurent

heu tu dis que mon code est un peu touffu tu veux dire quoi stp? y'a moyen de simplifier?

merci en tous les cas

marie

Mado

Mado

Posté
  • Auteur
Posté

c'est bon j'ai compris, enfin a mon niveau bien sur ;) et je suis entrain de modifier ma css pour la simplifier un peu

merci

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...