In the last year there have been major changes in tableless design and accessibility. Recently, laws have been passed requiring websites to be accessible and lawsuits have been filed against current sites and developers. Clearly, our world will never be the same again. It’s a case of ‘get up to speed or get out of the race.’ Unfortunately, there have been a lot of misunderstandings about the terms ‘accessible,’ ‘tableless’ and ‘valid xhtml+css.’
A short time ago, I was getting burned out 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. I originally started out with prepress, graphic design and Photoshop work, and I wanted the web to do what I was used to doing in those programs. To say it was frustrating was an understatement. Then one day I came across CSS Zen Garden and my world was never the same again. I have learned all I can about tableless websites and accessibility, and it’s completely changed how do web development.
I think I’m accessible!
I go through several pages of news every day trying to find tips to increase my development skills and I have recently noticed a growing trend with the majority of developers. People seem to think that if they make their site tableless, it automatically means it’s 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. They are just as libel for a lawsuit with a tableless validated xhtml+css site as they are with a nested-table monster of a site. At the same time, a table layout website can pass as accessible. How is this possible?
Take the following steps to ensure that all of your customers can access your site. You’ll 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 that teaches how to make accessible forms is on this page at WebCredible.co.uk. There’s a rule that I follow: If I can use the form completely without using a mouse then it’s accessible.
I thought we were done with tables!?
The second most iΩaccessible 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 that’s not coded properly. There are many extra tags you should insert that you may not have ever heard about, but that are necessary for those who are using an alternative browser. My favorite article on accessible tables can be found here on 456 Berea Street. It covers a lot of the basics so you can make accessible tables in no time at all. I would recommend doing some of your own research on more advanced accessible tables.
Know how to use your page tags
Another easy way to assist users who require accessible technology is to use your page tags correctly. Using them correctly will also make them more semantically correct, which will make your site more popular in search engines. I start laying out my sites in pure text before I even touch CSS. This assures me that everything will look right in screen readers and 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 description 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 your site’s coding as possible since you are responsible for what you put 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 what is happening to those who can’t use it, 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 some people browse the web with their graphics, css and/or JavaScript OFF. Think about how your page will be viewed if this happens. Also, keep in mind that 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, so it will increase with the size increase function within the browsers. You won’t be sued for not having this, but it’s good etiquette for web accessibility.
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. Some people seem to be looking for lawsuits these days, so it’s good to have your bases covered. Here are a couple tools that will help you with all this:
- 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 here.
- Web Developers Toolbar: Once you have Firefox you need to download this toolbar. It’s an absolute must. It’s a good idea to choose CSS > Disable Styles > All Styles. This will allow you to see your page the way it looks with no CSS – which is a setting people often use for 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.
Good luck!
