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 b

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 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 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:

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.