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

Question

Is there any ARIA or other way to mark this HTML node so that it is skipped when the user views the text on the page (Ctrl + F / Cmd + F)?

Use case : hide available / backup text from search queries

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

Such search results are not highlighted, and it may seem disappointing to see “1 of X” in the search box, while there is nothing visible that matches what the user was looking for.

Answer 1

I’m not sure if I understood you correctly, but if you develop your own application and do not crack the SO source, perhaps using CSS :before or :after pseudo-elements filled with the content property will help.

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

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

Opera 12.x finds the word on the page, so if its support makes sense to you, this solution will not work. I also have not tested it in any version of IE, mobile browsers and other rare environments.

Answer 2

In this example, you can remove the text “down the voice” (replacing it with   space or an empty line), since the a tag already contains title attributes that are intended for use by screen readers.

Backing up is then only necessary in a text browser such as lynx, which ignores CSS. So you can use markup like

  <a href="#" title="Explicit alternative"> <span class="hidden">Explicit alternative</span> </a> 

Setting display:none in class hidden

If you doubt that your title attribute is sufficient, you can add the aria-label attribute, but this is not necessary.