In the last year there have been major changes in tableless design and accessibility. With the recent laws being passed requiring websites to be accessible and lawsuits being filed against current sites, developers now know their world will never be the same again. It’s becoming a case of get up to speed or get out of the race. This race toward understanding these new technologies has created a lot of misunderstanding about the terms accessible, tableless and valid xhtml+css.

It wasn’t too long ago when I was getting burned out on doing the same ol’ coding day after day. I had pushed my nested table skills to the limits and could get a good design, but something always seemed… off. Starting out with prepress, graphic design and Photoshop work for years made me want to push the web to do what I envisioned in my mind like I was accustomed to. To say it was frustrating was an understatement. Then one day I came across CSS Zen Garden and my world would never be the same again. I have been learning all I can about tableless websites and accessibility ever since and has completely changed how do web development.

I think I’m accessible!

I go through several pages of news every day trying to find anything new to increase my development skills and I have recently noticed a growing trend with a majority of developers. People seem to think that if they make their site tableless that it is accessible. This couldn’t be further from the truth. It is a great step toward greater accessibility, but chances are they are missing the mark in several other areas of their site. Another myth is that if their site passes the validation for xhtml and css that their site is accessible as well. You are just as libel for a lawsuit with a tableless validated xhtml+css site as you are with a nested-table monster of a site. Also, a table layout website can pass as accessible as well. How is this possible? Take the following steps to ensure all your customers can access your site and you sleep easier at night knowing you won’t be spending development time in court explaining your ignorance of the topic to a jury.

Have proper form

The most non-accessible code seems to come from forms. Accessible forms aren’t too difficult, but there needs to be a little more care taken in how they are laid out. One of the best articles I’ve come across for learning how to make accessible forms is on this page at WebCredible.co.uk. The rule that I follow for my forms is if I can use the form completely without using a mouse then it’s accessible.

I thought we were done with tables?

The next most unaccessible code comes from our old friend the table. Keep in mind that tables are completely valid to use in xhtml+css layouts. In fact they are the preferred choice if you are presenting tabulated data. The problem is that they are very hard to read if you are using a screen reader and it’s not coded properly. There are many extra tags you should insert that you may not have ever heard about, but is necessary for those using an alternative browser. My favorite article on accessible tables can be found here on 456 Berea Street. It covers enough of the basics to have you started making accessible tables in no time at all. I would recommend doing some of you own research on more advanced accessible tables.

Know how to use your body

Another easy way to help those using assisting technology is to use your page tags correctly. This will also help your site in search engines since it will be more semantically correct. I start laying out my sites in pure text before I even start with any css. This assures everything will look properly in screen readers, cell phones, as well as older browsers (which I filter out into a nicely formatted text only layout). Visit this page on Mezzoblue for a more complete listing of how to correctly use tags within your page.

Can you read my script?

There are other less crucial code styles that can help with accessibility. I urge you to know as much about the coding you put on your site as possible since you are liable for what you are putting on the web. Most Ajax is not accessible, as well as a lot of JavaScript. If you use JavaScript be sure to include a noscript explaining to those who can’t use it what is happening or give a link to a place where they can use it (ie. JavaScript iframes).

Minimalists are people too!

Try to keep in mind that there are people that browse the web with graphics off, css off and/or JavaScript off. Think about how your page will be viewed if this happens. Also many people increase their text size in their browser. Try not to use px for your font sizes since that locks the text sizes in IE. Use em (or %) instead since this increases with the size increase function within the browsers. You won’t be sued for not having this, but it’s good web accessibility etiquette.

Help for you in less than 12 steps

Hopefully this will give you a more complete picture of what it means to create an accessible website. With how people are looking for lawsuits these days it’s good to have all the information you can to cover yourself. A couple tools that will help you with all this is…

• Firefox Web Browser: I doubt there is anybody who doesn’t use this anymore for web development, but if you don’t then download it now here.
• Web Developers Toolbar: Once you have Firefox you need to download this toolbar which is an absolute must. A few tips in this program is to choose CSS > Disable Styles > All Styles. This will allow you to see your page as someone with no css which some people do on slow connections. This also gives a good indication of what screen readers will see. One other great feature is under Information. You can choose to display virtually any tags in your site at a glance without going to your source.