Suprimir títulos de enlace

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

  •  03-07-2019
  •  | 
  •  

Pregunta

¿Hay alguna forma de suprimir los títulos emergentes en los enlaces, y aún así mantenerlos en la página para personas con discapacidad visual?

¿Fue útil?

Solución

Esa es una función del navegador para interpretar el título del enlace y mostrar una información sobre herramientas / ventana emergente. No hay forma de suprimirlos. Lo intenté (porque a un cliente tampoco le gustaba) y no hay forma de evitarlo.

Otros consejos

Sé que esto se ha resuelto, pero también encontré esta solución: Ocultar información sobre herramientas nativa usando jQuery

Tuve este problema con un proyecto en el que el cliente quería mostrar su propia información sobre herramientas (que se hizo con CSS) pero también se mostraba debido a la información sobre herramientas iniciada por el navegador, por lo que se mostró dos veces. Lo solucionamos eliminando el atributo 'título' y en su lugar usando 'datos' para completar el texto en el CSS.

No estoy seguro de lo que quieres decir con mantenerlos en la página para personas con discapacidad visual, ya que solo son visibles en el código fuente.

Por ejemplo:

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

mostraría el enlace 'Título del enlace aquí' en la página, así como la molesta ventana emergente cuando se desplaza sobre ella.

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

mostraría el enlace 'Título del enlace aquí' pero NO mostraría la molesta ventana emergente al pasar el mouse, aunque todavía puede usar la etiqueta data para hacer referencia a lo que quiera poner allí (en nuestro caso, ponemos el texto para la información sobre herramientas para que el CSS haga referencia).

Obviamente, si quita la etiqueta del título por completo, el problema se resuelve, pero dijo que necesitaba mantenerlo allí, así que esta es mi solución como se usó anteriormente.

Esto funciona en jQuery. 

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

... posiblemente no sería lo ideal, pero siempre puede intentar, en lugar de un atributo title en <a href>, un <span> dentro de las etiquetas <a>: 

/* 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>

Sin embargo, no lo sugiero como una solución particularmente práctica. Y estoy bastante seguro de que no se validaría. Si conociera a JS, sugeriría algo más viable, pero aun así no estoy convencido de que funcione.

Los enlaces en mi navegador no muestran información sobre herramientas como esa a menos que tengan un atributo title.

Si lo desea, puede usar Greasemonkey para ejecutar esto un poco de javascript en cada página para eliminarlos. 

var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top