now with added Masterweb and IB Geek Girl

spider web Ecanus•net :: Tutorials

Tutorials

These aren't really full blown tutorials – more quick 'n' dirty guides to doing stuff that might save you some time. Click the links below to see them.

Accessibility & design

It's not all about CSS and Standards

Okay, so many people may hear the words 'accessibility' and 'CSS' in the same sentence and run for the hills, but accessibility isn't just about using CSS and standards compliance.

How many blind and partially sighted people and people with low vision use the web? The short answer is, no–one knows. No–one knows how many people use screen readers in conjunction with browsers such as IE, and the statistics don't record people using accessibility features in browsers such as increasing font size etc.

Even using CSS and web standards, it's still possible to make a site that's inaccessible to people with visual problems, and make reading it hard word even for those with perfect vision! Using plain old html and a table layout, though tables can confuse screen readers, it's still perfectly possible to create an aesthetically pleasing site that caters for visitors with visual problems (and of course going that extra mile with CSS helps to make it accessible to screen–reader users as well).

Partially sighted is a 'catch all' description that describes a number of conditions, and different people have different needs. Some may have an extremely limited visual field that means they can only see a very small area of screen at a time, for others part of their visual field may be obscured. Low vision, a term often used to describe people who have a significant visual loss, but have some remaining usable vision, is defined as severely reduced visual acuity (sharpness of vision that can't be corrected by glasses, medicine or surgery) or a significantly obstructed field of vision – or both.

These tips, based on information from the RNIB's "See It Right" pack are can help to make web sites accessible to everyone, not just those with visual difficulties.

Don't rely on colour alone to convey information. People who suffer from colour–blindness can have difficulty using sites due to the colours used sometimes and many partially sighted people have problems with colour perception. You can test your pages by taking a screenshot of your page and copying it into a graphics editors and turning it into a greyscale image, or print it out on a printer set to greyscale. Is the page still clear?

Clear Print – The RNIB's specifications for clear print suggest a minimum type size of 12pt (or 14pt), and 16–22pt for large print – but these guidelines are for printed matter – for the web it's best to use relative font sizes that will re–scale if a user uses the accessibility features of many modern browsers to increase the font size. This also applies to navigation. If you use images for navigation links, they won't resize (unless you're using some clever CSS) so make sure that any text is of a reasonable size.

Font weight – Font weight is also important. Light options are best avoided as there's less font there to contrast with the background.

Font style – avoid highly stylised fonts. Also, italics and capitals are more difficult to read. It's harder to recognise word shapes if all the letters are the same height or set at an angle. Underlining also makes it difficult to recognise the shape of letters. Use them only for short phrases or words to give emphasis (but also consider the use of appropriate html tags, e.g. <em>, <strong> rather than altering font weight).

Leading – Leading is the space between one line of text and the next. If it's too narrow, it's difficult to read. When lines are less clearly separated it's more difficult to find the beginning of the next line – as a general rule, the space between one line and the next should be at least 1.5x the space between the words on a line.

Numbers – make sure numbers are distinct. Blind and partially sighted people can easily misread 3, 5 and 8, and in certain fonts 0 and 6 too.

Line length should be between 60–70 characters per line. If lines are too long or too short it tires the eyes, and using hyphens disrupts the reading flow. The same applies to sentence and paragraph length – not too long or too short.

Word spacing and alignment – keep the same amount of space between each word. Using justified text should be avoided, as should centred text, except for titles/headings, as the start and end of lines occurs in different places, making it difficult to find the beginning of the next line.

Contrast – many blind/partially sighted people also have problems with colour perception. As a general rule, contrast dark against light.

Reversing type – if using white type, make sure the background is dark enough to provide enough contrast – you may need to increase font weight and/or size to make text clear.

General layout – Websites are easier to follow if headings, navigation etc. are consistently in the same place. Leave space between paragraphs as dividing the text up gives the eye a break and makes reading easier, and avoid running text around graphics as each line of text starts in a different place which makes it more difficult to follow, especially for people using magnifiers. Vertical text or graphics with curved text is also difficult to read, especially for people with a limited field of vision, or who use magnifiers.

Columns – make sure that space between columns clearly separates them. If columns are too close together the eye tends to jump to the text in the next column.

Content is obviously important, but so too is white space – too close together and not only will your page look cluttered, but it'll be difficult to read, especially for blind/partially sighted people. Clear white space, headings and horizontal rules can all provide relief from text. So too can graphics, but don't overload your page with graphics and avoid using graphics in the middle of columns as the eye has to skip over it to find the next bit of text.

Contrast is also important in images. Grainy, detailed photos with low contrast can be difficult to make out, and avoid setting text over images, especially if the image isn't even in tone – the same would also apply to background images.

Background – stark/bright colours can cause problems for people with certain conditions – stark white can be very bright. If possible use tones of colours, for example off–white etc. A condition called photophobia (which isn't a fear of light, but an extreme sensitivity to brightness) can make viewing sites with stark white backgrounds extremely uncomfortable for people who suffer from photophobia. Ideally, use a CSS stylesheet switcher, but of course this may not be practical and usually requires JavaScript to function. If you offer the option of changing the colour scheme of your site, offer a range of schemes. Pastel colours often work well as background colours though some people may prefer a high contrast scheme, e.g. black/yellow.

Also remember, if you're setting a colour for text, also set a background colour as if you don't and the user has set a user stylesheet the same colour as your text – all they'll see is nothing!

Other things to consider:

  • Many people find it difficult to read scrolling text (and screen readers can't read it) and constantly moving .gifs can be distracting.
  • In some browsers some people can't distinguish links close together – separate links with a non–linked character or graphic, e.g. | or a graphic bullet.
  • Make sure form labels are clear and understandable and it's clear which form input a label refers to.

Accessible design doesn't mean boring design – even if you can't/won't do CSS and tableless design, there"s still a lot you can do easily to make your site accessible to a wider range of people.

More useful links: