Is there a way to search for searchable text in <map...><area ... title="searchable text" /></map> and <img alt="searchable text" />?

Question

Using Ctrl-F in most browsers will allow you to search for text, but only in only the text areas. I would like to search for text in what should be accessible areas that are not necessarily text rendered areas such as <map ...><area title="searchable text" /></map> and <img alt="searchable text" />. Is there a browser or addon that will do what I'm asking for? This stuff is here for accessibility, but it doesn't seem to be really all that accessible (except by mouse hover, which again isn't all that accessible).

NOTE

An answer that is required, does not use something that is decoupled from the view. I.e. searching through the source code isn't an option as this is largely difficult to read (esp on complex pages) and doesn't show where the information is located on the rendered page.

Answer 1

Is there a browser or addon that will do what I'm asking for?

Oh yes. Lynx browser does it. But I guess it's not a solution ;-)

If your question is so, there is no way to override what CTRL+F is doing in your browser.

You can design a custom plugin inside your website, or an addon for your browser. This would be quite easy... but will require other shortcut.

If your main problem is to locate tags based on their alt or title attributes content, this is quite easy in javascript:

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

You can then highlight the matching nodes using jquery or what you want.

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

and scroll to the first result: nodes[0].scrollIntoView();

If you intend to create a browser plugin, you can create your custom a bookmarklet or a custom plugin, and associate a shortcut to this bookmark (see https://github.com/iSunilSV/Chrome-Bookmark-Shortcut)

A simple bookmarklet to find the first match by title or alt attribute and scroll to it will be something like that:

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