Do you want your website to be accessible for everyone? For those using the popular browsers, PDAs, cell phones, TV-based browsers or screen readers? Of course you do. The following tips will help you to build an accessible website.

1.) Always use css layouts. It separates the content from the presentation, basically the text, the images and other content elements from the markup. You can assign different style sheets to a css layout based document, for eg. for printing, for people with low vision… So the content will not change, just the way it’s displayed. It’s a lot more easier to make the content linearized, this is important to screen reader users because that is the order that screen readers reads the content. You can also modify the the order of the content elements, for example you can move the <div> area holding the main content of the page to the top of your document, without affecting the visual appearance of the page.

2.) Use semantic markup - a markup, that has a meaning. Assign descriptive ids and classes to your <div> areas, wrap your headings into <h1> tags, subheadings into <h2>, paragraphs into <p> tags. Use <strong> instead of <b> and <em> instead of <i> as they are more descriptive. Basically it means that the markup has a meaning for the reader also, not just for the machine - A markup that Everyone Can Understand.

3.) Always validate your markup - a broken markup cannot be fully tested because the output depends on the error correction capabilities of the user agents.

4.) Make your forms accessible - if you are using forms on your site, you should make them also accessible for everyone.
- Form validation - if you are using javascript for validating your form fields, provide also alternative validation method using server side scripting for users who have javascript disabled.
The following sample shows how your source code should look like for an accessible form:

<form name=”sample” id=”sample” method=”post” action=”"><br />
<fieldset><br />
<legend>Sample Form</legend><br />
<label for=”user”>Username</label><br /><br />
<input type=”text” size=”30″ id=”user” value=”username” /><br /><br />
<label for=”password”>Password</label><br /><br />
<input type=”password” size=”30″ id=”password” value=”password” /><br /><br />
<input type=”submit” value=”Submit”><br />
</fieldset><br />
</form>

It’s also a good thing to put initial values in the form fields, like in the above example.

5.) Always use alt text on your images, as well as title attribute. Also if the image is a hyperlink, use title attribute there too and a longdesc link to a page with the description of the image.

To be continued…

There are some pretty good tools for checking your pages for accessibility issues, although even if they say that your page is passed the automated validation, there are checkpoints that you should check your document against manually:

• Cynthia Says Accessibility Validator
• HiSoftware Accessibility Validator
• Site Valet Accessibility Validator
• WebAIM Wave Accessibility Validator
• Watchfire’s WebXACT Validator

This entry was posted on Friday, December 15th, 2006 at 1:49 pm and is filed under Accessibility. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.