1159 sujets

Accessibilité du Web

Pages :
(reprise du message précédent)

Salut,

Oui donc, tu à implémenté deux id "identiques" pour l'ancre et l'input du formulaire, changes celui de l'ancre et tout rentrera dans l'ordre Smiley smile

Par ailleurs tu n'à pas de bouton "envoyer" dans ton formulaire, bien que entrée lance automatiquement le formulaire, c'est quand-même fortement conseillé de mettre un bouton "envoyer"...
Ca te permettra de garantir l'envoi du formulaire "dans tout les cas".

JP

ps: Joli site Smiley cligne
Modifié par jpv (22 Jul 2005 - 13:51)
Merci pour ton aide jpv !

jpv a écrit :
Oui donc, tu à implémenté deux id "identiques" pour l'ancre et l'input du formulaire, changes celui de l'ancre et tout rentrera dans l'ordre Smiley smile


Ben oui... mais non ! j'ai changé le nom de l'ancre et bien entendu les liens qui conduisent à la recherche, mais ça ne change rien.

jpv a écrit :
Par ailleurs tu n'à pas de bouton "envoyer" dans ton formulaire, bien que entrée lance automatiquement le formulaire, c'est quand-même fortement conseillé de mettre un bouton "envoyer"...
Ca te permettra de garantir l'envoi du formulaire "dans tout les cas".


Oui ! je sais, j'ai hésité, y son moches les boutons... Bon je vais voir comment je peux intégrer ça proprement Smiley cligne

jpv a écrit :
ps: Joli site Smiley cligne

Chutttttttttttttt ! Smiley lol merci ! Smiley cligne pour le côté zoli, je n'y suis pas pour grand chose, on m'a beaucoup aidé... mais ce sera dévoilé bientôt Smiley langue
Oui vu,

Ya une autre chose qui m'éttonnes c'est que le focus ne soit pas donné correctement, indépendamment de ce problème...

Je vais regarder ça je te tiens au courant, là j'ai pas trop le temps, je suis un peut le nez dans le guidon

;)

JP
Modifié par jpv (22 Jul 2005 - 14:34)
Merci ! super sympa, ben ! prend ton temps, ça peut attendre et puis le site n'est pas en ligne Smiley cligne
Modifié par dominique (22 Jul 2005 - 14:41)
<form action="search.php" method="get">
 	<fieldset>	
           <a name="rech" onfocus="document.getElementById('q').focus()"></a>
	     <label for="q">Recherche :</label>
	      <input class="recherche" accesskey="4" type="text" size="15" name="q" value="" id="q" />
              <input class="submit" type="submit" value="ok" name="s" id="search-s" />
         </fieldset>
 


Moi j'ai cela comme code et IE prends le focus sur l'input seulement après une tabulation.

sans le onfocus j'ai une utilisation normale pour les 2 (ff et IE) clique tab ou tab entrée tab.

@> dominique

Essaye de placer ton ancre dans ton div formrecherche.
Modifié par knarf (22 Jul 2005 - 19:59)
dominique a écrit :
Bonjour et merci beaucoup pour toutes ces explications jpv Smiley smile

Je viens de faire des essais, avec firefox, aucun soucis, par contre, avec ie6, lorsque je clique sur le lien vers le moteur de recherche + une tab, je me retrouve sur le premier lien de la page ?


C'est un bug d'IE. Voir:
- http://www.jimthatcher.com/skipnav.htm (mais les solutions proposées sont problématiques, selon le test ci-dessous)
- http://test.blog-and-blues.org/ancres/ (tests en cours. La page équivalente pour les formulaires arrive bientôt Smiley cligne )
Modifié par Laurent Denis (22 Jul 2005 - 20:13)
La solution foo 7 est la seule que j'ai trouvé jusqu'à maintenant pour permettre de prendre le focus sur le lien suivant sur IE mais c'est un lien vide à ce moment là plus une ancre c'est pour cela que sur web pour tous le lien avait un nom "bas de page".

Mais maintenant j'ai une réponse à ma question c'est un bug d'IE depuis le temps que je cherche et que je ne comprends pas.

Maintenant un "aller au contenu" comme cela avec IE est utile car prise de focus et pas seulement déplacement visuel.

La question est le lien vide?
Modifié par knarf (22 Jul 2005 - 20:24)
knarf a écrit :

La question est le lien vide?


C'est l'absence d'attribut href qui gêne IE. Le lien n'a pas besoin d'avoir un intitulé, ni une cible réelle.
Bonsoir,

Discussion très intéressante.

Je confirme, pour les formulaires, le procédé deviens fonctionnel (click+tab) et (tab+tab) si l'ancre "lien vide", quelque soit sa forme

<a id="foo" name="foo"></a>
<a name="foo"></a>
<a id="foo"></a>
<a id="foo" name="foo" href="#"></a>

est implémentée dans un élément fieldset.

C'est la raison pour laquelle ça marche tout le temps sur les sites sur lesquels je l'utilise, tous les formulaires on un fieldset... Smiley smile

En revanche le problème du onfocus, qui ne fonctionne qu'avec un lien "href" reste un bug surprenant.

JP
Modifié par jpv (22 Jul 2005 - 22:59)
Bonjour tout le monde,

Je réalise que je n'ai jamais réussi à faire fonctionner correctement ce qui précède.

Voici mon code


	<a href="#recherche" accesskey="4">Aller à la recherche</a>

<form action="machin" method="get">
	<fieldset>
		<a href="#" name="recherche" id="recherche" onfocus="document.getElementById('q').focus()"></a>
		<h2><label for="q">Rechercher</label></h2>
		<p>
		    <input name="q" id="q" type="text" size="7" value="truc" title="Saisir les mots clés pour votre recherche" />
		    <input type="submit" class="submit" value="ok" />
		</p>
   </fieldset>
</form>



fonctionne sous IE, mais pas sous FF, ni sous Opera.

Ce qui est gênant pour ces deux derniers, est que l'action sur tab pointe sur le bouton submit : impossible d'aller sur l'input autrement qu'avec la souris.

Soit j'ai raté un épisode, soit il y un lézard dans mon implémentation du bidule, soit cela ne peut pas marcher ...

@Laurent : elle a disparu dans le déménagement ta page de test !!!

Smiley biggrin
Bonjour Vero,

En fait je ne comprend pas très bien le problème. J'ai vérifié le code utilisé dans dotclear par exemple où le moteur s'atteint par un lien <a href="#search"> et :


<div id="search">
		<form action="/dotclear/index.php" method="get">
		
			<h2><label for="q">Rechercher</label></h2>
			<p class="field"><input name="q" id="q" type="text" size="10"
			value="" accesskey="4" />
			<input type="submit" class="submit" value="ok" /></p>
		
		</form>
	</div>


En quoi ceci ne convient il pas ?

Personnellement j'envisage deux cas :
1. l'input de saisie n'a pas directement le focus, il faut une tab en plus.
2. Cela pose un problème avec les version d'internet explorer antérieures à IE6

S'agit il de çà ou y a t'il autre chose?
Modifié par clb56 (22 Mar 2006 - 10:52)
pour ma part j'utilise

<span class="ancre"><a name="ancremoteur" id="ancremoteur"></a>

avec dans la css

.ancre{
position:absolute;
}

et ça fonctionne sur ie et firefox
Pour être sûre que nous parlons de la même chose, je vous invite à relire le topic à partir de

@cbl56 :

Tu mets l'accesskey dans l'input ???
Modifié par Vero (22 Mar 2006 - 11:59)
Vero a écrit :
Pour être sûre que nous parlons de la même chose, je vous invite à relire le topic à partir de



Je viens de tester aussi bien ton code que celui de dotclear. Dans les deux cas les séquences :
. tab+tab... (jusqu'à "recherche") + enter + tab

et
. click souris sur "recherche" + tab

donne le même résultat > focus sur l'input de saisie.

remarque : j'ai enlevé le javascript de ton code.

Vu sous FF et IE6

Vero a écrit :

Tu mets l'accesskey dans l'input ???


Je ne met rien nulle part c'est juste un copier/coller du code dotclear de base.

Moi je me contente d'essayer d'aider et c'est pour ça que je demande des précisions. Dit autrement en quoi un code type dotclear ne te convient il pas ? Quel est de ton point de vue le problème.
jpv a écrit :
Bonsoir,

Le problème d'utiliser l'Id comme cible d'une ancre est de désynchroniser le focus du couple pointeur souris/tabulation.

Avec cette méthode, le pointeur souris ne renvois pas de prise de focus, dés lors les deux actions click souris+tabulation+tabulation et tabulation+entrée+tabulation ne renvoie pas le même résultat.

Conserver synchrone le focus du pointeur de la souris et de la tabulation est très bénéfique car il permet d'utiliser indifféremment les deux méthodes.

Donc, de préférence, il vaut mieux utiliser des ancres que des ID comme cible.

Après, dans le cas d'un formulaire de recherche simple, l'ancre peut-être avant ou après le fieldset ou directement sur le label, le résultat sera identique : les deux séquences click souris+tabulation+tabulation et tabulation+entrée+tabulation renverrons une prise de focus sur l'input de recherche, asurant la cohérence de la navigation.

JP
Oui mais je viens de dire que j'ai effectué le test et que dans les deux cas on a bien le même résultat.

Celui là même que j'ai décrit.
Modifié par clb56 (22 Mar 2006 - 13:36)
Bonjour,

@Véro : mille milliards d'excuse, l'astuce que je donnais (onfocus sur l'ancre) pour eviter de tabuler jusqu'à la prise de focus sur le champs de recherche ne fonctionne effectivement que sur IE.

Et, à l'époque j'ai oublié de publier la correction.

Je prends une pelle, je m'enterre, et je te renouvelle toutes mes excuses.

Si tu veux obtenir cet effet, il te faut implémenter l'evenement javascript directement sur le lien d'évitement et utiliser l'evenement onclick :


<a href="#mon_ancre" onclick="document.getElementById('recherche').focus();return false">aller à la recherche</a>
<form id="recherche2">
	<a href="#" name="mon_ancre" ></a>
  <fieldset>
     <legend>Formulaire de recherche</legend>
     <label for="recherche">Rechercher<label>
     <input type="text"  id="recherche" name="recherche" title="Tapez votre recherche" accesskey="4"/>
     <input type="submit" class="submit" value="ok" />
  </fieldset>
</form>



Jean-pierre
Ah, il s'agirait donc du premier point que j'envisageais.

Dans ce cas une solution équivalente à celle de jpv mais qui permet d'externaliser le javascript :

<a href="#mon_ancre" id="lien_recherche">aller à la recherche</a>

<form id="recherche2">

	<a href="#" name="mon_ancre" ></a>

  <fieldset>

     <legend>Formulaire de recherche</legend>

     <label for="recherche">Rechercher<label>

     <input type="text"  id="recherche" name="recherche" title="Tapez votre recherche" accesskey="4"/>

     <input type="submit" class="submit" value="ok" />

  </fieldset>

</form>


et javascript :

function go_recherche() {

document.getElementById('recherche').focus();

}

window.onload=function() {      

document.getElementById('lien_recherche').href="javascript:go_recherche()";

}
Non Jean-Pierre, ne t'enterre pas avec une pelle, cela n'en vaut vraiment pas la peine ...
Smiley cligne

Merci pour ton intervention.

En l'attendant, j'ai essayé de mettre la recherche juste après les liens d'évitement...
C'est bien ça aussi, finalement : simple et on peut se passer de l'accesskey, du coup ...
(vue les dernières publications en la matière)

@goetsu

Il s'agissait d'une question relative au problème de choix de l'ancre et à la solution donnée par JPV, à l'époque de la création de ce topic . Dans cette dernière, c'est le js qui me posait problème.
Smiley cligne

@clb56

C'est bien aussi d'externaliser le js ... merci !
Smiley biggrin
agilis a écrit :

Pour ce qui est de la position du moteur de recherche, j'ai lu à plusieurs reprises (je ne sais plus bien où) qu'il fallait le placer en haut à droite de la page car, inconsciemment, c'est là que le visiteur le cherche.


Selon les critiques de mon site communal dans le salon dédié, il convient en fait qu'il soit toujours à la même place quelque soit la page du site...

@Véro : je viens de m'appercevoir que j'avais mis le moteur juste avant les liens d'évitement. C'est mal ? Smiley confused
Modifié par Bob (MC Melun) (23 Mar 2006 - 14:25)
Pages :