web accessibility issues for those with limited sight

The internet is arguably the greatest repository of information in the world but it is very largely a visual medium. A lot of this information is rendered inaccessible to those with visual impairments, but it need not be. By writing valid, standards-based HTML and by designing pages with accessibility in mind, any webmaster should be able to open their website up to the visually impaired and say "welcome, come in". Here are some of the issues that need to be borne in mind.

full blindness

Blind people access their internet browsers and other applications using screen readers such as Jaws. These programs read information on the screen using synthesised speech. This method of interaction presents real difficulties where standards are not followed and accessibility is not considered. The following factors must be taken into consideration.

clear navigation

The mouse is of no use to a blind person as it relies on vision. Instead, the blind must navigate using the keyboard. It helps therefore to provide anchor links to allow movement within a document, not least of which is the "skip to content" link. Where menus are presented before the content (as here), these are read out by the screen reader. They tend to be very repetitive and whereas a sighted user is able to ignore the repeated menu, a screen reader will begin each page by reading out these options. We therefore add a "skip to content" link before the menu (ours is visually rendered to the right, but is before the menu in the document structure) to allow users to bypass this unnecessary information. In our site we also include links to skip back to the top of the page or to the menu.

meaningful links

Many screen readers will present the links within a web page as a list. Stripped of their visual context and rendered outside of the flow of the document, these links must be made meaningful to the blind user. If I were to invite you to read more about logically structured web pages or click here to view our design portfolio, a visually able user would have no difficulty in recognising the context, however if you closed your eyes and listened to these links being read out of context, you would have no idea of the consequences of clicking through these links. This is why elsewhere in this site, we provide meaningful text in our links.

<alt> tags

Wherever you present an image, unless it is purely decorative, you must include alternative text. This is read out to the blind user and provides them with an indication of what the picture contains. It is especially vital where - as on our home page - writing is rendered in an image. It is most important where the image also acts as a link since without it, the screen reader has no indication of what the link is.

headings

HTML is a structural language that describes documents for publication on the internet and includes several ways to provide structure to a document. Where heading levels are implied by styling rather than declared in the document structure, any user without this visual information will have the potential to be confused.

return to top • return to navigation

visual impairment

In some ways, users with less profound sight impairments are harder to cater for. Good document structure and planning alone are not sufficient: we must ensure that the way we style the document is concordant with best practices too.

text size

There are several ways by which users may magnify the text on their screen: by using special software that gives them a virtual magnifying glass; by using a physical magnification device; and by using the resizing facilities provided by most browsers. Where documents are styled too rigidly, text areas may flow into other text areas when magnified. Additionally, the relative position of different words may change when text is re-sized so this should not be relied on to convey information.

contrast

This is an area which seems to perplex many designers. Contrast between background and foreground is a necessary prerequisite for readability and yet many documents, both online and offline, are presented with low contrast for stylistic reasons. This can make the text difficult to read for normally sighted users and impossible for those with certain eye conditions. It also makes text much harder to read for dyslexic users.

rigidity

Another common mistake is to style text rigidly, that is to assign it a fixed size. Certain browsers are unable to re-size text styled in this way. Text should always be styled with a relative size rather than an absolute size to ensure that it can be read by all.

Putting text inside a picture means that it can't be read by screen reading technology and can't be easily resized visually by software either. You shouldn't put essential text in a picture, however whenever text is put inside a picture, it must be accompanied by full <alt> text and it should be a good size to allow viewers with limited vision to read it.

return to top • return to navigation

colour blindness

There are several types of colour blindness and each presents different considerations when choosing colour schemes. The most common form of colour blindness, Trichromatic Deuteranomaly presents in about 5% of adult males and causes a difficulty in distinguishing red-green contrast. People with this condition are unable to distinguish for instance the 74 "hidden" in the circle to the left here.

Certain background/foreground combinations make it very difficult or impossible for sufferers to distinguish between background and foreground so care must be taken to ensure a colour scheme gives sufficient contrast, for instance by using a colour contrast analyser.

Another consideration is that information should not presented by colour alone. For instance, links that are indicated solely by colour may not be apparent to colour blind users. Another example is a colour diagram - areas of colour that are easily distinguished by normal-sighted people may not be to the colour blind.

return to top • return to navigation