1154 sujets

Accessibilité du Web

Pages :
Bonjour à tous (ou re !),

Dans la mesure où le formulaire de recherche est accessible directement via le menu d'évitement, est-il nécessaire que ce dernier se trouve (dans le code) avant le contenu ?

Si la question a déjà fait l'objet d'un débat, veuillez m'en excuser.

Il a été question d'un sujet concernant la position du menu ... mais je souhaitais savoir si le moteur de recherche nécessite une position particulière ...

Smiley smile
Modifié par Vero (23 Mar 2006 - 12:34)
Tiens, pour une fois, ça va être simple et concis :

non

Smiley lol

<edit>
ce smiley qui dit simplement lol, moi, je le trouve un peu agressif, genre sarcastique. Pas vous ?
Dans un cas comme celui-ci, pour éviter tout malentendu, il faudrait un lol plus ouvertement sympathique. Non ?
</zut pour le concis>
Modifié par Laurent Denis (18 Jul 2005 - 19:45)
C'est tellement concis, que j'ai cherché la réponse à ma question un moment, me demandant si je n'avais pas raté un salon ou si mon petit smiley "sourire" était mal vu ....

Mais non, la réponse est donc : Non, pas de place particulière pour le moteur de recherche ... à partir du moment où on reste cohérent, n'est-ce-pas ?

Alors, merci et

Smiley biggrin



Ce dernier n'est-il pas sympathique, tout simplement ?
En l'absence, à ma connaissance, de toute norme, bonne pratique, recommandation, avis gouroustique ou témoignage d'utilisateur sur le sujet, je ne peux guère que te donner mon expérience de maniaque d'où est le moteur de recherche de ce site, dans un navigateur graphique comme dans un lecteur d'écran : tant qu'effectivement le moteur est accessible via ce menu d'accessibilité, peut importe qu'il soit dans la page, pas dans la page, en haut, en bas, au milieu ou ailleurs.

(Bon, pas dans un popup, quand même Smiley cligne )

<NB> Smiley biggrin est trè sympathique, mais je ne peux pas me faire à l'idée qu'il dit LOL, quand un autre porte ce nom...</>
Modifié par Laurent Denis (18 Jul 2005 - 21:33)
L'expérience est souvent bonne conseillère !

<réponse subjective au nb>

lol : rire qui peut montrer une forme d'ironie en fonction du contexte

Smiley lol ... Smiley biggol (affreux, pas beau !)

Smiley biggrin : sourire chaleureux ...

<conclusion>
On se moque de moi et de mes questions, alors !!!

</fin de commentaire>

Smiley cligne Smiley biggrin
Modifié par Vero (18 Jul 2005 - 23:35)
bonsoir tous,

Comment fait on pour l'id du lien "aller à la recherche" vers quoi ce lien doit il pointer.

Le fieldset
le label
l'input
<p>

Parce que pour firefox je n'ai pas encore réussi à lui faire comprendre.
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.

@vero : D'accord avec Laurent, aucune importance, en revanche pense bien à implémenter un accesskey 4, sur l'input de recherche, accesskey 4 fait partie de la sainte trinité 0 (aide), 1 (accueil), 4 ( recherche).

Tous les autres accesskey sont sujets au contexte, en revanche ces trois là sont unaniment uniformisés.

JP
Merci JPV Pour ces dernières remarques (Je crois avoir d'ores et déjà affecté correctement ces accesskey ...)

Je profite donc de la réflexion engagée pour poser les questions suivantes :

Quelle différence entre une ancre et une ID ?

Quel est le problème de focus ... je ne comprends pas de quoi il s'agit !


Smiley decu
Modifié par Vero (19 Jul 2005 - 04:08)
Je suppose qu'il faut utiliser une balise <a> vide ou avec un espace inseccable renseignée avec "name" uniquement sans href une ancre quoi! Smiley confused .

A ce moment là c'est vrai les 2 actions (clique souris ou tabulation) font la même chose au niveau du cheminement vers le focus.

Mais je pensais que les balises vides n'etaient pas conseillée alors j'évitais.

merci jpv je vais me coucher moi C.. ce soir Smiley biggrin

En fait ce qui m'as enduit plein d'erreurs Smiley smile c'est le fait de l'abandon de "name" pour un bloc et sa présence uniquement utile pour les vieux navigateurs.

En plus si c'est comme cela qu'il faut faire hé bien ça m'arrange beaucoup Smiley biggrin .
Modifié par knarf (19 Jul 2005 - 05:39)
Bonjour,

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. J'ai remarqué que beaucoup de moteur de recherche était effectivement en haut à droite.

Voilà voilà Smiley cligne

a+
Oui, il peut être positionné en haut à droite avec une feuille de style, mais ma question était quelle position est recommandée dans le code html ...
Bonsoir,

a écrit :
Quelle différence entre une ancre et une ID ?
Quel est le problème de focus ... je ne comprends pas de quoi il s'agit


Désolé j'aurais du être plus clair dans mon explication.

Un ancre est un lien vide (sans attribut href) doté d'un attribut "name".

Cet élément est dédié à un seul usage : créer la cible d'un lien interne.

Mais il est possible, également, de se servir de l'attribut ID d'un élément quelconque comme cible d'un lien interne, car ce qui fait la cible c'est l'attribut (id ou name) pas la nature de l'élément.

Prenons l'exemple du formulaire de recherche :

J'ai un lien interne "rechercher" dont le but est de donner le focus sur le formulaire.
La cible du lien interne est définis sur l'ID de la balise form.

J'ai deux moyens de réaliser cette action :
- A la souris, pas de soucis.
- A la tabulation pas de soucis, après avoir activé le lien par entrée je tabule et j'obtiens bien le focus sur l'input du formulaire.

Tout va bien donc, sauf qu'il existe une troisième méthode, mélange des deux première :
- Je clique à la souris ET je tabule pour obtenir le focus sur l'input.

Dans ce cas là ça ne fonctionne pas.

Le click de la souris déplace le focus de la zone active sur l'élément cible, mais en revanche le pointeur de la tabulation n'est lui pas déplacé, car l'élément formulaire (la balise form) n'est pas un élément exploitable par le pointeur de la tabulation.

On pourrait vouloir dés lors utiliser un ID attribué au label ou directement l'ID attribué au champ input du formulaire mais dans ce cas là on essuie un nouvel échec.
La tabulation suivant le click de la souris sur le lien interne activera le premier élément exploitable suivant, par exemple l'input "envoyer".

En revanche, si l'on utilise l'élément "ancre" dédié au seul usage de créer la cible d'un lien interne, alors la dernière méthode (souris+tabulation) fonctionne parfaitement car, évidemment, un lien fut-il vide est un élément exploitable par le pointeur de la tabulation.

Il est donc très important de ne pas utiliser un élément quelconque comme cible d'un lien interne mais bien une ancre dédiée.

Pour en terminer avec notre formulaire de recherche, une méthode "friendly" comme le disent nos amis anglais est de rajouter à notre ancre un evenement javascript onfocus afin d'éviter de devoir faire une tabulation pour démarrer la saisie.

Dans ce cas là il convient également d'attribuer un title au champ input pour bien indiquer aux lecteurs d'écrans la nature du champs activé.

Ce qui nous donne :


<form>
  <fieldset>
  <a name="mon_ancre" id="mon_ancre" onfocus="document.getElementById('recherche').focus()"></a>
     <legend>Formulaire de recherche</legend>
     <label for="recherche">Rechercher<label>
     <input type="text"  id="recherche" name="recherche" title="Tapez votre recherche" accesskey="4" />
     ...
  </fieldset>
</form>


Ou quelque chose d'approchant...

On reproduit ainsi avec le lien interne un fonctionnement identique à celui de l'accesskey affecté sur l'input du formulaire de recherche et qui donne un focus automatique.

JP
Modifié par jpv (19 Jul 2005 - 23:42)
a écrit :
En fait ce qui m'as enduit plein d'erreurs smile c'est le fait de l'abandon de "name"


Petite précision : Cet abandon qui est une conséquence des spécifications XML concerne uniquement les eléments a, applet, form, frame, iframe, img et map.
a écrit :
Finalement, notez que le XHTML 1.0 a abandonné l'attribut name des éléments a, applet, form, frame, iframe, img, and map, et qu'il sera éliminé dans les versions suivantes.


Donc l'ancre est concerné, les règles de compatibilité de XHTML 1.0 conseille de maintenir les deux attributs afin d'assurer une compatibilité ascendante et descendante.

a écrit :
Beaucoup de clients HTML existants ne maintiennent pas l'utilisation des attributs de type ID de cette manière, donc des valeurs identiques doivent être fournies pour les deux attributs pour assurer une compatibilité ascendante et descendante maximum (c.à-d., <a id="foo" name="foo">...</a>).


JP
Modifié par jpv (19 Jul 2005 - 23:38)
Merci beaucoup pour cet éclairage, jpv.

Un bookmark de plus : ce topic ! (le temps d'intégrer)

Smiley biggrin
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 ? Petite précision, il n'y a aucun tabindex sur la page.
Salut dominique,

Aucune raison que ça ne fonctionne pas sur IE6, on ne fait rien qui demande une implémentation particulière du browser.

Peut-être un soucis sur sur le code lui-même.

Possible d'avoir le code ?

JP

Ps: Toutes les implémentations que j'aie sont fonctionnelles...
Modifié par jpv (22 Jul 2005 - 11:09)
Je t'ai donné l'adresse du site en construction par mp, des fois que le code du moteur de recherche ne suffise pas à résoudre le problème.

Le code généré :
          <form method="get" action="recherche.php3">
           <a name="recherche" id="recherche" onfocus="document.getElementById('recherche').focus()"></a>

           <div id="formrecherche">
             <label for="recherche">Rechercher </label>
             <input class="ombre" type="text" name="recherche" id="recherche" accesskey="4" />
            </div>
          </form>


Le site est sous spip
Modifié par dominique (22 Jul 2005 - 11:19)
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)
Pages :