[note]It has been brought to my attention that most screen readers do not send appropriate HTTP_ACCEPT headers, instead just relying on a normal browser to load a page, and then reading its contents. For this reason, the technique detailed below is not a good way to create accessible websites. It still has its uses, and is still a good way to serve appropriate content to those user agents that do send correct HTTP headers, but will not serve text to the majority of screen readers.

Of course, the argument could be made that it is the screen readers' responsibility to identify themselves correctly and send relevant, helpful headers. Thinking over recent weeks since writing this article, I am inclined to once again use this (PHP Image Replacement) technique. There is a system in place for the screen readers and other non-visual user agents to tell a server they cannot accept images. That they don't use that system is their problem, and one they must fix - if not, they are as bad as the designers that fail to correctly markup their websites.[/note]

Fahrner Image Replacement is an interesting idea. Hiding text on a page and replacing it with an image seems, on the face of it, to be an effective way to show a more graphical version of a site to those that can handle it.

Unfortunately, there are problems with the technique. Not least, screen reader programs, those that it is designed in part to help, will hide both text and images from most users using the normal FIR technique. Some people will end up seeing nothing, simply because they have CSS support but images turned off.

There is an alternative, though it does require a good deal of patience. Every time a web page is requested from a site, information about the user is sent with the request. That information is often referred to as "request headers", and among these is one that goes by the name of "HTTP_ACCEPT".

HTTP_ACCEPT is a simple list, from most user agents, telling the server exactly what types of data can be used by the user agent. The types of data that can be displayed differ from one device to another, so where a browser might accept images, a screen reader will not.

Googlebot, for example, sends as the value of its HTTP_ACCEPT header, "text/html,text/plain" (or sometimes "text/html,text/plain,application/*"). This means that Googlebot can only make use of text, not images. Opera, on the other hand, a graphical browser, sends "text/html, application/xml;q=0.9, application/xhtml+xml;q=0.9, image/png, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1" as its HTTP_ACCEPT header. This indicates it can receive, understand, and display, a good deal more than Googlebot.

Which leads to the following PHP function:

function display_image($image, $text) {
if ((strstr($_SERVER['HTTP_ACCEPT'], "image/")) or (strstr($_SERVER['HTTP_ACCEPT'], "*/*"))) {
echo $image;
} else {
echo $text;
}
}
The above function can be used on any PHP based site, to allow you to serve images to those that can used them, and styled text to those that cannot. If a user agent tells the site that it can view images, then it will receive images. If not, it will receive plain text.

It can be called very simply, in the following way (this will seve visual browsers a nice logo, but will show simple text, styled as normal, to all others. Unless a user agent says that it can receive images, it will receive text.

display_image("<img src=\"logo.png\" alt=\"Logo\" />", "<h1>Logo</h1>");
Where an image would normally be displayed, the server will now check to see if the user can receive it. This is done with checking for the string "image/" in the HTTP_ACCEPT header. If found, the user can view images (you could even go so far to check that the user agent can receive the exact type of image you wish to send), and receive them. The function also checks for "*/*" in the HTTP_ACCEPT header, since some of the lazier browsers do not send correct headers with their requests. "*/*" simply means that the browser is saying it can accept and display any type of data.

There are downsides to this option. For example, it is more work than many people are prepared to do on a site to add this in, especially on a site with many images. It means more styling work, and more thought when coming up with a layout.

On the other hand, the above is a very simple way to avoid ever sending an image to someone who cannot see it. It is quite powerful, in that you can use proper image tag attributes, where you cannot with the current crop of image replacement techniques. Those using screen readers will receive an accessible, text-based site. Search engine spiders will see a textual representation of what is on the page. And you need not lose out on any of the beauty and style that graphics can bring to a user with a visual browser.
 

Name:

Location:

Email (hidden):

URL:

Comment:

Remember Me: