Supprimer les titres de lien

StackOverflow https://stackoverflow.com/questions/809795

  •  03-07-2019
  •  | 
  •  

Question

Existe-t-il un moyen de supprimer les titres en incrustation dans les liens tout en les conservant sur la page pour les malvoyants?

Était-ce utile?

La solution

C’est une fonction du navigateur d’interpréter le titre du lien et d’afficher une info-bulle / popup. Il n'y a aucun moyen de les supprimer. J'ai essayé (car un client ne les aimait pas non plus) et il n'y avait aucun moyen de les contourner.

Autres conseils

Je sais que cela a été résolu, mais j'ai également trouvé cette solution de contournement: Masquer l'info-bulle native à l'aide de jQuery

J'avais ce problème avec un projet dans lequel le client voulait afficher sa propre info-bulle (ce qui avait été fait avec CSS), mais il était également affiché à cause de l'info-bulle créée par le navigateur. Nous avons contourné ce problème en supprimant l'attribut 'title' et en utilisant plutôt 'data' pour renseigner le texte dans le CSS.

Je ne suis pas sûr de comprendre ce que vous entendez par maintien sur la page pour les malvoyants, car ils ne sont visibles que dans le code source?

Par exemple:

<a href="link" title="something">Link title here</a>

afficherait le lien "titre du lien ici" sur la page, ainsi que la fenêtre contextuelle agaçante lorsque vous la survolez.

<a href="link" data="something">Link title here</a>

montrerait le lien 'titre du lien ici' mais NE montrerait PAS la fenêtre popup agaçante en vol stationnaire, bien que vous puissiez toujours utiliser la balise data pour référencer tout ce que vous voulez y mettre (dans notre cas, nous mettons le texte l'info-bulle du CSS à laquelle se référer).

Évidemment, si vous supprimez complètement la balise de titre, le problème est résolu, mais vous avez dit que vous deviez la conserver. C’est la solution que j’ai utilisée auparavant.

Cela fonctionne dans jQuery. 

var val;
$('[YOUR_SELECTOR]').hover(function() {
    val = $(this).attr('title');
    $(this).removeAttr('title');
  },function() {
    $(this).attr('title',val);
})

... ce ne serait peut-être pas idéal, mais vous pouvez toujours essayer, à la place d'un attribut title dans <a href>, un <span> dans les <a> tags: 

/* screen.css */

a   { }

a span.titleText {
    display: none;
    position: absolute;
    bottom: 1.2em;
    left: 0;
}

a:hover span.titleText,
a:active span.titleText,
a:focus span.titleText {
    display: block;
}

/* audio.css */

a span {
    display: inline; /* or whatever the relevant attribute would 
                        be in an audio stylesheet. */
}

<head>
    <link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="audio.css" type="text/css" rel="stylesheet" media="screen-reader, audio" />
</head>

<a href="http://some.url.com">
    <span class="titleText">This is the title</span>This is the link
</a>

Cependant, je ne le suggère pas comme une solution particulièrement pratique. Et je suis à peu près certain que cela ne validerait pas. Si je connaissais JS, je suggérerais quelque chose de plus pratique, mais même dans ce cas, je ne suis pas convaincu que cela fonctionnerait.

Les liens de mon navigateur n'offrent aucune info-bulle de ce type, sauf s'ils ont un attribut title.

Si vous le souhaitez, vous pouvez utiliser Greasemonkey pour l'exécuter. peu de javascript sur evey page pour les supprimer. 

var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top