Recent Articles

August 14, 2007 - 5 Simple Steps to Make Your Web Site More Accessible

5 Simple Steps to Make Your Web Site More Accessible

August 14, 2006

One of the biggest misconceptions on the World Wide Web is accessible web sites can not be visually appealing. However, by combining web standards, semantic XHTML, and good CSS code, an accessible web site can be very visually appealing. Here are five very simple steps to make any web site accessible.

1. Validate all your code and check against accessibility guidelines.: This should be the most obvious step in making any web site more accessible. Go through the guidelines for the WAI⁴ and Section 508⁵ and check to make sure your site achieves them. A good goal to strive for is WAI AA accessibility—this usually covers all the checkpoints of Section 508. Level AAA is very hard to achieve for design rich sites, but is the best.
Another very important step in making an accessible web site is to validate all your code. All CSS and XHTML should be validated using the W3C validation service¹. Make sure you are using the latest standards—don’t use depreciated technologies and elements such as HTML 4 or CSS 1.
2. Write it don't draw it!: Nine out of ten times text can be used instead of an image. Not only do images for text hinder blind users and screen readers, but also your search engine placement. Spiders can not read images.
3. Write good content and design for everyone.: People often ask me, “What does good content have to do with blind people?”. The answer is “It’s not just about blind people”. While disability is a huge part of accessibility standards, accessibility is about designing for everyone. This includes people who have low literacy or do not know the language well. Furthermore, if you put lots of industry specific terms in your web site without defining them, people from outside your industry are not going to be able to understand your content. Another tip, always remember to spell check!
4. Keep mobile use in mind.: Again, accessibility is about designing for everyone. This includes everyone regardless of browser or device. According to recent studies², over 21% of web browsing in the US is done via a mobile device (27% in the UK). If you have ever browsed using a mobile device you know that it can be frustrating and hard if the designer has not included “skip links” to skip over navigation and secondary content. Be sure to include these links, you can always hide them using CSS. Simply define them in your CSS code similar to the following:

a.skiplink { position: absolute; margin-left: -9999em; }

This will ensure that mobile users can easily browse your site—and also helps screen readers. Another good practice is to define images in your layout as background images in CSS. This will prevent them from showing up on mobile devices—which will usually render them out of place because the screen is so small. If you are able, look at your site on a mobile device. There are also mobile emulators³ that will let you see how your site renders on a mobile device.
5. Make sure you can view your site without JavaScript.: If you can not view your site with JavaScript turned off in your browser, neither can 12% of the World Wide Web, plus a good amount of mobile users. Make sure you provide alternates for JavaScript code. Also, try to never make vital functions (like navigation) use JavaScript.

External Links

Matthew Ohlman is a free lance web site designer with over eight years of experience designing accessible, standards compliant web sites. You can see his web site at www.ohlman.com.