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?
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?
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:
- 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.
- 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.
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.
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:
- SCAN Introduction
- S is for SCANNING
- C is for CONTENT
- A is for ACCESSIBILITY (current page)
- N is for NAVIGATION