jump to content



Change style:


Basic Accessibility

A minimum level of accessibility is a necessity for any web site in the UK which offers for sale a service or product. (In this case necessity means legal requirement.) This is something that I am very keen on. A benefit of meeting various accessibility requirements is that it will help to improve the usability of a web site.

Why Me?

There are lots of people who are disabled and will benefit from an accessible web site. But the majority of people are not disabled and a web site might easily and carelessly be designed and coded just for this majority.

Then there are lots and lots of people like me. I don't call myself disabled, but I am short sighted and wear glasses. At the end of a long day working on a pc my eyes get tired. So when I am looking at cinema listings, booking a train ticket or buying a book, I want descriptions for images and font sizes which I can increase. Then I do not have to wait for the navigation images and I can make the text easier to read.

If a web site is not accessible then I feel excluded and I will go elsewhere.

Accessible Coding and Design

When designing and coding a web site there are several standards that can be used to improve the accessibility and also the usability of a web site.

Image Descriptions

Image descriptions are very necessary and should be provided for all images which are linked from the HTML page including those which are part of the background or spacer images. The image description provides a text alternative for when an image is missing and also provides an audio alternative for browsers which are reading out the content of a web site. Images which only need a short decription can use the alt attribute while images requiring a much longer description, for instance a graph or flowchart, should use the longdesc attribute to link to a page with a text alternative. As the longdesc attribute is not yet supported by common browsers there should also be a text link using the letter D.

All web sites which need to meet the minimum accessibility level must use descriptions for their images. Also the descriptions must be an accurate and intelligent alternatives to the image. If the image is part of the web site design then the description should describe the image while a functional image of a button needs a description to say what the button is or does. A spacer image needs to have an empty alt attribute of alt="".

Resizable Text

Text is resizable when you can go to the View menu in your browser and choose to increase or decrease the text size and this then changes the size of the text on the web page. This allows the user to choose their preferred text size.

For the web developer there are several units to choose from when setting the size of text on a web site. These units specify the font sizes. Some of these units can be resized in all major borwsers while others can not be resized in Internet Explorer 5 and 6. It is better to choose a type of unit which can be resized. Units which can not be resized in IE are pixels and points. However, these were commonly used in the past due to having a fixed size when nested inside other font sizes in a cascading style sheet. These are absolute font units. It is now preferable to use relative font units such as em's and percentages. The difficulty with using relative units is that the font size is only relative to the font size of the parent element. Thus if a <td> has a font size of 0.9em and contains a <p> which also has a font size of 0.9em, instead of being the same size the <p> will be 0.9em of 0.9em, resulting in a size which appears to be 0.81em.

Using relative font sizes will change how the web design works. The design needs to be flexible and allow enough room for users to increase the text size without resulting in the text overlapping other areas. Variable column widths and heights are good for this but will often conflict with a nice layout design using fixed widths or fixed background images. With some compromising a design can be produced with a fixed layout but still allowing for the text to be increased a couple of times. The design also needs to allow for the gaps around text to change if necessary. The developer can allow for the gaps to resize by using the relative units for some of the padding and margins around text.

As long as the designer considers how areas may change in size, it is quite possible to have a good looking site with resizable text.

Colour Contrast

The colour contrast on a web site should allow people to read the text despite poor eyesight, colour blindness or a poor quality monitor or screen.

Colours on their own should not be used to indicate content or function but should be combined with text or shapes. For instance, buttons to stop or proceed are of no use to a colour blind person if they are coloured red and green but have the same shape and no text. The red and green can appear to be the same colour.

Good colour contrast is a requirement for web sites which need to meet the minimum accessibility level

Full Text Links

Also a requirement for web sites which need to meet the minimum accessibility level is that a text link must contain text to describe the link. You can not simply use "Go" as a link as on its own because it has no information for what the link is going to.

This is useful for people with browsers reading the content of a page, they can hear all the links first without going through a lot of content. This is also good for browsers which will gather all the links from a page and list them by the side in a separate window.

Accessibility Standards

There are two common sets of guidelines for measuring web site accessibility.

The one which the UK and Europe are generally following is that created by the Web Accessibility Initiative people at the W3C. They have produced the Web Content Accessibility Guidelines 1.0 with checkpoints for sites to measure themselve against to reach Priority 1, Priority 2, and Priority 3, with Priority 1 being the minimum requirements. If a site meets the Priority 1 checkpoints then it has Level A conformance, Priority 2 being Level Double-A conformance and Priority 3 being Level Triple-A conformance.

For a legally required basic accessibilty a site should try to meet the Priority 1 checkpoints in the WCAG.

The second set of guidelines comes from the USA and is commonly know as Section 508. It has very similar guidelines.