|
| |
Accessibility and design – it’s not all about css and standards
View related threads:
(in this forum
| in all forums)
|
Logged in as: Guest
|
|
|
womble
Posts: 5528
Joined: 3/14/2005
From: Living on the edge
Status: offline
 |
Accessibility and design – it’s not all about css and s... - 8/7/2005 10:39:11
Accessibility and 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 tem often used to describe people who have a significant visual loss, but have some remaining useable 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 – Front 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. Used 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
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 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 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:
WebABLE – www.webable.com
AWARE Center (part of the HTML Writers Guild) – www.aware.hwg.org
RNIB Campaign for Good Web Design – www.rnib.org.uk/digital/welcome.htm
The RNIB’s Web Access Centre has a wealth of information on accessible web design - http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_resources.hcsp
Visionconnection – a great source of info on vision and low vision, and also a download section where you can download demos of screen readers - http://www.visionconnection.org/VisionConnection/default.htm
_____________________________
~~ "A cruel god ain't no god at all" ~~
|
|
|
|
spitfire
Posts: 424
Joined: 8/6/2005
Status: offline
|
RE: Accessibility and design – it’s not all about css a... - 8/7/2005 11:26:55
quote:
Following up on your point of people who are colourblind there's a pretty nifty site checker here.
And if your site's not online yet, here's a tiny little stand-alone app whose download size belies it's power. It does similar checks and it's even got a colour picker.
http://www.nils.org.au/ais/web/resources/contrast_analyser/index.html
| |
|
|
|
d a v e
Posts: 4087
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: Accessibility and design – it’s not all about css a... - 8/7/2005 12:09:46
know the feeling :)
_____________________________
David Prescott
Gekko web design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
I started writing this a couple of days ago but today it was the perfect excuse to escape for a while because I had "something very important to finish" 