2

I have a bunch of tags with background-images properties that I would like to give some content for screenreaders but I obviously can't give it an alt attribute since they are not <img> tags.

Would screenreaders be able to read the content as long as I set the text color to transparent?

I would not like to use display:none or visibility:hidden as I've read that screenreaders will not read those content and can also be penalized by google for hiding content. What are my options to accomplish this?

Lisa
  • 43
  • 3
  • 1
    This also risks search engine penalties - they can detect hidden, transparent, or same-as-background text. In fact, it's a well-established technique for spamming and keyword stuffing, so the engines tend to penalize it severely. – elixenide May 28 '15 at 18:34
  • What's wrong with the old `text-indent` trick? – Paulie_D May 28 '15 at 18:37
  • Google also considers this trick as deceptive and that's what I'm trying to avoid.. "Using CSS to position text off-screen" -https://support.google.com/webmasters/answer/66353?hl=en – Lisa May 28 '15 at 18:48
  • On thinking about this, I'm confused about the requirement. These are empty elements with background images? Surely, if they are **actual content** required by screenreaders, they should be **actual images** in the HTML not in the CSS? – Paulie_D May 28 '15 at 19:53
  • yep that's the problem.. these are empty elements with background images. And you're absolutely right - the way the images were coded was incorrect to begin with but unfortunately I can't go back in time and tell the previous developer to do it correctly at this point without having to redo the entire site :( thanks everyone for your input. I'll have to work with what I have. – Lisa May 28 '15 at 20:04

1 Answers1

3

You could use transparent foreground color - this might have the side effect of drawing a big boundary around the text when a screen reader like VoiceOver is turned on - this can be a problem for a user using a screen reader with a screen magnifier. The top-left positioning technique works but suffers from focus loss problems on some platforms.

The best way to do it for simple text is to use the following CSS class:

.offscreen {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}
unobf
  • 7,158
  • 1
  • 23
  • 36