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. So if your image is of the knowledge revolution then you need to have the alt text “Knowledge Revolution” for those browsing without images. 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.