Explanation

It has become popular to use hidden text as alt-text for background images. I don't personally encourage or discourage this. But, I always want to be able to give clients the solution that requires the least change from their current design. Sure, you could break one large image into small images with alt-text. Then, surround those images with markup. Then you could use css to remove the visual effects of that markup and get the different pieces of the image back together. That should be fine! However, easier is better when it comes to advising clients. And easier/faster may mean more accessibility overall.

This explores: is it possible to used hidden marked-up text as alt-text for background images without leaving out any users. It must be available:

• For screen reader users.
• For those with CSS turned off.
• For those with custom CSS.
• For those with all images, css images, or background images turned off.
• For those using Windows High Constrast mode. (left Alt + left Shift + Print Screen)

And, it must not appear from behind things when a user resizes the text. Text resize does have advantages for some users over using zoom. And messy hard-to-read layouts can result if text-resize brings bits and pieces of hidden text into view.

In this technique we simply use background images to hide the text. This way, when the background images are not present, no matter the reason, the text will be present. And otherwise, the text is not visible, but is read by screen readers.

Steps Taken

1. For each instance of this marked-up alt-text, you need a div in a sensible location in the reading order.
2. Place the text and markup in the div.
3. Make sure you have good foreground/background contrast.
4. Make sure the text doesn't get cut off when the text size is increased in browsers. Zoom features usually don't cut off the text, but for text-resize features, you might want to size at least one dimension of the div using ems or using no size indication. This way the div size will increase with the text size. Be sure to test; sometimes you need to size both width and height using ems.
5. Once sure the text will be visible without a background image, add a background image that is the same color as the text. It might be just one pixel tiled across the entire background. This will hide the text.
6. Use a z-index that keeps this under any items as needed.
7. Now you can add your background image anywhere you like

Notes on this Example

There is an image at the top of this page that includes the number four. So we're imagining that this image is the image the client wants. And we're imagining it includes text that is essential to the page and so shouldn't be in a long description. We're also imagining that this is text that would be best marked up with html tags, rather than appearing as alt-text.

The div with the image is sized using pixels. The div with the text does not have a width specified, so, with text resize, it could be any size and might not be able to be hidden behind the image.