HTML: Can you hide/ignore text elements from browser Find (CTRL+F)

Question

I've got a web app with a fairly complicated UI, and a portion of the screen reserved for content.

If possible, I would like to make it so that when the user uses the browser's built-in text searching (CTRL+F), any text in the UI is ignored and only the actual content is searched.

Is this doable? CSS and JavaScript are acceptable

(I realize I could probably render the text to a <canvas> but it isn't worth the effort there)

Answer 1

You could inject your UI text using the CSS content property. Generated text like this is not searchable since it is part of the document style rather than the content.

For example:

If you have a button in your UI such as <button id="dosomething"></button> you could add some non-searchable text inside it using the following CSS:

#dosomething:before {
    content: "Click Me";
}

I've created a fiddle to demonstrate how this works: http://jsfiddle.net/3xENz/ Note that it even works with <a> tags.

I recommend you stick with the :before selector because it works in IE8, while the :after selector does not.

If you have a more complex UI element, you can also add another element inside of it to hold the text content. For example:

<div id="complexcontrol"><div class="text"></div></div>

with the following CSS:

#complexcontrol .text:before {
    content: "Click Me";
}

Since screen readers probably won't process these styles properly you will still have the same accessibility problems as you would have with images, but it would be much easier to maintain and also allows a more responsive design.