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

To expand on nullability's answer: You can also store the text in a data attribute like that:

.css-text [data-content]:before {
    content: attr(data-content);
}

<div class="css-text">
    Hello, <span data-content="World"></span>!
</div>

Cf. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access

Answer 2

My suggestion would be to make the area you don't want to be searchable an image or have it use something like flash. The only solution I was able to find was this. But using that is completely up to you.

Answer 3

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.