Elimina i titoli dei link
Domanda
Esiste un modo per sopprimere i titoli pop-up sui collegamenti, ma tenerli ancora sulla pagina per i non vedenti?
Soluzione
Questa è una funzione del browser per interpretare il titolo del collegamento e visualizzare una descrizione comandi / popup. Non c'è modo di sopprimerli. Ho provato (perché neanche a un cliente piacevano loro) e non c'è modo di aggirarli.
Altri suggerimenti
So che questo è stato risolto ma ho anche trovato questa soluzione alternativa: Nascondi tooltip nativo usando jQuery
Ho avuto questo problema con un progetto in cui il client voleva visualizzare la propria descrizione comandi (che è stata eseguita con i CSS), ma stava anche mostrando a causa della descrizione comandi avviata dal browser, quindi ha mostrato due volte. Abbiamo risolto il problema rimuovendo l'attributo 'title' e usando invece 'data' per popolare il testo nel CSS.
Non sono sicuro di cosa significhi tenerli nella pagina per i non vedenti, poiché sono visibili solo nel codice sorgente?
Ad esempio:
<a href="link" title="something">Link title here</a>
mostrerebbe il link "Titolo del link qui" sulla pagina e il fastidioso popup quando ci si passa sopra.
<a href="link" data="something">Link title here</a>
mostrerebbe il collegamento "Titolo del link qui" ma NON mostrerebbe il fastidioso popup sul passaggio del mouse, anche se puoi ancora usare il tag data
per fare riferimento a tutto ciò che vuoi mettere lì (nel nostro caso, inseriamo il testo per la descrizione a cui il CSS fa riferimento).
Ovviamente se rimuovi completamente il tag del titolo il problema è risolto, ma hai detto che dovevi tenerlo lì, quindi questa è la mia soluzione alternativa come usato prima.
Funziona in jQuery.
var val;
$('[YOUR_SELECTOR]').hover(function() {
val = $(this).attr('title');
$(this).removeAttr('title');
},function() {
$(this).attr('title',val);
})
... forse non sarebbe l'ideale, ma potresti sempre provare, al posto di un title
attributo nel <a href>
, un <span>
tra i <a>
tag:
/* 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>
Tuttavia, non lo consiglio come soluzione particolarmente pratica. E sono abbastanza certo che non sarebbe valido. Se conoscessi JS, suggerirei qualcosa di più praticabile, ma anche allora non sono convinto che funzionerebbe.
I collegamenti nel mio browser non mostrano suggerimenti come quelli a meno che non abbiano un title
attributo.
Se vuoi, puoi usare Greasemonkey per eseguire questo un po 'di javascript nella pagina evey per rimuoverli.
var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
anchorTags[i].removeAttribute("title");
}