Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I exclude HTML text nodes from the browser's search function?

Is there some ARIA or other way to mark a given HTML node so as to be skipped when the user searches for text on the page (Ctrl+F/Cmd+F)?

Use case: hiding accessible/fallback text from searches

Example: search on this page for the word down. You should only find the instance in the previous sentence, but Chrome will show as many search results as there are answers to this question, plus one, because the question itself, and each answer, have a "d... vote" a link text.

enter image description here

Such search results aren't highlighted, and it can appear frustrating to see "1 of X" in the search box, while there's nothing visible that matches what the user has searched for.

like image 214
Dan Dascalescu Avatar asked Feb 21 '15 21:02

Dan Dascalescu


1 Answers

Not sure if I understood you correctly, but if you develop your own app, not hacking SO source, maybe using of CSS :before or :after pseudo-elements filled with content property will help.

For example, the text ”Hello“ is not found in Safari, Chrome and Firefox when added by the content property:

.text:before {
    content: 'Hello';
}

Opera 12.x finds the word on the page, so if its support makes sense for you, this solution won't work. I also haven't test it in any version of IE, mobile browsers and other infrequent environments.

like image 150
oleggromov Avatar answered Oct 23 '22 00:10

oleggromov