Forum Moderators: open

Message Too Old, No Replies

Optimising a Website for Handicapped Users

How do I do it? And why?

         

troels nybo nielsen

2:51 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Optimising a website for handicapped users of many different kinds is one of the (many) things that I know too little about. So what do I do? Ask the members of WebmasterWorld, of course. Every imagineable kind of expertise in webmastery is to be found here.

I want the design of my websites to consider ALL relevant handicaps. So the first question must be:

Could we make a list of handicaps that are relevant for a webmaster to consider?

And of course the next question is: How does a webmaster deal with each of these handicaps? And how difficult is it?

Further questions:

Which benefits can I hope to gain by considering users' handicaps? Or put the other way around: How many targetted visitors can I expect to loose by not considering their handicaps?

Ivana

3:09 pm on Nov 5, 2003 (gmt 0)

10+ Year Member



Well, the first thing I can think of is to make sure that the text is good for screen readers like JAWS which is used by blind people. A common mistake is to have 'click here' buttons - click here for what? Imagine you can't see the text and images but only read the text. Test your site by running it through Lynx, the text based browser.

Other than that, I guess you should try to make it as accessible as possible to cater for any type of handicap.

I'll be really interested to hear what people who (unlike me) actually know something about this can suggest.

It's an important issue and should be for all sites. Good luck with it!

ukgimp

3:11 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



[diveintoaccessibility.org...]

Here is a good one.

EBear

3:15 pm on Nov 5, 2003 (gmt 0)

10+ Year Member



troels
I too know very little about this area. The main source seems to be the Web Accessibility Initiative (WAI) [w3.org]. Bobby [bobby.watchfire.com] is also a good software tool that allows you to test how you're doing online.

If you hunt around those two sites I'm sure you'll find what you're looking for.

Oh, and just thought to try my favourite [webdesign.about.com] SE for any search like this.

chadmg

3:24 pm on Nov 5, 2003 (gmt 0)

10+ Year Member



Well, visual impairments are the biggest disability you can optimize for, and the most obvious.

Color Choice
I'm partially color blind so I have some input here. There are many different types of color blindness and there is some website that shows you what people with different colorblindness see. I don't remember the url, maybe someone else here knows. My advice is to not use colors that are close in tint next to each other, especially for text on a background.

Text size
Allow your text to be resized by the browser.

Valid Code
Write valid code using CSS to seperate content from design. Then browsers such as screen readers can ignore styling and just display or read your content.

Site Design
Some of your users might have difficulty with mouse control so having a layout that isn't too small and packed together might help them navigate through your site.

Why optimize for people with disabilities? Because they can be customers too, especially if your site is accessible to them. Don't underestimate word of mouth from a happy customer. A large number of people with disabilities use the internet. Some are immobile and use it as a big part of their lives. As for actual numbers, I can't help you there. Read through the accesibility guidelines and check out [bobby.watchfire.com...] to validate your code.

pendanticist

3:25 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Don't forget to optimize the "alt" tags to reflect what the image is. Be discriptive without repeating words. Avoid cliché terms too.

There were some old threads around here that spoke to color optimizations too.

http://www.visibone.com/colorblind/

http://www.iamcal.com/toys/colors/

These were posted some time back, within the thread I mentioned.

There are several 'reader' software applications out there. Some free and some costly, although I believe the bigger suppliers allow demo use. If you've ever wondered what your site sounds like through a 'reader' I urge you to find out.

We, as sighted people, tend to take sooo much for granted visually and to optimize for those who have disorders is the least we can do.

Pendanticist.

Nick_W

3:28 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Compliance to a strict doctype like xhtml 1 and correct use of CSS would go a long way to getting your site sorted to as it enforces many considerations before you even have to think much further...

Nick

pendanticist

3:38 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Exactly, Nick_W.

Something I've been wanting to do for quite awhile now is CSS [webmasterworld.com]. <- I'll plug it for 'ya. :o

That one link points out that 1-in-12 have deficiencies.

Pendanticist.

troels nybo nielsen

3:40 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ahhhh, seems I struck a goldmine with my questions. But what did I expect? This is WebmasterWorld. Ask a relevant question and lots of help- and skillfull people will almost be stumbling over each others' feet to give you good answers. Thanks to all of you.

pendanticist

5:33 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Our (collectively speaking) Pleasure, I'm sure. :)

But, no matter how many acolades you lay on us, you're still likely to get one more source [webmasterworld.com].

Pendanticist.

Marketing Guy

5:54 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you are going the whole hog with accessibility, then I would recommend not using the word "handicapped" which is apparently derived from a very old sterotype of disabled people being beggars ("hand in cap" / "cap in hand").

Personally I doubt any offence would be taken if you used the term - people arent as nearly as politically correct (or as easily offended) as Governments think we are.

But if you want to stay completely PC, then just thought id point it out! :)

One other term I can remember (this is all from a training session years ago):

"Wheelchair bound" should be "Wheelchair user"

Some general tips for creating an accessible site:

1. Text only version, with a link to it at the top left of each page.

The reason for this is that this is the first part of the screen that screenreaders display.

I worked with someone who used a screenviewer and he parhaps only had the equivalent of 100 * 80 pixels displayed on a full screen.

Screenviews are like microfiche viewers you get in libraries - it's easy to get lost on a page when they move around at high speed.

So.....

2. Navigation - links on the left, top (very top, above banner position) and very bottom - all very important.

They should clearly be links (graphic links are OK if they use web safe fonts and alt tags) - rollovers / background effects, etc dont help.

It's useful if the top and possibly bottom navigation as a line that can be followed to the next "item".

3. Displaying data

If you have tables of data (say a 2 column table, 500 wide), be sure to include a line underneath each table item (ie underline each row) so the user can follow that record / cell to the corrosponding piece of information in the next column.

Although most of us can see both at once, not everyone can (due to magnification effects). If in doubt, cut a 100 by 100 square from a sheet of paper and place the sheet over the screen - the hole you cut out is your users full screen view - can you navigate your site?

Scott :)

Nick_W

6:02 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




Text only version, with a link to it at the top left of each page

I disagree with that, if the markup is sound: You should have no problems.


Navigation - links on the left, top (very top, above banner position) and very bottom - all very important.

Add a 'skip navigation' link to the top of each menu and you've got that section covered. Good advice. -- You can also use absolute positioing to make sure that your 'very top' menu is first in the html but after your masthead if you're that worried about it visually.

Another nice feature is a 'high contrast' version of the page: You can do this using a style sheet switcher

Also, NO FIXED FONT SIZES! ;)

Nick

chadmg

6:29 pm on Nov 5, 2003 (gmt 0)

10+ Year Member



If you're going pc, the current terminology is people with disabilities. They are people first, who happen to have a disability.

Like people with no intelligence, who are probably most of my users.

victor

7:35 pm on Nov 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



And, chadmg, not forgetting the Americans With No Abilities Act:

[theonion.com...]

Victor
(Whose websites validate and are easily accessible mainly because I've read up on pretty much all the sources quoted in earlier messages here, and I take accessibility seriously).

troels nybo nielsen

7:01 am on Nov 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



> If you are going the whole hog with accessibility, then I would recommend not using the word "handicapped" which is apparently derived from a very old sterotype of disabled people being beggars ("hand in cap" / "cap in hand").

Point taken, Scott. Thanks for the information. I try to clean my language from expressions with a negative ring to them.

Marketing Guy

10:07 am on Nov 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Not a big deal IMO - just thought Id point it out.

I worked for a Disability Information Service in Scotland (gov. funded charity project) - part of the training was going through what was "PC" and what was not.

It was an eye opener. I went in believing I did have some common sense, tact and was reasonably well informed.

But I was quite surprised to find that some terms I used weren't PC - eg "handicapped".

However, there are unlikely to be many people who would have a go at you for using the wrong term. Perhaps government sites need to be completely PC because competing political parties would rip them to shreds otherwise.

But for the rest off us - accessibility = important. Political correctness = not so important. :)

Scott

mattur

10:40 am on Nov 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Compliance to a strict doctype like xhtml 1 and correct use of CSS would go a long way to getting your site sorted to as it enforces many considerations before you even have to think much further...

The format used will not help you fix your content e.g. linked images with useless alt text are a problem for visually impaired users and long, dense paragraphs can be a problem for dyslexics. Do you mean that it forces you to enter alt attributes on images(?)

Most folks with a visual impairment are not, and do not see themselves as, "disabled", they are just older people whose vision is not as good as it once was. We'll all be old one day :)

So accessibility is not just for "the disabled", it's for anyone who finds reading on a screen difficult, using a mouse difficult, prefers to use a keyboard etc.

Improving accessibility makes your site easier to use for all visitors, even the fully-abled e.g. using labels on bullets and checkboxes gives a bigger click target for all users, a logical tab order means power users can use the tab key, simple, descriptive link text is easier to understand by everyone etc.

mattur

1:47 pm on Nov 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Oops last para s'posed to say using labels on radio buttons and checkboxes gives a bigger click target for all users, not bullets. :)

ogletree

2:18 pm on Nov 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



As a legaly blind person I can give a few suggestions. First off put alt text on pictures that describe them not just a word. ie. "This is a picture of a boat with a girl on it and she is very pretty Her eyes say I want am having so much fun in Hawaii please come visit me" Nav through your site with the tab key. Do not use CSS so that I can not change my text size. A lot of legaly blind people use screen enlargers but some just use the text size feature in IE. A lot of CSS tricks screw things up. Have a good site map. Have an image at the top of the page with alt text that is a link to a site for blind people and have the alt text say what it is. You can go to [henterjoyce.com...] they own JAWS for some information. I used to train blind people on computers back in the Windows 3.1 days.

It is impossible to be PC in the blind area. It is split up into a few factions. You cannot please both since they have opposing views. I am a blind person and don't call me anything else. I am not impaired or handicapped. At best I have a minor inconvenience.

troels nybo nielsen

11:45 am on Nov 10, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm having problems with using Bobby:

1. They seem to count lines slightly different from the way I do. This may in some cases make it a bit difficult to find the problems mentioned in the report.

2. They report problems that I simply cannot verify. Here are some:

"Do not use the same link phrase more than once when the links point to different URLs. (3 instances) Lines 30, 31, 32"

I have found these three links. They certainly do have different link text.

Right now I have to admit that I simply do not trust the quality of this service. The articles are great, but the tests seem to give unreliable results.

Anybody else having problems with Bobby's tests?

victor

12:32 pm on Nov 10, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've started using Cynthia Says rather than Bobby. I prefer her reports:

[cynthiasays.com...]

EarWig

11:39 pm on Nov 12, 2003 (gmt 0)

asquithea

2:22 am on Nov 18, 2003 (gmt 0)

10+ Year Member



A smattering of practical tips that haven't been covered:

Very specifically, when using CSS, don't specify an exact font size. Use 'medium', 'larger', 'smaller' and so forth. This allows the text-resizing mechanism to work correctly. Of course in a more capable browser like Opera or Firebird, this isn't a problem, since the text is scaled in proportion to the original font size.

Keep the longdesc tag in mind for long descriptions of images, but note that it isn't widely supported yet.

Make sure your page validates for both CSS and HTML, and use the accessibility checkers previously mentioned.

Include an alternate high-contrast stylesheet to modify your default style. Place the link in a prominant place so it's easy to spot, and use a cookie or some other mechanism to allow users to preserve the high-contrast setting as they browse your site. Do not use Javascript. Do not forget to check all font sizes when testing text scaling, including input and textarea fields and buttons. Do not use images to communicate important information. Do not use flash or shockwave for anything unless you can help it.

Do not use table-based layouts -- use a linear layout and style it with CSS. Carefully.

Under no circumstances block access to a site based on browser sniffing. This alienates some users, and may soon be illegal.

Try navigating your site with a keyboard. Firebird's "Find as you type" facility makes this easier. If you have to use a mouse to get things done easily, think again about your layout. Remember attributes like tabindex.

Allow the user to jump past long lists and tables using a hyperlink. Test pages in Lynx or a screen reader to see why this is important.

Generally:

Read the British Government's Disabilities website [disability.gov.uk] carefully. It contains links to and explanations of the relevant legislation, some of which is coming into force very soon.

Contact disability groups for information about enhancing access to your site.

Although you may not gain measurable benefits from enhancing your site for the disabled, it may give you protection against being sued. May I refer you to the Sydney Olympics website disaster [tomw.net.au]? It will also spread the word among the disabled community, and may well improve traffic to your site, although it is unlikely you will be able to determine cause and effect. You can measure usage of alternate stylesheets though.

You should definitely consider blind and partially sighted web-users, but also consider people who cannot use a mouse or keyboard efficiently. They may be limited to using cursor keys in the main, so long registration forms are a no-no.

Other types of handicap
Not all handicaps are physical. A linux user will not have access to Internet Explorer. An office worker may not be allowed to install Mozilla. Consider those who have a slow net connection, or those that do not have Flash or Shockwave installed. Consider those who are working in an office using a computer with sound -- no noisy sound effects please.

And finally...
The "cap-in-hand" allusion to begging is incorrect. The reference is actually to a game of chance. Same rules apply to political correctness as with racism; Don't take some idiot manager's word for it -- contact some disabled people and ask them for their preferred terms.

There are lots of things I haven't mentioned. The stuff above is just one long brain fart.

D_Blackwell

4:12 am on Nov 18, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Are there any methods for replacing those little radio buttons and checkboxes with custom graphics?

Can I turn off the alt "toolbar"? I would be perfectly willing to use alt, but am not going to willingly let the bar pop up in IE and AOL. That is the sole reason I won't use alt unless they are specifically requested.

mattur

12:22 pm on Nov 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Great post, asquithea, though there's a couple of points I feel should be clarified:

The longdesc tag is not widely supported, so it's probably best to have a reasonable description (where appropriate) in the alt tag. See ogletree's post above.

Validation doesn't really affect accessibility - though there are other reasons why one may wish to validate pages.

Table-based layouts do not have to be avoided. A table-based layout can be a linear layout. Remember screen readers work with the page source, so as long as the table content linearizes ok, there's no problem. This is IMHO a really important point to emphasise. Folks may be put off making their sites more accessible if they think layout tables *have* to be avoided. They don't.

Regarding the high contrast option, I'm not sure this really needs to be done at the site level. Folks who need high contrast display will prob. use a user style sheet and/or OS settings - so that every site is high contrast, rather than just the odd one or two.

R1chard

6:34 pm on Nov 19, 2003 (gmt 0)

10+ Year Member



Yeah, gotta agree with the last few replies... Without wanting to patronize anybody, it's worth pointing out that currently around 15% of the world's population has a disability (add another 10% if you include visual difficulties). That's one hell of a lot of people. And consider also the growing number of people using a mobile phone or PalmPilot with monochrome screen to access the web, and laptop users in the field with very slow connections... It all counts as a disability.

Anyway, another attribute that should be considered is ACCESSKEY for links and forms. As well as being important for disabled and the elderly, they are also of great use to able-boded users as well (studies have shown that expert computer users like typists and programmers work much quicker and more efficiently when they use the keyboard to its full potential- where would we be without Ctrl+C to copy, or F7 for spellcheck?). And they also look cool :)

The code is simple enough:
<a href="#" accesskey"4">search</a>
which produces a link that is activated activated by the user pressing Alt+4 on their keyboard. Browser support is universal, from IE4 (released 1997!), to Mozilla (inc AOL, Netscape 6/7, Phoenix, Firebird), and also Amaya, iCab, and Opera.

I remember reading a thread on here back in July about an accesskey standard, and thankfully one has taken off. Started by the UK government, and in the absence of another alternative standard, it's now in use everywhere from councils, healthcare, military, academic and commercial sites all over the world (Europe, USA, Australia, Canada, Africa). The following site-wide numeric navigation keys are proving to be highly consistent:
1 Home Page
2 Skip Nav (or What's new)
3 Site Map (or Printer Version)
4 Search
5 FAQ
8 Terms Of Service
9 Feedback
0 Accesskey List

As for other accessibility points... Just use your initiative and common sense. It depends on the site's content, but obviously graphics are a no-no and should be replaced by text wherever possible. Just test your site on a variety of browsers on a variety of OSs, and under all conditions (adjust your monitor's contrast, turn off Javascript, or try to get somebody to read the site to you over the phone)...