有没有办法在<map ...> <area ... =“”title =“searchable text”/>和<img alt="searchable text"/>中搜索可搜索的文本？

Question

在大多数浏览器中使用 Ctrl-F 将允许您搜索文本，但仅在文本区域中搜索。我想在哪些应该是可访问的区域中搜索文本，这些区域不一定是文本呈现区域，例如<map ...><area title="searchable text" /></map>和<img alt="searchable text" />。是否有可以满足我要求的浏览器或插件？这个东西在这里是为了可访问性，但它似乎并不是真的可以访问（除了鼠标悬停，这也不是所有可访问的。）

注

需要回答，不使用与视图分离的内容。即搜索源代码不是一个选项，因为这很难阅读（特别是在复杂的页面上）并且不会显示信息在呈现页面上的位置。

Answer 1

  

是否有可以执行我要求的浏览器或插件？

哦，是的。 Lynx浏览器做到了。 但我想这不是解决方案; - ）

如果您的问题是这样，则无法覆盖CTRL + F在浏览器中执行的操作。

您可以在网站内设计自定义插件，也可以为浏览器设计插件。这很容易......但需要其他捷径。

如果您的主要问题是根据alt或title属性内容找到代码，那么在javascript中这很容易：

 var search='enter image';
 var nodes=document.querySelectorAll("[alt*='"+search+"'],[title*='"+search+"']");

然后，您可以使用jquery或您想要的内容突出显示匹配的节点。

for (i in nodes) {
   nodes[i].className+=' resultHighlighted';
}

滚动到第一个结果：     节点[0] .scrollIntoView（）;

如果您打算创建浏览器插件，可以创建自定义书签或自定义插件，并将快捷方式与此书签相关联（请参阅https://github.com/iSunilSV/Chrome-Bookmark-Shortcut）

一个简单的书签，通过title或alt属性查找第一个匹配并滚动到它将是这样的：

javascript:text=prompt("search inside alt or title attribute");
document.querySelector("[alt*='"+text+"'],[title*='"+text+"']").scrollIntoView();

Answer 2

在浏览器中，使用＆＃34;查看来源＆＃34;或＆＃34;源代码＆＃34;函数，然后在弹出的窗口中，使用Ctrl-F进行查找。

你也可以使用＆＃34; Inspect Element＆＃34;直接在一个元素上将屏幕分成两个窗口 - 一个用于代码，一个用于渲染。

有关详细信息，请参阅此处针对Chrome的示例文章： https://support.google.com/adsense/answer/181951?hl=en

Answer 3

像Web Developer浏览器插件那样有用吗？它适用于Chrome，FF和Opera。有一些功能可以切换各种属性的显示，例如title，alt甚至是ARIA角色。这会将属性文本与元素内联注入。

Answer 4

想法1

我假设您安装了Windows和Firefox

我的Firefox安装了2个附加组件。

1. 安装一个名为Tile Tabs的附加组件，例如左侧是Web视图，右侧是源代码页面。
2. 将名为网页的插件安装到源代码＆amp;反之，通过按CTRL + SHIFT + S
可以在视图和源代码之间切换

据我所知，你所要求的并不是所有现在浏览的默认内容。

解决方案的屏幕截图：



创意2

安装FireBug，您可以查看/编辑/调试源代码并查看HTML实时内容，您在代码中突出显示的内容也将在视图中突出显示。

截屏：

注意： Btw idea 1不仅适用于视图/源代码，也可以比较两个视图或阅读文章到右边并回答左边的问题。

Answer 5

在我看来，这不是一个错误;它们不是为这种用途而设计的。

我确定您知道，alt属性会在图片不可用时替换该图片。那么你怎么能滚动到并不总是显示的东西？而你似乎是在追求永久性描述; figcaption更合适。

对于title属性，只有intended来澄清链接的目的。 title中的用户不应该有任何新信息;因此，我认为在一个地方突出显示两批相同的信息是多余的。

搜索的目的是在屏幕上查找文字，因为title或alt 总是显示，我认为用户会更加困惑于以下事实：没有任何内容突出显示，它们只是被带到图像或随机链接/ area。如果图像的figcaption突出显示，则对它们有意义。此外，如果他们不知道要搜索什么，他们将如何搜索标题？ Title和alt没有出现在搜索引擎显示的文字中;用户永远不会知道它，除非他们之前访问过您的网站，在这种情况下，他们会知道在哪里看。

另请注明以下内容：

  

这里的东西是可访问性的，但它似乎并非真的可以访问

可以理解的是，你可能不需要它。但是alt和title会向那些使用屏幕阅读器的人宣读，因此并非完全没用。

Answer 6

您可以在Chrome的开发者工具“元素”标签中使用搜索功能（按F12 - ＆gt;标签“元素” - ＆gt;按CTRL + F）并在搜索中使用XPath。例如：

//*[@title="Google"]

匹配将在代码中以黄色背景显示，当您将其悬停时，其位置将在视图中高亮显示。

Dev Tools "Element" Search with XPath

它与视图相结合，允许您查看元素的位置，它也是Chrome中的开箱即用解决方案（在Chromium 45中针对Ubuntu进行了测试）。

希望它有所帮助！

此致

修改

忘记 - 如果你想在搜索中使用通配符，你也可以这样做：

//*[contains(@title, 'Google')]

编辑2

为后人！进一步的研究表明，使用Firefox-Addon Greasemonkey可以实现您的目标，它允许您通过使用少量JavaScript来自定义网页显示或行为的方式。

我用这个插件进行了几次测试，并且可以用简单的图像实现很好的效果（将ALT属性显示为与图像重叠的DIV），但是对于区域部分，事物变得更加复杂，因为区域区域可以是正方形，圆形和具有无限坐标的多边形以及检索区域本身的确切位置可能有点棘手，但可能会给你或其他人一个起点。

基于ALT工具提示脚本（http://greasemonkey-user-scripts.arantius.com/alt-tooltips-for-firefox），我创建了以下脚本并在Greasemonkey中定义了它：

// ==UserScript==
// @name        Alt Tooltips 2
// @namespace   http://www.biterion.com
// @description Alt Tooltips 2
// @include     *
// @grant       all
// ==/UserScript==

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

function getAreaPosition(element) {
    var position = element.coords.split(',');
    xPosition = position[0];
    yPosition = position[1];

    return { x: xPosition, y: yPosition}
}

var res = document.evaluate("//img",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i, el;
for (i=0; el=res.snapshotItem(i); i++) {

                if(el.alt) {

                    alternate = el.alt

                } else {
                    alternate = "No alt text";
                }

                position = getPosition(el);

                var newDIV = document.createElement ('div');

                newDIV.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position["y"] + ";left:" + position["x"] + "' id=" + i + ">" + alternate + "</div>";
                document.body.appendChild(newDIV);
}

var res2 = document.evaluate("//area",document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var i2, el2;
for (i2=0; el2=res2.snapshotItem(i2); i2++) {

                if(el2.alt) {

                    alternate2 = el2.alt

                } else {
                    alternate2 = "No alt text";
                }

                position2 = getAreaPosition(el2);

                var newDIV2 = document.createElement('div');

                newDIV2.innerHTML = "<div style='position:absolute;background:yellow;color:black;top:" + position2["y"] + ";left:" + position2["x"] + "' id=" + i2 + ">" + alternate2 + "</div>";
                document.body.appendChild(newDIV2);

}

如您所见，脚本首先检测所有“img”和“area”元素，提取其定位并创建一个包含“alt”属性的新DIV元素，然后该属性位于图像的左上角

如上所述，区域的问题是，定位应该相对到父图像而不是像脚本一样绝对，加上应该根据区域形状的类型提取坐标（目前只提取每个区域的两个第一坐标，这将适用于正方形，但对于其他形状肯定会失败）。

希望这会对某人有所帮助:-D

此致