« May 2011 | Main | August 2011 »

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.

Private UThink blog

I set up a private UThink blog for myself and allowed a few others to view it. It is nice that there is this option now available.

Setting up a private blog was a bit tricky however.

When I created the new blog I had an option to make it either public or private. I chose private and then it presented me with a field to enter UMN Internet IDs who would have access to the blog. I indicated those and created my first entry. I checked the site, but noticed that the blog was not protected.

I then researched the UThink wiki and learned about what changes to make to templates in order to make the blog private. The instructions there worked well and didn't take a long time to make.