28111 sujets

CSS et mise en forme, CSS3

:hover et tablettes

Pendant plus de 30 ans (une éternité pour l'informatique), suite aux études de Xerox et surtout aux développements d'Apple, la souris est devenu l'outil indispensable de l'utilisateur, et nous nous sommes efforcés de rendre la navigation agréable avec des "title", des "onmouseover" et des ":hover".
Mais ces derniers temps sont apparus les smartphones et autres tablettes, et l'absence de souris!
Certains prétendent que "c'est un progrès" et que les infos de survol sont ringues.
Ce que je pense de ces personnes (sans doute les descendants de ceux qui pensaient que c'était mieux sous l'occupation parce qu'il y avait des cartes de rationnement et peu d'obèses) a peu d'importance.
Disons que je considère la tablette sur laquelle je suis en train d'écrire ce message comme un outil déficient, mais indispensable, auquel je dois adapter mes sites.

Pourriez vous me signaler des documents ou fils de discussion sur ce forum où ce sujet soit abordé? J'aimerais pouvoir me forger une opinion sans passer les dernières années de ma vie à réinventer l'eau chaude.
Bonjour PapyJP Smiley smile

Concernant CSS et :hover, c'est pas forcément très compliqué : il suffit très souvent de restituer l'effet de survol du lien/bouton en utilisant :active qui permet de renvoyer un feedback utilisateur sur ce qui est cliqué.

a, a:link {
/* mise en forme du lien "au repos" */
}
a:visited {
/* mise en forme du lien déjà visité (si possible/nécessaire) */
}
a:hover, a:focus, a:active {
/* mise en forme du lien au survol, au focus, lorsqu'il est cliqué */
}

Côté ergonomie, le plus important est l'affordance du lien, c'est à dire sa capacité à suggérer à l'utilisateur qu'il s'agit d'un élément cliquable.

Côté JS, il faut bien faire attention à ce que les événements soient accessibles au touch. Ce qui aujourd'hui ne pose pas vraiment de problème en soit (en tout cas toutes les bonnes lib le prévoient). Idem pour tout ce qui est animations JS, etc.

Voilà pour mes deux centimes, peuxêtre pas forcément exhaustifs Smiley smile
moi a écrit :
Côté ergonomie, le plus important est l'affordance du lien, c'est à dire sa capacité à suggérer à l'utilisateur qu'il s'agit d'un élément cliquable.

Ah et puis aussi, si le lien est physiquement cliquable, c'est bien aussi : comprendre, qu'il soit atteignable au doigt (donc suffisamment large et haut) Smiley smile
audrasjb a écrit :
Concernant CSS et :hover, c'est pas forcément très compliqué : il suffit très souvent de restituer l'effet de survol du lien/bouton en utilisant :active qui permet de renvoyer un feedback utilisateur sur ce qui est cliqué.

Bonsoir et merci de contribuer à cette discussion dont l'objectif est de me guider dans l'élaboration de mes règles de jeu.

Je suis désolé je ne vois pas le rapport entre :hover et link.

Mettre une information quand on survole sur un texte, une image ou n'importe quoi n'est pas directement lié au fait que cet élément contient un link. C'est aussi une façon de densifier l'information. Par exemple quand je dis qu'un concert aura lieu à la salle Machinchose, lorsque l'on survole ce texte, on voit s'afficher l'adresse de ladite salle. Bien entendu, si la personne clique sur ce texte, j'affiche un plan d'accès, donc en un sens c'est un link, mais la plupart du temps l'adresse suffit. C'est une faculté dont je n'ai pas d'équivalent sur une tablette ou un smartphone.
Autre exemple, si on survole une miniature de l'affiche du concert je l'affiche en grand au dessous et elle disparaît quand ma souris quitte la grande image. Si je fais cela avec un :hover, elle ne disparaît plus quand j'affiche sur une tablette. J'ai donc mis un onclick="this.style.display='none';" sur la grande image.
Modérateur
Bonsoir, en effet, transcrire un :hover est toujours délicat.
Dans les cas simples un :active ou un :focus peuvent suffire

J'ai mis à jour mon exemple de l'autre jour pour cela: http://codepen.io/anon/pen/myEJvQ

Par contre si il y a à la fois un :hover et un lien c'est plus délicat. On pourrait imaginer plusieurs bricolages comme afficher un lien supplémentaire, mais c'est toujours une grosse prise de tête.
Ok, merci pour les précisions car le message d'ouverture de ce fil ne me semblait vraiment pas aborder ce qui te pose problème directement, à savoir :
PapyJP a écrit :
C'est aussi une façon de densifier l'information. Par exemple quand je dis qu'un concert aura lieu à la salle Machinchose, lorsque l'on survole ce texte, on voit s'afficher l'adresse de ladite salle.

À ce moment là, le détournement de l'attribut HTML title que tu pratique habituellement est effectivement à proscrire. Par ailleurs, les infobulles placées au survol de liens actifs (ayant une cible/destination) ne sont en effet pas un moyen très adapté au tactile, c'est certain Smiley smile

Pourquoi ne pas tout simplement mettre en place un toggle ("levier" permettant de faire afficher unpanneau lors du clic) qui affiche/masque l'information complémentaire lors du clic ? Le lien peut alorsse trouver àcôté/en dessous/whatever de ce boutonde dépliement/repliement. Non ?
Modifié par audrasjb (18 Dec 2014 - 21:00)
@audrasjb: je suppose que quand tu dis "à proscrire" c'est parce que title ne marche pas sur une tablette. Pour un PC ou Mac, ça me paraît toujours valable.
Le toggle me semble une bonne idée, d'autant plus que mes sites sont pour l'essentiel générés en PHP, surtout pour adapter le contenu à l'utilisateur; je peux donc générer facilement des choses différentes selon le type de terminal, et même peut être récupérer les titres actuels pour en faire autre chose.
Je vais creuser dans ce sens là.
Modifié par PapyJP (18 Dec 2014 - 23:06)
Oui, le "toggle" me semble être une des solutions les plus adaptées ici Smiley smile

Pour title, j'ai dit que son détournement était à proscrire Smiley cligne
Utilisé sur un lien, cet attribut sert à apporter des informations nécessaires à la bonne navigation du visiteur via ce lien. Typiquement, préciser la fonction (téléchargement, ouverture d'un site externe) et les modalités (ouvre une fenêtre modale, ouvre la page dans un nouvel onglet, force le téléchargement d'une ressource) de l'ouverture du lien.

Donc, pour résumer, l'utilisation décrite ci-dessous estun détournement qui aurait tout intérêt à être remplacé par une solution type "panneau dépliant".
PapyJP a écrit :
C'est aussi une façon de densifier l'information. Par exemple quand je dis qu'un concert aura lieu à la salle Machinchose, lorsque l'on survole ce texte, on voit s'afficher l'adresse de ladite salle.
Complément d'info sur title :
W3C a écrit :

– Do not use the title attribute, on any element, for any text that you want all users to have access to.
– Do not use it on a link to provide information that may be important to any user.

> cf specs (EN)
Modifié par audrasjb (19 Dec 2014 - 08:47)
audrasjb a écrit :
Oui, le "toggle" me semble être une des solutions les plus adaptées ici Smiley smile

Pour title, j'ai dit que son détournement était à proscrire Smiley cligne
Utilisé sur un lien, cet attribut sert à apporter des informations nécessaires à la bonne navigation du visiteur via ce lien. Typiquement, préciser la fonction (téléchargement, ouverture d'un site externe) et les modalités (ouvre une fenêtre modale, ouvre la page dans un nouvel onglet, force le téléchargement d'une ressource) de l'ouverture du lien.

Donc, pour résumer, l'utilisation décrite ci-dessous est un détournement qui aurait tout intérêt à être remplacé par une solution type "panneau dépliant".

Je n'ai jamais vu le "title" utilisé pour faire ce que tu dis, et pour une bonne raison, c'est que seuls les techies dans notre genre pourraient comprendre ce que ça veut dire. J'imagine les yeux effarés de ma cousine si elle voyait s'afficher "en cliquant ici vous ouvrirez un fenêtre modale!"

Le panneau dépliant que tu proposes est un moyen intéressant, même s'il est relativement lourd, de contournement du manque de souris sur certains dispositifs, dont les tablettes. Même si je décide de l'implementer, ce sera faute de mieux, et pas à la place de "title", et seulement pour les terminaux sans souris, pour autant que je puisse le déterminer côté serveur.

audrasjb a écrit :
Complément d'info sur title :

> cf specs (EN)


Désolé, mais ce genre d'impératif comminatoire sans justification est sans objet. L'objectif du W3C est de définir des normes techniques, pas la façon de les utiliser. Cette attitude normative est typique de la culture anglophone saxonne, fortement imprégnée de religiosité.

"title" est un attribut qui est valide sur toutes les balises, et pas seulement les balises <a>, il est donc normal de l'utiliser pour ce qu'il est, c'est à dire un moyen d'afficher un texte au survol d'une balise.
Ils feraient mieux de jeter leurs anathèmes ("fatwas" dans une autre culture) sur ceux qui s'obstinent à ne pas implémenter les standards et nous contraignent à des acrobaties perpétuelles pour naviguer entre les écueils semés sur notre route.

Excusez moi pour ce coup de sang. J'ai passé mes dernières années professionnelles à avaler des couleuvres de ce type. Dès que les techniques et le prix des télécommunications ont rendu la chose possible, les filiales des entreprises anglo saxonnes ont été vidées de leurs cadres locaux, remplacés par des perroquets répétant en mauvais anglais la doctrine des Maîtres. Le résultat est que ces entreprises ont perdu la diversité culturelle qui faisait en partie leur richesse.
Modifié par PapyJP (19 Dec 2014 - 09:36)
Modérateur
Mais il y a une bonne raison tout de même. Title ne fonctionnera pas pour tous les agents utilisateurs. Notamment pas mal de systèmes d'accessibilité ainsi que les systèmes tactiles. C'est souvent contre-intuitif et pas évident d'utilisation.

Au vu de ceci, les recommandations sont justes de la logique assez basique: comme on n'est pas sûr que cela fonctionnera, il faudrait les utiliser que pour des contenus dispensables. Autrement dit les informations nécessaires et le fonctionnalités devraient être utilisables sans.

C'est quand même un des buts d'Alsacréations
a écrit :
Alsacréations est une communauté dédiée à la conception web aux normes, et notamment aux standards W3C, aux feuilles de style CSS, au langage (X)HTML, ainsi qu'à l'accessibilité du Web en général.

C'est pourquoi nous sommes plusieurs en ces lieux à privilégier les bonnes pratiques. À minima de manière théorique. Car en effet, dans la mise en pratique, on fait tous des entorses de temps à autre à la «bonne pratique théorique», pour des raisons pragmatiques. Il reste néanmoins important de rappeler la théorie afin d'être conscient de pratiquer une entorse, et aussi parce que ça nous permet parfois de trouver une alternative, qui n'est ni compliquée à mettre en place, ni une entorse.

Si tu ne souhaites pas appliquer ces bonnes pratiques, tu pointes probablement sur le mauvais forum. Ici le seul but n'est pas «que ça fonctionne»(pour moi) mais il y a aussi une optique de développement du web dans une vision à long terme.
kustolovic a écrit :
Si tu ne souhaites pas appliquer ces bonnes pratiques, tu pointes probablement sur le mauvais forum. Ici le seul but n'est pas «que ça fonctionne»(pour moi) mais il y a aussi une optique de développement du web dans une vision à long terme.


Si je consulte ce forum depuis des années (même si je n'y contribue que récemment) c'est pour mettre à jour mes "bonnes pratiques", et ce que j'y apprécie particulièrement c'est justement la vision à long terme qu'on y trouve, contrairement à d'autres où l'on ne trouve que des "astuces" de programmation.

Je fais partie de ceux qui ont travaillé dès les années 1960 dans les premiers réseaux d'ordinateurs, et j'ai eu la chance de voir naître et mûrir le domaine où j'ai travaillé dès ma sortie de l'école, ce qui n'a pas été le cas de camarades ayant choisi d'autres domaines.
Je suis donc particulièrement intéressé à voir comment cela évolue, même si je ne puis plus y contribuer comme à l'époque où je participais activement aux travaux de normalisation des procédures de communication entre ordinateurs, ou que je développais des systèmes distribués chez un fabriquant de systèmes informatiques.

Ma divergeance d'opinion sur l'utilisation d'UN attribut de balise HTML ne vaut pas condamnation des efforts de normalisation, dont je regrette qu'ils soient si lents, et surtout considérés avec autant de légèreté par les grands acteurs de l'industrie.
Il est vrai que les USA ont adopté le système métrique au XIXeme siècle, mais l'ont cantonné aux laboratoires scientifiques. Sans doute font ils la même chose avec les normes du W3C...
Re,

Nous ne pouvons bien évidemment pas te forcer à respecter les référentiels et démarches qualité et autre règles de base de l'accessibilité, mais ici, tu risque forcément de recevoir ce genre de rappels essentiels. C'est l'objectif de base de cette communauté (standards du web est inscrit à peu près partout).
PapyJP a écrit :
Ma divergeance d'opinion sur l'utilisation d'UN attribut de balise HTML ne vaut pas condamnation des efforts de normalisation

Ah, tu es plus raisonnable sur ce dernier message Smiley smile

L'utilisation des standards ne devrait pas être sujette aux divergences d'opinion, ou vraiment à la marge. Pour title, les choses sont plutôt claires et c'est ton utilisation qui est de fait hors standard. Une fois que tu as reçu cette information, libre bien entendu à toi de la mettre en pratique et de revoir tes pratiques, ou pas.

Il y a par contre des champs dans lesquels tu ne pourrais pas te permettre cela, par exemple dans le cadre d'une démarche de labellisation Accessiweb, d'obligation de conformité au Référentiel Général d'Accessibilité pour les Administrations (RGAA), ou d'obtention d'un label démarche qualité tel qu'Opquast.
Modifié par audrasjb (19 Dec 2014 - 13:10)
audrasjb a écrit :
Re,

Nous ne pouvons bien évidemment pas te forcer à respecter les référentiels et démarches qualité et autre règles de base de l'accessibilité, mais ici, tu risque forcément de recevoir ce genre de rappels essentiels. C'est l'objectif de base de cette communauté (standards du web est inscrit à peu près partout).

Ah, tu es plus raisonnable sur ce dernier message Smiley smile

L'utilisation des standards ne devrait pas être sujette aux divergences d'opinion, ou vraiment à la marge. Pour title, les choses sont plutôt claires et c'est ton utilisation qui est de fait hors standard. Une fois que tu as reçu cette information, libre bien entendu à toi de la mettre en pratique et de revoir tes pratiques, ou pas.

Il y a par contre des champs dans lesquels tu ne pourrais pas te permettre cela, par exemple dans le cadre d'une démarche de labellisation Accessiweb, d'obligation de conformité au Référentiel Général d'Accessibilité pour les Administrations (RGAA), ou d'obtention d'un label démarche qualité tel qu'Opquast.

Édit: ah! oui! J'oubliais: en tant que directeurvqualité (le placard qu'on donne aux vieux cadres avant qu'ils partent en retraite) j'ai été confronté aux obligations de conformité. Je suis heureux de voir que depuis mon départ on a progressé dans ce domaine...

voir http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-title-attribute
a écrit :
3.2.3.2 The title attribute

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; and so forth. The value is text.

If this attribute is omitted from an element, then it implies that the title attribute of the nearest ancestor HTML element with a title attribute set is also relevant to this element. Setting the attribute overrides this, explicitly stating that the advisory information of any ancestors is not relevant to this element. Setting the attribute to the empty string indicates that the element has no advisory information.

If the title attribute's value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break.

Caution is advised with respect to the use of newlines in title attributes.

For instance, the following snippet actually defines an abbreviation's expansion with a line break in it:

<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>

Some elements, such as link, abbr, and input, define additional semantics for the title attribute beyond the semantics described above.

The title IDL attribute must reflect the title content attribute.

Je ne vois rien la dedans qui confirme votre interprétation de ce que signifie un attribut "title".
Modifié par PapyJP (19 Dec 2014 - 14:10)
Ben si pourtant Smiley smile
W3C a écrit :
On a link, this could be the title or a description of the target resource

PapyJP a écrit :
C'est aussi une façon de densifier l'information. Par exemple quand je dis qu'un concert aura lieu à la salle Machinchose, lorsque l'on survole ce texte, on voit s'afficher l'adresse de ladite salle.


Mais de toute façon, le problème essentiel (qui est à la base de cette discussion) reste l'accessibilité à cet élément, notamment sur interface tactile.
Modifié par audrasjb (19 Dec 2014 - 13:48)
audrasjb a écrit :
Ben si pourtant Smiley smile
Mais de toute façon, le problème essentiel (qui est à la base de cette discussion) reste l'accessibilité à cet élément, notamment sur interface tactile.

La citation du W3C dit ce à quoi devrait (et non "doit") correspondre un title quand il correspond à un lien. il ne dit pas qu'il ne doit pas être utilisé ailleurs.
Ils auraient du reste bien du mal à revenir en arrière sur un usage que je ne suis pas le seul à faire...

Mais, oui, revenons à nos moutons!
Comment faire pour compenser le handicap de l'absence de souris? Le toggle me semble une excellente technique. D'autres propositions?
Sujet clos
Aller à