Question

I’m trying to come up with a solution for this problem.

I have a control where the background is an image.

The text that I would like on the form is included in the bg image, however for the purpose of accessibilty, I’d like to include it in an H3 tag.

The problem I have encountered with the solutions I have is that the space is still allocated and I need it to be supressed. It also needs to be Google friendly too.

Here’s 2 solutions I have:

text-indent:-999px;

text-indent:100%;  
white-space:nowrap;  
overflow:hidden;

Any ideas?

Answer 1

Well, first of all

display: none;

But, if you want, there might be other solutions for styling your heading tag

/* on its container */
overflow: hidden;

/* on h3 tag */
float: left;
margin-left: -100%;

or

font-size: 0;
line-height: 0;
height: 0;
overflow: hidden;

You may also need to set/reset few other properties, to clear any other space around your heading, like

margin, padding, white-space, text-indent, border, etc.