arguments.callee web design & development blog  

What is Accessibility?

Website Accessibility means making sure the widest possible audience can reach your content. An important distinction lies between making content accessible and making it identical — you do not need to make sure every single visitor receives the exact same user experience when visiting your site.

Why Design for Accessibility?

Accessibility is not just for handicapped visitors; millions of people surf the web from work, school, public libraries, or other public locations. Many of these locations have restrictive firewalls. You cannot know what a particular establishment may or may not allow — some corporate visitors might not only have JavaScript turned off for them, but they may also be unable to change that setting themselves.

Another reason to make your site accessible is the concept of everything as a platform. Websites aren't just for browsers anymore; people may be browsing your site with their TV remote, phone, or Nintendo Wii. Others might be viewing it on screens embedded in their car, their refrigerator, or just about anything else. Why deny yourself those hits?

Samsung's flat panel fridge, with TV and Web connectivity.

Graceful Degradation and Progressive Enhancement

Progressive Enhancement is a design strategy based on the following core principles (paraphrased):

• basic content should be accessible to ALL platforms
• additional content can be offered to compatible platforms
• HTML markup should be sparse and semantic
• CSS styles should be externally linked
• scripted behavior should be unobtrusive
• scripted behavior should be externally linked
• visitors' browser preferences are respected (window size, font size, etc.)

How can you meet these relatively simple goals? By building your website in iterations, or cycles.Iterative design meets the smallest possible set of requirements first, then the next smallest set, and so on, until you have a complete product. Designing a website in iterations involves the following steps:

1. CONTENT: Write your text, and mark it up in meaningful HTML tags that indicate what the content is, rather than how it should be displayed. Use H tags for headers, UL/OL/DL tags for lists, P tags for paragraphs.
2. PRESENTATION: Add layout and positioning via externally linked CSS without changing your markup, other than adding IDs or CLASSes to help target elements. Don't forget to use descendent selectors to avoid cluttering your markup with too many IDs and CLASSes.
3. BEHAVIOR: Use JavaScript or another scripting language to add interactivity to your site. Animations, slideshows, AJAX updates and scrolling feeds.

Graceful Degradation, or "fault tolerance", means that your website can easily deal with browsers that may not support one or more feature. It could be argued that graceful degradation is a byproduct of progressive enhancement — if you use the iterative process described earlier, then visitors without JavaScript enabled will still see your properly styled content. If particular browsers doesn't implement CSS properly (or at all), or images are disabled, or your visitors are blind or deaf, they can still access all of your content, and your semantic HTML means they can still understand the relationships between different parts of your page.

Cross-Browser UI Testing

Browsershots is an excellent service that lets you see your website through the eyes of dozens of browsers across all major operating systems. No emulation is taking place — you get real screenshots from real computers. The one thing you can't completely check with Browsershots is behavior, because you only get static screenshots. However, there are for-pay tools such as CrossBrowserTesting that give you full interactive access to test systems.

When doing your own testing, try to include the following settings to make sure your actual content is accessible. They're in order of most to least common — many of your visitors may have JavaScript turned off, but few typically have CSS or images turned off.

• Turn JavaScript off. Does your navigation still work? Do your forms still work? If parts of your page absolutely MUST use JavaScript in order to function, add them to the page with JavaScript. Otherwise, visitors will assume your site is broken (and they'll be right).
• Turn CSS off. Not all browsers have this option. The easy workaround is to edit your source code and comment out the <link> tag that includes your external CSS file. This is an excellent test to see if your HTML is semantic. Without CSS, how does your content look? Examine font size, order of elements, proximity between content and the headers that describe that content.
• Turn images off. Again, not all browsers have an easy toggle for this. A shortcut is to temporarily rename your actual images folder, that way you don't have to change any of your source code. Without images, is your content still clear? Can you still see and use some form of navigation? If you can't, neither can your visitors. Don't assume this affects only blind people — some phones turn images off by default to speed up load time and minimize data transfer.

Assist Disabled Visitors

Even though accessibility isn't ALL about disabled visitors, obviously they comprise an important audience for the discussion. The US Department of Health & Human Services provides an excellent usability guide featuring a whole chapter on accessibility and disabled visitors.

More in my SCAN web design series:

1. SCAN Introduction
2. S is for SCANNING
3. C is for CONTENT
4. A is for ACCESSIBILITY (current page)
5. N is for NAVIGATION