10 replies [Last post]
Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 7 years 48 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Sections:
1 Intro
2 Some Myths
3 Tools of the trade
4 Why bother developing an accessible website?
5 How was it for you?

1 Intro.
People with good vision scan web pages with their eyes, those with serious sight-loss scan pages with their ears. People with very restricted mobility or limited hand/eye co-ordination must use the keyboard only to move around a page. I can think of no better accessibility starting point for you than this article - it is a bit old now but the main points remain pertinent: http://www.stcsig.org/usability/newsletter/0304-observing.html

Accessibility, in practice, depends on one skill above all else: the ability to use semantic, well-formed, valid code. Not only does this give you a solid, stable site, but it will also make the contents accessible to a large number of people. If you want to reach the maximum number of people possible and produce a fully accessible site, then you will need to reach for the Web Content Accessibility Guidelines to be able to decide whether your page may be excluding some visitors: http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Granted, this is hardly recommended bed-time reading (except for insomniacs) but the checklist and the guidelines to which they link should be kept readily available as you design and code the site. The guidelines are not perfect and some of them will be argued over for quite some time, but, they are the nearest thing we have to standards for what can be an esoteric and obscure subject.

My advice is to take the checklist points on board, consider the accessibility features you think you should have and incorporate them at the earliest overall design stage. It can be quite difficult to retro-fit accessibility into a developed site.

2 Some Myths
2.1 ALT text has to be present because it shows as a tool tip on an image.
The last accessibility guru who said that was never heard from again. Alt is supposed to be shown only when the image itself isn’t displayed. IE/Win shows it as a tool tip but that is not the recommended behaviour according to the specifications. Firefox does not display alt text.

Screen-readers notice the img element and say "image" aloud to the listener, then read out the alt text if there is any. Therefore, there is no need to put, image or picture or even logo in the alt text. Alt should be a text equivalent of the image, that is to say, it should convey the same information as the image. If you cannot do that in one or two sentences, you can point to a longer description on another page.

2.1.1 The Title attribute is an ‘advisory title’ which you can use for information. One of its uses is to set it to "" to suppress IE’s habit of displaying the alt attribute (IE uses title instead, if specified). But then Firefox which does not display alt, would have nothing to display in title either.

Title should not contain exactly the same text as alt. Your listener would hear the same thing twice although the words will be visible only once on hover. Thoughtful use of title, however, can enhance your page as it can be used on any element. It can save all the agonies of abbreviations and acronyms (see later). If used with alt="", you can say so much more about the picture without pointing the visitor to another page for a description.

2.2 Nobody surfs with images turned off.
Hello, they do, and not just people with "disabilities". So many websites now use images and background images merely as eye candy. This can make sites very slow to download, particularly on dial-up connections. Some people turn up just for the picture show. Those who only want the information on pages will turn off images, before their hair goes grey. I think it would be unwise, at this stage of the web's life, to make too many assumptions about the inability of ordinary surfers to customise/personalise their browser options.

Let's skip back to images for a moment: I have seen many sites that have a vast amount of "keywords" sitting behind images in the alt attribute. This seems to be an attempt to fool the search engines into giving them a higher ranking - I'm not too sure about whether that works, but this is not about search engine optimisation. Try it yourself on an image in a narrow(ish) column, give the alt text every keyword you can think of. Then view the page in IE - don't forget to use the browser's advanced internet options to turn images off, just like a site visitor would do. Are you happy with that ready ability to break your page? And, just think what it is like to listen to all those keywords that are not meant for an ordinary site visitor anyway. Firefox is a little more accommodating if you check it out in the Web Developer's toolbar by trying "make images invisible" or "hide images". However, the ordinary site visitor would have turned images off through the browser options and would get an entirely different view of the page. The listener still has to go through all that verbal do-da meant for the search engine.

Another test for the Firefox Web Developer Toolbar is to go to the Forum Index. Look at it in the native browser with Load Images checked, notice the placement of the CSSCreator Logo, the Google logo and the little piccy for View Latest Post. Then uncheck Load Images in the browser - you may need to reload the display for each change. Keep that picture in your mind's eye and experiment with the Web Developer Toolbar images button, try "make images invisible" first, then uncheck that and try "hide images". Now you have three slightly different versions of the truth. Apart from this aspect, the Firefox Web Developer's Toolbar is a must for testing the accessibility level of your pages (see under Tools of the Trade).

The Web Accessibility Toolbar for IE is a little more helpful. In its IE Options you can toggle images off and this will give you the same view as the site visitor who turns images off through the browser. Additionally, you can toggle images off through the images button and this highlights where the images would be and what is "behind" them. If it's not against your FF principles you can get the IE toolbar here: http://www.nils.org.au/ais/web/resources/toolbar/

2.3 Abbreviations and acronyms are the same thing.
According to a dictionary they are not the same thing - but never mind the definitions, developers could argue to the end of the century whether W3C is an abbreviation or an acronym and never agree. The real styling issue is that FF and IE support <acronym>, IE does not support <abbr>, whilst FF does. W3C and others suggest some ghoulish ways around this, dragging in spans for each, using both within their respective spans and loads of other work-arounds all of which mean the listener gets to hear "World Wide Web Consortium" three or four times in succession. Additionally, thanks to Hugo, I've only just found out that acronym is to be deprecated.

Well, ignore them all I say - forego the third "A" if it depends on following this guideline and think about your visitors both sighted and without sight. You have a far better weapon.

Enter TITLE (stage left), once again.
Style yourself a suitable class such as .dotted {border-bottom: 1px dotted #000;}. (You can also change the cursor shape, if you must.) Then off you jolly well go:
<p><span class="dotted" title="World Wide Web Consortium">W3C</span></p>.
Hover over the under-dotted W3C. Honour is satisfied and you can forget that guideline!

3. Tools of the trade

aDesigner: http://www.alphaworks.ibm.com/tech/adesigner
You can use this to test the accessibility and usability of Web pages for low-vision and blind people. It's free but for Windows only and from IBM so you are forced into a ridiculous registration procedure. The download is a huge 43.5MB - so go out for a meal while you wait for it. Windows users, who are employing a screen-saver should just open the Start menu and leave it open. This should stop the screen-saver kicking in and possibly interrupting the download.

Having said all that, this is a great tool and I'd be lost without it. I urge you to visit the site, read about the software and check out the screen shots.

Firefox Web Developer's Toolbar: http://chrispederick.com/work/firefox/webdeveloper/
Another great tool if you're a "foxy" person. For the uninitiated in the toolbar's accessibility features, see: http://www.ariadne.ac.uk/issue44/lauke/

WebbIE screen-reader emulator for IE: http://www.webbie.org.uk
Fangs screen-reader emulator for Firefox: https://addons.mozilla.org/extensions/moreinfo.php?id=402
Screen-readers are assistive software that reads a web page aloud. Screen-reader emulators attempt to provide a textual representation of what the screen-reader "sees". Emulators are not self-voicing, in other words, they are silent, although you can use MS Narrator in conjunction with WebbIE. WebbIE is very close to what screen-readers see.

Fangs provides a textual representation of how the page looks to the JAWS screen-reader. I'm sure it's very good but can't test it against JAWS as neither JAWS nor any other screen-reader (that I know of) has a Firefox version (yet). IE got there first!

Be aware these emulators only tell you what they *think* a screen-reader makes of the page. They do not tell you about any errors of commission or omission, they are not validators by any means. They are both buggy, although WebbIE has been around a lot longer and has been able to sort out most of the bugs.

Color contrast analyser
Calculates the differences between your background and foreground colours based on the W3C algorithm. It also helps you to understand how your colours are perceived by people with low vision and those with several different sight conditions such as various forms of color-blindness.
Small stand-alone application that can be downloaded from: http://www.nils.org.au/ais/web/resources/contrast_analyser/index.html

Whilst there are several background/foreground analysers, they do not help with colour perceptions. There's much more about colour in the How To section, here: http://www.csscreator.com/css-forum/ftopic10515.html

W3C is in trouble again. Someone is seriously questioning their colour contrast algorithm. http://english.contrastocolori.org/ Here we go again!

Automated Accessibility Checkers
Use these advisedly. I've found the only issue they can be *relied* on to highlight is the lack of the alt attribute on an image, which a validator would have picked up anyway. The vital parts of an auto checker's report are the warnings it generates, based on identifying some potential issues on your page which it could not auto-check. You should follow these through diligently, read up on the guideline (there may be a link in the checker's report), then apply a very large dose of your own common sense to decide what, if anything, you should do about it. Here are a few:
http://www.cynthiasays.com
http://webxact.watchfire.com
http://www.ocawa.com Main site is French, see top left to switch to English site.
http://wave.webaim.org

4. Why bother developing an accessible web site?
You don't have to - you really don't - it's entirely up to you. If you're turning out something for a commercial organisation, however, you may be imposing serious restrictions on quite a large number of people who could, potentially, be purchasers of your client's products. They could go elsewhere.

Once the Disability Discrimination "law makers" around the world get themselves sorted out, the site owner could be sued either in a Court of Law or a Civil Court. If the site owner loses the case, who else do you think will be expected to shoulder part of the blame or even financial penalty?

Accessibility is being practised quite widely in the UK now. In Australia, I think it's even more prevalent as I haven't found a large commercial Australian site that does not have a good level of accessibility. I haven't checked all around the world - it's just that what is happening in Australia caught my attention. If you intend making a living from web development, it is a very important (and bankable) additional skill. It's not rocket science. If you really do want to add another skill to your set, it just needs coming at from a slightly different direction. Frankly, I found accessibility much easier to pick up than switching from tables to css for layout.

5. How was it for you?
This has been just a taster and I know I have left a lot out. If you want to know more, please say so, it may be worth doing a "bits and pieces - part 2".

Fire away folks - share your thoughts on the foregoing and your personal experiences of developing for accessibility. I'll try to keep an eye on the discussion and help out, if I can, but not if someone else is already running with your problem/issues.

Lorraine

Further reading:

The problem with automated accessibility testing tools
http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/automated-tools.shtml

Improving usability for screen-reader users
http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/screen-readers.shtml

Web accessibility for screen magnifier users
http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/screen-magnifiers.shtml

Working draft and ongoing discussions of Web Content Accessibility Guidelines 2.0
http://lists.w3.org/Archives/Public/w3c-wai-ig/2005JulSep/0000

For your viewing pleasure

I must be careful about listing accessible sites for you to visit - it could lose me some friends among those I leave out. However, you may care to visit some of these very different (generally or almost AA) sites I've come across. As far as I can tell, I don't know any of the people responsible for them. They use accessibility features in different ways and they do not all choose to use all the features "in the book". Most have an accessibility policy or statement, although very few claim any "A"s. Ironically one that claims "AAA" misses/ignores colour contrasts and fails Priority 2 for "AA". Enjoy:

http://www.rebletting.co.uk/
http://www.imagine.org.uk/
http://www.gorki.de/
http://www.albertacentennial.ca/
http://aigaaustin.org/
http://shop.wwf.org.uk/store/Home.aspx
http://www.nationalcrimesquad.police.uk/
http://www.liswa.wa.gov.au/treasures/
http://www.haringey.gov.uk/
http://www.bonsoir.cz/uvod/
http://www.bondsthejewellers.co.uk/

Tags:
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

Accessibility bits and pieces

Wow! That's more than I ever wanted to know. Since I need to know it, you did a Good Thing®.

Thank you,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 1 year 1 day ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Accessibility bits and pieces

Fantastic article, Lorraine. Thanks =D> . The reason that accessibility is being practiced more widely in the UK is because The Disability Discrimination Act has stated for many years that websites providing a service must not discriminate against disabled users, and that Act is now enforceable. The rest of the world will surely follow.

Life's a b*tch and then you die!

larmyia
Offline
Elder
London
Last seen: 5 years 45 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Accessibility bits and pieces

great article Lorraine. Would be interested in part 2 if/when you get time.

well done!

larmyia

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 6 years 11 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Accessibility bits and pieces

just stumbled upon this article. Very good effort, thanks! Laughing out loud

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 7 years 1 week ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Accessibility bits and pieces

Lorraine
Thanks for recomending that adesigner from IBM - excellent little program!

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

jayadamson
Offline
newbie
Last seen: 8 years 41 weeks ago
Joined: 2005-10-10
Posts: 1
Points: 0

FYI - WWF Earthly Goods website

Just came across this post and thought I'd let you know that it was Karova: Stuff and Nonsense who created the WWF Earthly Goods website. A team which I am very proud to be a part of Smile

The Creative Director for that job was Andy Malarkey Clarke.

muzishun
Offline
Enthusiast
Lawrence, KS
Last seen: 6 years 50 weeks ago
Lawrence, KS
Timezone: GMT-6
Joined: 2005-02-08
Posts: 106
Points: 0

Accessibility bits and pieces

Definitely a good article. I look forward to Part 2.

Bill Parrott
Co-Owner and Co-Founder
Eternal Second Designs
http//www.EternalSecond.com/

coronado
Offline
newbie
Last seen: 8 years 41 weeks ago
Joined: 2005-10-07
Posts: 3
Points: 0

Accessibility bits and pieces

great article Smile

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 5 years 26 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

Accessibility bits and pieces

Nice work Lorraine! a very valuable article, everything I wanted to know and them some. I am glad this is a sticky post. Smile

This is my big chance . . . yep, I blew it . . .

konary
Offline
newbie
Last seen: 6 years 27 weeks ago
Joined: 2008-01-14
Posts: 1
Points: 0

larmyia wrote:Cat

larmyia wrote:
Cat food

great article Lorraine. Would be interested in part 2 if/when you get time.
well done!

larmyia

yes , I also think so.