Question

有没有办法抑制链接上的弹出标题，但仍然将它们保留在视障人士的页面上？

Answer 1

这是浏览器解释链接标题并显示工具提示/弹出窗口的功能。没有办法抑制它们。我试过了（因为客户也不喜欢它们）并且没有办法绕过它们。

Answer 2

我知道这已经解决，但我也发现了这个解决方法：Hide native tooltip using jQuery

Answer 3

我遇到了一个项目，客户希望显示自己的工具提示（使用CSS完成），但由于浏览器启动的工具提示也显示，因此它显示了两次。我们通过删除标题＆＃39;来解决这个问题。属性，而不是使用＆＃39;数据＆＃39;填充CSS中的文本。

我不确定您将它们保留在视障人士的页面上是什么意思，因为它们仅在源代码中可见？

例如：

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

会在此处显示链接＆＃39;链接标题＆＃39;在页面上以及当你悬停在它上面时恼人的弹出窗口。

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

会在此处显示链接＆＃39;链接标题＆＃39;但是不会在悬停时显示恼人的弹出窗口，尽管你仍然可以使用data标签来引用你想放在那里的任何东西（在我们的例子中，我们把工具提示的文本放在CSS的引用中）。

显然，如果你完全删除了标题标签，问题就解决了，但你说你需要把它保留在那里，所以这是我之前使用的解决方法。

Answer 4

...它可能不太理想，但您可以随时尝试代替title中的<a href>属性，<span>中的<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>

但是，我并不认为这是一个特别实用的解决方案。我相当肯定它不会验证。如果我认识JS，我会建议一些更可行的东西，但即便如此，我也不相信它会起作用。

Answer 5

这适用于jQuery。

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

Answer 6

我的浏览器中的链接不会显示这样的工具提示，除非它们具有title属性。

如果您愿意，可以使用Greasemonkey在evey页面上运行这一点javascript来删除它们。

var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}

抑制链接标题

6 个答案: