Jazajay
Active Member
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
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