Accessible website starter kit

Accessible design can't be that difficult, can it?

Making images accessible

I'm going to talk here mainly about images but the need to provide text based alternatives applies to other forms of content such as video and audio as well as graphic and pictorial images.

Images fall into two main categories, as far as accessibility is concerned.

Decorative images.
Illustrative images.

Decorative Images

These are often part of the "template" design. They make the page and elements within the page look attractive but they do not directly add to the specific communication of the page. They may indirectly contribute to communication by splitting up content or by providing a context to the communication but that is something that is very difficult to explain or convey in a written description.

This type of imagery should be displayed in your layout as background images to block level elements.

The bubbles in the right hand column of this page are in a div given the class name "rhbg" and in the CSS is this:

.rhbg{ min-height:410px; background:url(../images/bubbles.jpg) top no-repeat;}

I've given the class a min height to provide the room for the image. There is no mechanism for providing a text alternative to the image in XHTML or CSS and the imagery is simply ignored by screen readers. I guess that the idea is that they are just seen as part of the frame in which the main communication takes place.

Illustrative Images

If the image is important for communicating the message of your page then it needs to be in an img tag as part of the page content layer.

These images may contribute important messages that are vital or at least play a part in what the author is trying to convey. From an accessibility point of view you should start off by asking yourself if they are really necessary for any user. If you do decide to include them then you need to provide an alternative text description in the alt tag. If they provide detailed information such as a graph or chart, for example, then you need to provide a description of the information on the chart.

If you do not want to put a visible detailed description close to the chart then you can put a long description into a separate basic HTML page and then provide a link to this in a longdesc attribute in the img tag or provide a standard XHTML anchor link to it. <img src="chart.jpg" width="400" height="400" alt="Chart of important data" longdesc="descriptions/chart.htm" >

Color Contrast

When you are using an image behind text you need to take care to choose an image color that will contrast with the text color over it. It is wise to also add a similar color to the background color rule so that if the image is not displayed for some reason the text is still legible.

When designing a chart consider that some people with limited vision and those with color blindness may only benefit from the content of the chart if you use contrast and color combinations that make the elements of the graph clearly visible. I will discuss color in more depth later.

Images that expand

I must emphasise that this is not part of any accessibility standards but it is a technique that I intend to use more to make layouts remain attractive for all users. If you specify a class name for an image, and give the image a size in em measure, then as you increase the text size using Control+ (Windows) or Command+ (Mac) the image increases in proportion. In order to maintain resolution the trick is to create the image at the largest size that it is likely to be viewed at. The down side to this is a potential waste of bandwidth so I will only be using it sparingly but I can see a number of situations in which it will be useful so that users with limited sight can be able to see more detail in an image. It is also useful for background images for frames and navigation buttons for example that might otherwise break as the text size is increased.

Try increasing the text size and you will see that the image of the fly expands in proportion without losing resolution. This technique does not pass Functional Accessibility Evaluator because it expects to see an image size marked up as width="200px" height="200px" but it does validate as XHTML strict. The FAE gives this error message; "Each img element with width or height less than 8 pixels should be removed; CSS techniques should be used instead.". Since we know that the image is illustrative rather than decorative and is larger than stated I would argue that this can be accepted as passing validation following a manual check. Unless someone tells me different.