Liste de pseudo-liens

Bonjour

Une question : dans un menu j'ai à placer un certain nombre d'items avec intitulés réels (<li>Intitulé du lien</li>) MAIS sans lien a href allant avec... le but est "d'inciter" les gens à s'inscrire pour accéder à cette partie du site pour laquelle il faut être inscrit et loggé : on présente donc, via le menu, l'ensemble des pages dispos mais seule une partie, regroupée en tête de liste-menu, sera consultable par tout le monde.

Plusieurs possibilités, laquelle choisir ? Qu'est-ce qui vous semble le plus cohérent ?

(les "open" et "close" définiront des aspects différents ou pas selon la CSS chargée/utilisateur identifié ou pas)

<hn>ACCES PUBLIC</hn>
<ul id="open">
<li><a href="blabla1.php" title="Aller à la page blabla1">Blabla1</a></li>
<li><a href="blabla2.php" title="Aller à la page blabla2">Blabla2</a></li>
</ul>
<hn>ACCES RESERVE</hn>
<ul id="close">
<li><a href="" title="Page blabla3 réservée aux clients">Blabla3</a></li>
<li><a href="" title="Page blabla4 réservée aux clients">Blabla4</a></li>
</ul>

<hn>ACCES PUBLIC</hn>
<ul id="open">
<li><a href="blabla1.php" title="Aller à la page blabla1">Blabla1</a></li>
<li><a href="blabla2.php" title="Aller à la page blabla2">Blabla2</a></li>
</ul>
<hn>ACCES RESERVE</hn>
<ul id="close">
<li>Blabla3</li>
<li>Blabla4</li>
</ul>

<ul id="open">
<li><a href="blabla1.php" title="Aller à la page blabla1">Blabla1</a></li>
<li><a href="blabla2.php" title="Aller à la page blabla2">Blabla2</a></li>
</ul>
<ul id="close">
<li><a href="" title="Page blabla3 réservée aux clients">Blabla3</a></li>
<li><a href="" title="Page blabla4 réservée aux clients">Blabla4</a></li>
</ul>

<ul>
<li class="open"><a href="blabla1.php" title="Aller à la page blabla1">Blabla1</a></li>
<li class="open"><a href="blabla2.php" title="Aller à la page blabla2">Blabla2</a></li>
<li class="close"><a href="" title="Page blabla3 réservée aux clients">Blabla3</a></li>
<li class="close"><a href="" title="Page blabla4 réservée aux clients">Blabla4</a></li>
</ul>

<ul>
<li class="open"><a href="blabla1.php" title="Aller à la page blabla1">Blabla1</a></li>
<li class="open"><a href="blabla2.php" title="Aller à la page blabla2">Blabla2</a></li>
<li class="close">Blabla3</li>
<li class="close">Blabla4</li>
</ul>

...j'aime pas trop le a href="" qui ne mène nulle part et qui ne sert qu'à afficher le title. On peut aussi imaginer un dispositif genre regex qui ajoute une info (laquelle ? comment ?) aux <li> non suivies de <a> ?
Modifié par Arsene (26 Jun 2008 - 12:07)

Bonjour,

<a href="[b]inscription.php[/b]" title="Page blabla3 réservée aux clients">Blabla3</a>

Non ?

lol... C'est pas aussi simple hélas, non, il ne s'agit pas d'un service en ligne où n'importe qui s'inscrit. Il s'agit d'un genre d'accès client si on veut, mais qui veut montrer tout ce qu'il a derrière comme offre de contenus (par ex accéder à des dossiers complets, des études, des infos, des documents, etc.) Le process d'inscription ne se fera pas online mais via des agents commerciaux (si, si, il existe encore des sociétés à activités non-virtuelles). Le but de ce menu "inactif" est d'inciter à la démarche. Il n'est pas question non plus de mettre en lien un formulaire genre "Recevoir la visite d'un agent commercial" vu qu'il s'agit d'un domaine extrêment pointu (ingenierie médicale) avec un tas de protocoles particuliers. Donc, plutôt que dire "en devenant client vous avez accès à...." on le montre dans le menu.
Comme par ailleurs un certain nombre de cibles sont des malades qui peuvent être assez lourds, voire fortement handicapés, je cherche à monter un outil le plus accessible possible. Donc tous les détails ont leur importance, et cette question de menu "inactif" doit sûrement avoir une (ou des) solutions meilleure(s) que d'autres ?
Bien tenté en tout cas
Modifié par Arsene (26 Jun 2008 - 13:44)

Bonjour,

Si tu veux un lien vers une page d'information, eh bien tu fais un lien vers cette page (la page d'inscription comme le suggère Igor, ou une page avec les informations que tu veux). Ou bien le lien pointe vers la page de contenu, et pour chaque page de contenu tu n'affiches le contenu que si le visiteur est enregistré. Ou tu affiches le début du contenu, mais pas l'intégralité (et pas les documents joints).

Si tu veux du texte non réactif, tu n'utilises pas de lien, mais du texte brut (ou du texte dans un SPAN si nécessaire pour la mise en page).

J'avoue ne pas voir la difficulté.

Le texte brut pose le prob de ne pas avoir de title au survol, contrairement aux autres items de liste actifs qui l'entourent. Dans quelle mesure c'est perturbant, j'en sais rien. Le risque est que les visiteurs lamda ne comprennent pas qu'ils n'ont pas accès à cet espace et qu'ils croient à un bug ou une erreur (genre la touche TAB qui saute de 5 ou 10 items d'un coup, ou le focus qui peut ne pas être là où on l'attend sur une page fortement zoomée, etc.).
Avoir un href qui pointe dans le vide mais un title qui indique que ce sont des volumes réservés peut probablement être aussi perturbant pour un utilisateur dans certains cas de figures, ne serait-ce que parce que, par défaut, la page se recharge et on se retrouve en haut sans s'y attendre et sans l'avoir demandé.
Quant à afficher des portions de contenus ce n'est pas envisageable, il s'agit de volumes du site très différents.

En gros :

----------------------------
DOSSIERS
----------------------------
dossier 1
----------------------------
dossier 2
----------------------------
dossier 3 (inactif)
----------------------------
DOCUMENTS
----------------------------
document1
----------------------------
document2 (inactif)
----------------------------
document3 (inactif)
----------------------------
OUTILS
----------------------------
etc.

Je rejoins Florent. Nous avons aussi des sites où une grosse partie n'est accessible qu'aux abonnés (de revues). Quand un non-abonné clique sur une rubrique réservée (pas d'avertissement préalable), il se retrouve avec une page contenant le titre de l'article ou de la section, éventuellement une intro, le formulaire pour s'identifier (si plus de cookie) et un lien pour s'abonner à nos revues*.

Sur la page d'accueil, il y a un lien vers une rubrique qui explique les avantages des abonnés avec les sections réservées.

*Dans ton cas, on pourrait donner le numéro du service commercial.
Modifié par Patidou (26 Jun 2008 - 14:26)

J'ai également de nombreux sites où il y a des espaces réservés. Si je me permets de poster ce problème, c'est que ça ne rentre pas dans les cas de figures habituels et que les solutions éprouvées ne sont pas applicables.
Un cas pratique:
Un médecin souhaite opter pour une solution d'ingenierie médicale telle que celle offerte par mon client. Il arrive sur le site et constate qu'on peut avoir accès à (par exemple) certaines parties d'un dossier médical, touchant notamment à des informations techniques confidentielles. (je rappelle que cette question d'accès à un bout de dossier médical est hyper-protégée, légalisée, contrôlée, etc.). On lui montre donc que certaines fonctionnalités sont possibles et proposées. Tu crois vraiment qu'un lien vers une page "s'inscrire" va servir à quelque chose ?

L'idée est donc de "faire la promotion" des fonctionnalités du système via un menu non-actif. La question reste "sous quelle forme ?", sachant que je ne vais pas construire 50 systèmes de menus différents selon les cibles...
Modifié par Arsene (26 Jun 2008 - 15:12)

C'est pas très clair, mais on ne pourrait pas faire une version démo du système avec des infos bidons?

Une image vite fait... en vert plus clair les menus inactifs sans login.

Modifié par Arsene (26 Jun 2008 - 16:00)

Ben voilà, tu as le design, maintenant tu fais les «faux liens» avec des SPAN du terroir. Besoin d'une infobulle? Deux solutions:
- soit tu optes pour un classique <span title="Bla bla des infos">Mon intitulé</span>;
- soit tu fais une tooltip Javascript pour que ça soit joli (mais si c'est un menu déroulant, je déconseille cette surcharge).

Arsene a écrit :
Le texte brut pose le prob de ne pas avoir de title au survol, contrairement aux autres items de liste actifs qui l'entourent.

Homme de peu de foi. Les title sur les SPAN ça marche très bien (FF3, IE6-7, pas testé ailleurs).

Arsene a écrit :
Le risque est que les visiteurs lamda ne comprennent pas qu'ils n'ont pas accès à cet espace et qu'ils croient à un bug ou une erreur (genre la touche TAB qui saute de 5 ou 10 items d'un coup, ou le focus qui peut ne pas être là où on l'attend sur une page fortement zoomée, etc.).

Homme de peu de foi, bis. Un petit <span tabindex="0">Mon intitulé</span> et on n'en parle plus. Pris en compte dans Opera (9.5), Firefox (2-3), Internet Explorer (6-7), mais pas Safari (3.1 sous Windows).

Peu de foi, c'est rien de le dire....

Est-ce que title est interprété identiquement par les lecteurs sur <span> et sur <a> ???
Désolé j'ai rien compris pour les tabindex... si je place un tabindex (de 0 à x...) sur chaque <span> ça dirige prioritairement la nav clavier sur tout ce qui n'est pas lien, non ?

Arsene a écrit :
Désolé j'ai rien compris pour les tabindex... si je place un tabindex (de 0 à x...) sur chaque <span> ça dirige prioritairement la nav clavier sur tout ce qui n'est pas lien, non ?

Non. Un tabindex="0" permet à un élément de prendre le focus, mais ne le place pas en tête de l'ordre de tabulation. L'ordre de tabulation dépendra de la place de l'élément dans le flux, exactement comme pour un lien ou un élément de formulaire.
Le mieux, c'est encore de le tester.

Bonjour,

Florent, le coup du tabindex, je trouve cela plus que moyen est-ce que ce n'est pas détourné le focus de sa fonction et induire en erreur l'internaute?

Pour moi (mais je me trompe peu-être) un élément recevant le focus est un élément cliquable ou actionnable via le clavier comme les éléments de formulaire et les liens, là, rien de tout cela.

Il semblerait en plus, que cela ne soit pas valide d'après le test rapide que je viens de faire en local, une validation m'indique qu'il n'est pas possible d'avoir un tabindex à cette endroit.

En ce qui concerne le problème de comm sur la fonctionnalité pourqoi ne pas tout bêtement l'expliquer juste avant le premier niveau de menu et éventuellemnt le doubler avec un title sur les parties non actives?

Du genre :

a écrit :
Les parties grisées, avec astérisque..., sont des fonctionnalités possibles et proposées elles sont utilisables uniquement par les clients (ou après authentification, inscription...).

Modifié par knarf (27 Jun 2008 - 05:48)

Assez d'accord avec Knarf sur l'utilisation du tabindex comme "astuce" qui pourrait être plus contre-productive qu'autre chose. J'aurais tendance à penser qu'effectivement un focus s'opère traditionnellement sur un lien. En tout cas il est clair qu'une série de tabindex (de 0 à x) contraindront la nav par tab à se positionner prioritairement en dehors des liens actifs, ce qui est l'exact inverse du but recherché Et que donnera une série de tabindex="0" les uns à la suite des autres ?
Idem pour <title> sur un span qui me semble répondre à un objectif de - presque - cohérence (implémenter un système d'infobulles sur tout le menu en affichage graphique, comme le démontre la liste des UA donnée par Florent) mais, structurellement, ne correspond pas exactement à la fonction de l'infobulle title qui est de décrire où mènera le click de l'utilisateur.

J'en étais à me demander si un lien avec ancre pointant sur le début du menu (genre <a href="#menu" title="page réservée..." />) ne serait pas le plus simple dans la mesure où un click maladroit ne ramenera pas automatiquement tout en haut de page....

knarf a écrit :
Florent, le coup du tabindex, je trouve cela plus que moyen est-ce que ce n'est pas détourné le focus de sa fonction et induire en erreur l'internaute?

Ben moi je réponds à la question d'Arsène, hein. C'est déjà mieux qu'un lien qui ne mène nulle part.
Personnellement je n'utiliserais pas de tabindex ici.

knarf a écrit :
Il semblerait en plus, que cela ne soit pas valide d'après le test rapide que je viens de faire en local, une validation m'indique qu'il n'est pas possible d'avoir un tabindex à cette endroit.

Ce n'est effectivement pas valide en HTML 4.01, car pas prévu ainsi à l'époque. Mais c'est une recommandation d'ARIA:
http://www.w3.org/TR/wai-aria/#focus

a écrit :
Note: The applicability of this attribute has been extended to all visible elements, within the XHTML namespace. It should not be used with a prefix referring to the aria namespace.

L'usage de tabindex que je décris est donc standard, même si pas valide HTML 4.01 ou XHTML 1.0.

Et sinon, +1 pour communiquer explicitement sur le pourquoi et la signification des parties grisées.

Arsene a écrit :
En tout cas il est clair qu'une série de tabindex (de 0 à x) contraindront la nav par tab à se positionner prioritairement en dehors des liens actifs, ce qui est l'exact inverse du but recherché Et que donnera une série de tabindex="0" les uns à la suite des autres ?

Rah mais ça sert à quoi que je corrige une erreur si c'est pour qu'on la répète au message suivant?

ARIA 1.0 a écrit :
Elements bearing a zero value of TABINDEX, together with elements of types A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA bearing a zero value or no value of TABINDEX, are navigated next, as specified in HTML 4.01. These elements are navigated in the order they appear in the character stream.

Faites des tests! (C'est ce que j'ai fait avant de proposer cette «astuce» qui n'en est pas une.)

Arsene a écrit :
la fonction de l'infobulle title qui est de décrire où mènera le click de l'utilisateur

Non.

HTML 4.01 a écrit :
title
This attribute offers advisory information about the element for which it is set.

Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute.

Notons que l'attribut title fait partie du groupe %coreattrs dans les DTD HTML 4.01 et XHTML, aux côtés de class, id et style. Il est utilisable sur la quasi-totalité des éléments HTML. Et il n'a pas de rôle spécifique lorsqu'utilisé sur un élément SPAN (contrairement à sa fonction sur un élément LINK pointant vers une feuille de styles, par exemple).

Lisez les specs, boudiou!

Je sais tout ça merci. Les specs sont une chose, les usages utilisateurs une autre. Quand les premières peinent à pallier aux déficiences des seconds il me semble préférable de les ignorer, du moins partiellement ou temporairement. En l'occurence, je reste (presque) convaincu qu'une infobulle, par le simple fait qu'elle soit expérimentée dans 99% des cas comme signalant un lien, sera perçue comme telle et incitera l'utilisateur à cliquer là où il n'a pas à le faire puisqu'aucun événement de type <a href> n'accompagnera son action. Quoiqu'en disent les specs.
Quant à tabindex 0 je vais tester ça, je ne connais pas cet usage... désolé de t'avoir mis en colère

Arsene a écrit :
Les specs sont une chose, les usages utilisateurs une autre. Quand les premières peinent à pallier aux déficiences des seconds il me semble préférable de les ignorer, du moins partiellement ou temporairement.

Bien sûr, c'est la différence entre la conformité technique et l'ergonomie.

Arsene a écrit :
En l'occurence, je reste (presque) convaincu qu'une infobulle, par le simple fait qu'elle soit expérimentée dans 99% des cas comme signalant un lien, sera perçue comme telle et incitera l'utilisateur à cliquer là où il n'a pas à le faire puisqu'aucun événement de type <a href> n'accompagnera son action.

Hmm... j'en suis moins convaincu. Mais là encore, je ne faisais que répondre à ta demande: une infobulle et pas d'action. Donc title, pour une solution simple. Si maintenant tu estimes que ce n'est pas pertinent pour l'ergonomie de l'interface, eh bien pas d'infobulle (ou alors tu peux envisager une infobulle JS qui, graphiquement, sera identifiée différemment des infobulles des liens).

Arsene a écrit :
désolé de t'avoir mis en colère

Tout de même pas en colère.

Florent a écrit :
je ne faisais que répondre à ta demande: une infobulle et pas d'action

...sauf que c'était pas ça ma question lol, ma question c'était : pour ce cas de figure particulier, comment construire une liste inactive au plus efficace et au plus près des contraintes d'accessibilité ? ...liens ou pas, infobulles ou pas, action ou pas ne sont que des aspects de la question sur lesquels justement je n'avais pas d'idées bien claires. D'ailleurs j'ai pas les idées beaucoup plus claires maintenant.... j'ai juste placé un href="#menus" qui finalement ne ma paraît pas si minable que ça vu que si on clique par erreur sur un item inactif malgré l'infobulle, hé bien on remet le focus au début de la séquence erronée... mouais....

Merci en tout cas pour tes réponses éclairantes.

Bonjour,

N'empêche, sans vouloir trop insister, quel est le problème avec la solution de créer des liens qui pointeraient vers une page explicative :

- qui indique que cette section est réservée et pourquoi
- qui donne les coordonnées des représentants
- optionnellement, qui résume toutes les fonctionnalités de l'application
- optionnellement, qui résume les avantages

La page pourrait être générique pour tous les liens "inactifs", ou encore spécifique à chacun d'eux en offrant un aperçu de la section avec des données fictives (des screenshots, voir même une vidéo).

Tous les liens du menu seront donc fonctionnels : tabulation et événement au clic. Seuls l'apparence et le title seraient différents. Il ne pourrait y avoir aucune confusion et la page de destination des liens "inactifs" serait tellement générique que cela supporterait tous les cas de figures.

Non?
Modifié par Tony Monast (27 Jun 2008 - 22:35)