July 11, 2011

Creating a Heading Level 1 for a screen reader

It is best practice that the main topic of a web page is presented in Heading Level 1. What would you do if the main topic is presented to the sighted user in an image? This is quite typical of the websites where the home page of the website displays a banner image and part of the image is text indicated the website's name.

I wrestled with this scenario when re-designing the Disability Services website. There we display a banner image that says Disability Services. This works just fine when you look at, but a blind user reading the page with the screen reader does not get a sense of the page's main topic. This is a problem.

One solution that is used is to wrap the banner image in heading tags and place. In this case, the alternative text that is entered for the banner image gets read by the screen reader and things may appear to work fine.

The problem with this approach is that the banner image may be separated from the main content of the page by other elements such as menus. If this is the case then it confuses the screen reader user since they expect the heading be followed by the main content of the page.

To solve this problem I created a hidden heading level 1 text that is not visible on the screen, but it is read back by the screen reader. First, I inserted a heading level 1 to the top of the main content of the page and I gave the header a special div tag (say hide_heading for example). Then in the css file I created special styling for the this div like so:


This code moves the heading away from the screen for the visual user, but it is still read out by the screen reader software.

With this trick I was able to insert an audible heading level 1 in a location where I needed it without changing the visual design of the web page.