This is a subject that I'm really getting into: accessibility. In designing my newest site I have run into a number difficulties trying to incorperate this and I wish to pass on my new-found experience :P
1. Tables For Design
This is a major no-no. Tables were created to display data in a table, not for designing websites. Unfortunately, before the invention of CSS the use of tables was the only way to display our designs the way we wanted. But since we do have CSS, tables for design should be redundant. This has not happened because too many designers either can't be bothered to learn CSS or are unwilling to change their ways.
There are many good tutorials out there but in my opinion once you learn the basics, the most useful place is the CSS section on
www.w3.org . Go there and find the CSS properties sheet. That's all I ever use now.
2. Tables for data
This is perfectly acceptable as long as it is set out correctly. The W3C have set out many tags for use to utilise to make tables more acceptable but you do not require many of them. Here are a couple of the ones I feel you require plus a brief description:
<table
summary=''> - This provides a brief description of what the table is about. I tend to include a description of the layout as well.
<th id='Monday' scope='col'></th> - <th> is used instead of <td> but only for your tables header cells. In this example I am using a table to create a calendar and this is the first column.
id='Monday' means that everything suggested by
scope (see later) is, in this case, on a Monday.
scope='col' means that this applies to that column.
row can also be used and this, of course, means that the content in
id applies to that row.
3. Abbreviations and Acronyms
First off, what's the difference? Here is a little hint: acronyms are always abbreviations, but not the other way around. This tip is not only good for making your site accessible to people with disabilities, it makes it better for everyone (actually, that can be applied to all of these hints). The two tags you'll need are these:
For abbreviations:
<abbr title='Content'></abbr>
For acronyms:
<acronym title='Content'></acronym>
These will inform the visitor what the words/letters between the tags mean.
4. Link Descriptions
This is very similar to the above only it applies to anchor tags. All you need to do is this:
Home
The very same thing will happen.
5. Forms
Just a few things here: accesskeys, lables and alt. Actually, accesskeys can be used nearly everywhere, but this is their most common use.
Accesskeys allow a key combination to be pressed (usually 'Alt + [letter that you suggest]') and the user will be taken to that area. For forms it will be used in the <input> tags:
<input type='text'
accesskey='u' name='username' />
Alts can also be used within an <input> tag and provide a description as to what the <input> tag is used for.
<input type='text'
accesskey='u' name='username' alt='Type in your username' />
Labels are used to group parts of forms together. Here is an example:
<label for='username'>username: <input type='text' name='name' accesskey='u' alt='Enter your username to log in'
id='username' />
</label>
The
for section in the label tag
must correspond to the
id tag in the input tag. What this does is mean that the words "username" can also be used to access the <input> form.
6. Menus
When most people visit a website, they can look at only the parts they want to. Imagine you couldn't do that and had to read every single bit of the page (the menu, the adverts etc. etc.) every time. It would really grate. So we need to provide a way to skip these parts. How? By the use of links.
At the first word of your main content, imclude this:
<a name='skip'>[Word]
</a>
Now go to the top of the page and find the first thing you can put a link around. Enter this:
<a href='#skip>[Whatever]
</a>
There you have it.
7. Just general stuff
Whenever you make a website, you really should include these parts:
A DOCTYPE - these declare what type of page the browser is loading. I won't go through all the different types right now as they are probably listed on this site.
I use this DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
It is the XHTML Strict. It means I have to be very careful and forces me not to be lazy.
A Character Set - this suggests what erm... charaters the browser should load. The most popular is this:
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
A Default Language - this tells the browser what the language is. It is set by doing this:
<html lang='en'>
8. The End
There, I hope I have enlightened you in your future ways. I feel that the web should be accessible for all and at the moment it just ain't happening. This is my little bit to help things go along and if only one person ever uses the information here, it will be one more person who has tried to make a difference.
This is not everything you will need to know about accessibility, but I never claimed it was. It is just some little hints. There are probably a few errors in it as well, so if I've got something wrong don't hesitate to contact me.
CSS, HTML, XHTML - Code tips, tricks, links
