Design Forums - Graphic Design & Web Design Forums

Hay guys and gals I thought that I would do a post just on accessible web coding for people with disabilities.

So if you don't know someone with a physical disability for example blindness or poor motor control, due to Parkinson Disease or Multiple sclerosis, can still view your web sites, contact you, buy from you or use your ads, I know who would believe it right.

Just because they are disabled does not mean they are not worth the time to code for as they do have money just like your other visitors and if you don't code for them, and your site is inaccessible, you are in fact breaking the law in 17 countries. This can see you getting sued with out a leg to stand on for thousands.

Right so I will split it into separate sections ~
1 - Links including: [Post 52, Page 6]
1a - Image links,
1b - Client side Image maps.
2 - Forms, [Post 1, page 1]
3 - Images [Post 9, page 1]
4 - JavaScript ~ Including JavaScript links [Post 12, page 2]
5 - XHTML data tables. [Post 23, page 3]
6 - CSS sprites [Post 40, page 4]
7 - High contrast zoom style sheets [Post 50, page 5]
8 - Abbreviations [Post 51, page 6]
9 - Accessible flash web coding [Post 52, page 6]

Forms.
Forms are a great flash point that get in the way of sales.
For example if you have a poorly labelled form how does someone who can not see it know what to enter into each input field?

The screen readers will either take a random guess and try to label it or use the name attribute.

However there is a far better solution.
That lies in the use of the label, fieldset, legend tags and the title attribute.

For example you have a form that has a few textual input tags, a couple of radio input and a textarea tag and a button.
So something like ~

<form action="somefile.php" method="post">
<p>
Enter your name:
<input type="text" name="name" />
</p>
<p>
Your Phone Number:
<input type="text" name="phone" />
</p>
<p>
Gender<br />
<input type="radio" name="gender" />Male<br />
<input type="radio" name="gender" />Female
</p>
<p>
Your Comment<br />
<textarea name="message" cols="20" rows="5"></textarea>
</p>
<button type="submit"><img src="someimage.png" alt="Contact us" /></button>
</form>

Now that is a pretty easy form and most screen readers may not have an issue with it, however you should never leave something that is in your control up to something else to interpret if you can do a better job, also more forms are a lot more complicated.

So we need a way of telling our non sighted users what controls got to which input tag.
So we put label tags around descriptive text near by, give the input tag a unique id and then give the label's for attribute the same value as that id.

Screen readers then associate the correct input tag to the correct control.
For the radio tags we want to group them in the fieldset tag and give their control via the use of the legend and label tags.

Now lets say we wanted to give more useful information on the message textarea about what we want to display in there for that we use the title attribute.

So for example our now newly highly accessible form now looks like this ~

<form action="somefile.php" method="post">
<p>
<label for="name">Enter your name:</label><br />
<input type="text" id="name" name="name" />
</p>
<p>
<label for="number">Your Phone Number:</label><br />
<input type="text" id="number" name="phone" />
</p>
<feildset>
<legend>Your Gender</legend><br />
<p>
<input type="radio" name="gender" id="male" /><label for="male">Male</label><br />
<input type="radio" name="gender" id="female" /><label for="female">Female</label>
</p>
</feildset>
<p>
<label for="comment">Your Comment</label><br /> <textarea name="message" cols="20" rows="5" id="comment" title="please leave your comment"></textarea>
</p>
<button type="submit"><img src="someimage.png" alt="Contact us" /></button>
</form>

However please note in the above example the title attribute would not be needed and would be over kill and just plain annoying.

Hope this helps.
Jaz

Key:
Purple ~ XHTML

I appreciate the effort you've put into this, and I also appreciate the moral grounds in which it should be done. But I think the thought of being sued is simply a theory - has it ever gone to court?

Its like sueing a speaker company because they dont make televisions...

Really I would say it was more like suing someone because they broke The Disability Discrimination Act (DDA), actually, wouldn't you agree?

But I suppose we need to give an example for all the unbelievers amounst us, I mentioned in another thread about
Maguire v Sydney Organising Committee for the Olympic Games (SOCOG) in 1999.

Cite: Maguire v SOCOG 2000 - Wikipedia, the free encyclopedia

Guess what they failed to do?

So to answer your question yes it has, and yes their are other examples, but that is by far the most famous, and the 1 that received the largest payout, to my knowledge. But saying that I can't really say I keep up with who's being sued because of breaching the legal binding DDA that you are bound to by law even if you don't like it.

Regardless to the actual legal reasons to do it, you have the usability reason, reduced server strain/ thus reduced expenditure on bandwidth, Increased rankings for no major effort, increased sales/leads and in my case a good night sleep knowing I have done my job to a high standard, and not slacked off at the end.

Jaz

I stress that I appreciate the effort your putting into this, and also that my knowledge of code is next to nothing, I just find it a bit strange.

Being olympics based makes a little sense, multiple disciplins and multiple countries both first and third world so I undertsnad the necesity for usability.

I think in a real world scale (ie portfolios and small websites etc) its an over exagerated risk. I also understand it can't do any harm and it probably is good practise to conform to these things - my point is simply that a) most the big players dont conform anyway, and b) I simply dont like the examples often used (ie blind people not being able to view graphic design portfolios

I might sue a company that makes prosthetic legs, because I can't use one properly.

Moved to post 55 page 6.

@Br3n and all other non believers, :-)
OK what about the fact that in your graphic design company you have a TOC, which they must agree to.

Let me ask you what happens if you set the height of the font of the TOC page in pts or pxs and not ems?
The font can then not expand/resize.

Now if the site visitor has bad eye sight, a disability covered in the DDA and of which 1 in 7 people suffer from, and they then go to increase the TOC's font size but cant and have to make do and end up giving you money because they did not realize a major part of TOC.

What happens if they then took you to court because of it?
Is it their fault for them not reading the TOC correctly, or yours for not allowing them to?

If I'm honest I'm not sure there has been a court case on that, but I wouldn't fancy your chances TBH.
The DDA is their to protect people with disabilities, we under law, that's law, have a duty to follow it regardless.

The DDA is not just for blind people, that is 1 minority of it, it's for anyone with a disability, now if you cause some one a stroke because you build a flash movie that flashes more than 5 times a second, and they have photosensitive epilepsy, a disability covered by the DDA, you may find yourself getting sued under the law.

The DDA is by far the best thing to hit good business men and women who want ot be unique, because disabled peeps have money too but it's harder for them to spend it and this gives us the guidelines to help them spend it.

I do, as always, respect your opinion and everyone else's of coarse.

Jaz

Excellent post; bookmarked for future resources.

You know I agree with you on every level, so I will leave you lot with some useful links about companies sued over DDA.
Target sued over web accessibility
Travel sites settle New York accessibility investigation
Download the PDF for DRC Formal Investigation Report especially page 29 onwards...

Are my fellow activist, great links, it proves it's an area web masters/mistresses should be worried with IMO.

Images
Poor coded images to a blind user can be just plain annoying, however by improving your images for blind users you improve them greatly for the search engines and thus help them to rank your pages better.

Now there are 3 types of images I will concentrate on.
Normal images, decorative images and data images.

Normal images
An image tag looks like this ~

<img src="path/to/file.png" />

Now all you have to do to make them accessible is add the ALT attribute, so for example ~

<img src="path/to/file.png" alt="Name of the image" />

Now ALT text should ideally not be longer than 180 characters so if it is a picture of a banana just right alt="banana" that's it. Easy.

Decorative images
(including spacer images)
Now not all images need to say anything in the ALT attribute, if the image is a background image for example or if it is just there for the design. However all images be it decorative or not need to have the ALT attribute added.

This is because if a screen reader comes across an image with no ALT attribute what it will do is read the whole file path to the user instead.

So for example you have an image like this ~
<img src="http://www.yoursite.co.uk/path/to/file.png" />

What a blind user will hear is ~
http colon forward slash forward slash www dot yoursite dot co dot uk forward slash path forward slash to forward slash file dot png

Now imagine you have 50 images on a page none with an ALT attribute.
Each time they come across an image something like the above will happen every time so they will not stick around.

To get around it just add an ALT attribute but leave it blank, that way the screen readers just ignore the image and carry on.

So in the above example we would change it to ~
<img src="http://www.yoursite.co.uk/path/to/file.png" alt="" />

And that's it one highly accessible decorative image.

Images containing data
Now these are special cases think pie charts, graphs or any other non decorative image that would need a lot of description to describe it because we want the data to be able to be read aloud to the user but most cases it will be too large to be put in the ALT attribute.

So we add a new attribute to the img tag, that being the LONGDESC attribute, to convey the data.

<img src="path/to/file.png" alt="" longdesc="path/to/description/of/the/images/data.htm" />

We then create a new file in this case called data.htm. In that new file we simply write the description of the image and bobs your uncle it is now accessible to all your users.

Jaz
Key:
Purple ~ XHTML
Green ~ Screen reader output

Very useful stuff! - Simple yet unless I was told I would never know!

Very much appreciated!

No worries, well the thing is it may be a lot of info but you wont need everything all the time, and when you start using it it's like second nature, and the benefits are huge, they don't just make sure you are legally safe.

But I'm glad you found some of it some use.

JavaScript
Now this section can make massive improvements to your site and will be one of the areas were you are more than likely will get sued because of inaccessible web coding.

Even though like screen readers, search engines read some JavaScript they wont read all of it and if you have links that only operate with JavaScript then the search engines may not be able to, or can have difficulties, following them and thus have issues with indexing the content on those URL's.

The simple answer to writing accessible JavaScript is finish the site with no JavaScript, this is how I do it, then add JavaScript to enhance the page afterwards that way you know it works for all users first.

For example if you have a link like either of these ~

<a href="#" onclick="window.open("path/to/file.htm","windowName","listOfAttributes")">Click here to open a new window</a>

<a href="javascript:window.open("path/to/file.htm","windowName","listOfAttributes")">Click here to open a new window</a>

The problem is both will open new windows but neither would be accessible to the search engines nor a blind user.

Now to get around that you change the A tags HREF attribute to the same file you are opening and then include the new window in the ONCLICK attribute and set the link to return false. That way the new window does not load in the same window you are viewing and gives you the same effect, but accessible.

So it would look something like ~

<a href="path/to/file.htm" onclick="window.open("path/to/file.htm","windowName","listOfAttributes");return false">Click here to open a new window</a>

Now again the other main benefit is that the search engines can now get to file.htm and index it whereas before they couldn't.

The same technique can be used for any link they don't just have to open windows.

Now the other main area where there may be an issue is with submitting forms that relie on JavaScript's ONCLICK event to submit it. The way around it is either to apply the same function with in the ONKEYUP event on the button or to move the whole event to the top of the form.

On the top of the FORM tag add the ONSUBMIT event and place the same function in there. That way when screen readers who access links by keying them, rather than clicking them, will still be able to send you the information.

What I personally do is add a browser sniffer to the page then test to see if it is FireFox, Safari, IE or Opera and if it is not turn off JavaScript. Because the other area that can get a non sighted user stuck is when you dynamically add content to the page. This is because screen readers will not know where the new content gets added and it is up to the user to go back to the top of the page and go through it word by word to see if it has.

But if you make sure you build your sites with JavaScript disabled then once it is finished add it you will allow the Search Engines to access more as well as getting rid of trouble areas for screen readers at the same time.

Again hope this helps.
Jaz

Key:
Purple ~ XHTML

Some great info there again Jaz. Maybe we could make this a sticky?

Good thinking Soren, and yes great thread Jaz, I think accessibility is something that can be easily overlooked. Thread is now be a sticky

No worries I'll get on to adding the html table 1 tomorrow I reckon, thanks for the feedback guys.

Jaz