题
有没有办法抑制链接上的弹出标题,但仍然将它们保留在视障人士的页面上?
解决方案
这是浏览器解释链接标题并显示工具提示/弹出窗口的功能。没有办法抑制它们。我试过了(因为客户也不喜欢它们)并且没有办法绕过它们。
其他提示
我知道这已经解决,但我也发现了这个解决方法:使用jQuery隐藏原生工具提示
我遇到了一个项目,客户希望显示自己的工具提示(使用CSS完成),但由于浏览器启动的工具提示也显示,因此它显示了两次。我们通过删除'title'属性并使用'data'来填充CSS中的文本来解决这个问题。
我不确定你的意思是将它们留在视障人士的页面上,因为它们只在源代码中可见?
例如:
<a href="link" title="something">Link title here</a>
会在页面上显示“链接标题”链接以及悬停在其上的恼人弹出窗口。
<a href="link" data="something">Link title here</a>
会显示“链接标题在这里”的链接,但不会在悬停时显示恼人的弹出窗口,但你仍然可以使用data
标签来引用你想要放在那里的任何内容(在我们的例子中,我们将文本放在CSS引用的工具提示)。
显然,如果你完全删除了标题标签,问题就解决了,但你说你需要把它保留在那里,所以这是我之前使用的解决方法。
这适用于jQuery。
var val;
$('[YOUR_SELECTOR]').hover(function() {
val = $(this).attr('title');
$(this).removeAttr('title');
},function() {
$(this).attr('title',val);
})
...它可能不太理想,但您可以随时尝试代替title
中的<a href>
属性,<span>
标签内的<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>
但是,我并不认为这是一个特别实用的解决方案。我相当肯定它不会验证。如果我认识JS,我会建议一些更可行的东西,但即便如此,我也不相信它会起作用。 我的浏览器中的链接不会显示类似的工具提示,除非它们具有title
属性。
如果您愿意,可以使用 Greasemonkey 来运行在evey页面上的一些javascript删除它们。
var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
anchorTags[i].removeAttribute("title");
}
不隶属于 StackOverflow