Web design and Accessibility

  Sir Radfordin 22:41 12 Nov 2003

In the course of doing some user acceptance testing of a website the issue of accessibility has come up, especially in reference to those who are visually impaired. Has anyone actively done anything when designing a site to assist those who are visually impaired?

If so, what was done, and what advice would you give?

If not, then do you think it is something that a responsible web designer should do?

I’m aware that there are some forum members who have some form of disability and so would appreciate any comments they may wish to make. I am also aware there are various legal requirements on service providers to deal with such issues – the site in question doesn’t fit into that category.

For those who do have an interest in this the RNIB (click here) and BOBBY (click here) websites may be good starting points.

Finally, it is not my intention to offend anyone by this post so I trust no-one is.

  Pesala 23:04 12 Nov 2003

click here

Every webdesigner should be striving to make his or her site as easy to read and use as possible, but I think it unreasonable to expect designers to cater for those with serious visual impairments as it would place too many restrictions on the design. Public service websites may have to observe much stricter standards.

  Talented Monkey 01:40 13 Nov 2003

There are many groups of people who have different disabilities, Blind and other visually impared, those who use keyboard only and have difficulty using it, to the extreme of people with sticks attached to their head to punch the keys and so on.

It is a lot harder process than you may think to create a website that is truly accessible but generally if you crack it for one group then all most others should be able to use it.

For any site first and most important task is to produce valid code without valid code many pieces of hardware will fail to load or process your page properly such as text readers. Browsers are very forgiving and flexible when they encounter code errors, however most other things are not.

click here for w3.org who are the top people in web standards and code validation. Unfortunately this rules out dream weaver and FrontPage you are going to have to do a lot of editing or write it yourself.

Here are validators which analyze a web page and see if there are any errors on it. Here s the link for the HTML4.1 Validator click here

one of the essential points of validation code is to have the correct doctype,click here theres a few links down the page on this.

Next up convert your site to CSS and again check with w3 validator click here this is important as most people particularly with eye problems will use their own style sheets and this will over ride all your own settings with out problems, unlike if you use <font> tags etc, which you shouldn’t anyway because it has been made obsolete and the code wont be valid!

Content is important, blind people will have problems navigating through nested tables so keep tables to a minimum, you then also need to put all the correct information in to your tags table tags must have <table SUMMARY =”menu table”> to explain what the table is containing, and for image tags, providing a ALT explaining what the image is , and the height and width of the image. If you are using a image for layout purposes such as a curvy bar end, or transparent gif then alt tag should contain a *
So <img =”car going fast downhill” height=”200” width=”400”> and <alt “*” height=”4” width=”4”> of course you put in all your other info like image path etc.

Another useful aid is to include access keys in links <a href=”home.htm” accesskey=”z”> this will enable both blind and other disabled people or even people who use keyboard to jump to a link on a page or menu when they hold ALT key and letter. You must avoid using letters which are already assigned to windows or browser such as ALT F .

if you have a lengthy menu theres nothing more annoying for a blind person to hear the reader read them out every page, so before any menus place a skip link, skip main menu, or skip to main content.

This is just few points there are others if you find relevant info on he web., try a text only browser, click here if you can understand what the website is and navigate it using a text browser then a blind person will be able to with text reader etc.

One last thing for now.. if you find it hard to incorporate all this into a website, then dotn be afraid to create a separate text only version of your site.

Hope this helps

  Sir Radfordin 09:39 13 Nov 2003

Most of the code Dreamweaver produces gets validated without any problems. Other than not having got round to putting ALT text on images in 183 lines of code the validator found 3 errors from dreamweaver code.

"then dotn be afraid to create a separate text only version of your site"

According to the RNIB this is the worst thing you can do and should be avoided at all costs.

  PurplePenny 17:53 13 Nov 2003

The pages that I've written for Oxford University Library Service (sorry, pages not yet open to the outside world) have to conform to accessibility SENDA standards (Special Educational Needs and Disabilities Act). They recommend using Dreamweaver or straight HTML but NOT FrontPage.

Based on what I've learnt from that this is the advice I would give:

*Use Cascading Style Sheets and put ALL colour and formatting in that (this allows a user to overrule the style that you have applied and replace it with their own. For instance for some with impaired vision a dark background with a pale font is better. For other users a pastel background is better than a white background ... well for everyone actually - it causes less eye strain)
*Don't use colour to signify something (eg "click the green button" - no good if they are all shades of grey)
*Specify the language in the meta-tags
*Always use desriptives (e.g. <ALT> <LONGDESC>)
*No frames
*No Flash
*Supply an alternative to a JavaScript function where necessary
*No nested tables
*Use <LABEL> tags for table entries (because screen readers don't always read the tables in a way that makes sense)
*DON'T use "click here" (some screen readers read all the links separately from the rest of the page and a link that comes out as "click here" without the surrounding text is meaningless)
*Don't use anything that blinks
*Use <H> tags as logical headings not as formatting - e.g. <H2> should actually be a sub-heading of <H1>
*Use <EM> instead of <I>
*Use <STRONG> instead of <BOLD>

The accessibility validation standard is in three stages, rated as A's and each one ranks an extra A. Most places don't go for triple A standard - it is very hard to achieve. At Oxford University we are supposed to achieve A and aim for AA.

There are a few accessibility validators. The problem with Bobby is that it will only validate pages that are already up. There is also Toronto Univ's A-Prompt click here
which can be used locally (but ignore the fact that insists that the language tag should be three characters - two are acceptable and it will be put right in the next version).

Penny (getting down off soap box)

  PurplePenny 17:56 13 Nov 2003

Should make it clear that it is OU not SENDA telling us not to use FP :-)


  Sir Radfordin 18:02 13 Nov 2003

Interesting sutff, thanks for that.

In previous employment had discussions with the web development manager. She was really keen that at all times 'clean' HTML was used in the website. The 'extra' work needed for this paid off when then they started doing Accessibility testing. Most of the requirments had already been met.

It's not the first time FP has been suggested for not producing the best code, I wonder if this will an impact on how successful it is once people start to comply with things like SENDA.

  PurplePenny 18:16 13 Nov 2003

I hadn't thought about the impact on sales of FP but you make a good point. FP was commonly used across Oxford Univesity so the fact that they've now shelled out a *lot* of money for a great many Dreamweaver licences says a lot - not cheap even with the academic discount.


  Sir Radfordin 18:22 13 Nov 2003

Was just aware that FE and others had been singing the praises of FP2003 and saying they expected it to see it used much more widely. Will be interesting to see if any of the 'standards' people ever say a preference.

  Forum Editor 18:36 13 Nov 2003

because I beta tested it for Microsoft - that gave me an opportunity to get to grips with it over a longish period, and to realise that it's streets ahead of many other applications in many respects. That isn't to say it's the perfect application, it's not - any more than DreamWeaver is. They both have their strengths and weaknesses. The new FP is probably better than anything else however when it comes to data-driven sites, and I think that's where we'll see it leading the field when it gets into the market.

Oxford may have been a tad hasty in buying those DreamWeaver licenses - the upgrade costs to FP 2003 would probably have been a good deal cheaper, and FP now has a nifty component that cleans up the HTML before you publish to the server - it removes all the extraneous code.

If you fancy delving a little more deeply into the subject of designing web sites with a view to accessibility for people with special requirements
click here

  s3mt3x 19:56 15 Dec 2003

Your best bet would be to goto a University Library and search the journals for HCI (Human Computer Interaction). You'll get more than you need from there. People do entire degrees in the subject!

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Sea of Thieves Review

Dell Canvas review: the cheap Wacom Cintiq alternative

How to use iMovie for Mac, tips and more

Comment filmer l’écran d’un iPhone ?