How to Make Your Awesome Website EVEN MORE AWESOME by Making It Accessible

Part 0: Introduction
Whenever feasible, try to design a website to be usable by as many people as possible.  This can include people who cannot see, or hear, or move their mouse well, or even at all.  Here are some hints and tips for accessibility-aware web design.

First off, remember that not all visually impaired folks are blind.  Some need high contrast color schemes, some are color blind, others can use the monitor with very large (or zoomed) fonts.  And some are fully blind, with no way to directly use visually displayed content.

This section is larger than the other two, because web pages are primarily a visual medium.

1. Does your web site make assumptions about how people are going to be looking at your site?  Try looking at your web site with large fonts set in your browser.  Make sure any non-text visual elements (buttons, images, etc) also scale.  Try setting a high contrast color scheme.  Still usable? 
Good!

Did you specify a specific font size, rather than relative size? 
Bad! 
Use a percentage of the default font size in your "font-size" style sheet stylings.

2. How about for people who are color blind?  "Click the green button to proceed, and click the red button to cancel" doesn't work well if someone can't easily tell the difference between the green and red colors you're using.  Try using a site like Vischeck to test how your site
looks for the color blind.  And check We are Colorblind for more
design hints.

The image in the previous step is a full-color version of a common color-blindness test image.  The image in this step is a simulated version of the same image as a red/green colorblind person might see it.


3. How does your website look in Lynx?
Lynx is a text-only web browser that is available for a variety of platforms including Microsoft Windows and various flavors of Unix and Unix-like operating systems (including Mac OS X).
 
Since it's just plain text, Lynx makes it even easy for a user to make a font larger, or to make other adjustments to make the text more readable.  Plus, Lynx is great for using text-to-speech processing if a user cannot use the video display at all.

5. Is your page navigation dependent on Flash or AJAX or something like that?
Try to make your page usable -- some sites with flash-based navigation and media-heavy content will also have a static HTML version of the core information available for users.


6. Do you use good ALT tags?  Make sure your ALT tags give useful information to the user.  "Image of the company mascot - select to proceed to the next page" is a more useful description than "Awesome pic of a happy cartoon dog pointing it's paw to the right."  Do you use imagemaps?  If so, make sure they're client-side and use ALT tags, so that people can use the imagemap without seeing the image.

1. Here's a test: Don't touch your mouse.  How usable is your web page?  Can you tab around to do all the necessary navigation?  If someone has a condition (e.g. some kinds of RSI), they may not be able to use a mouse.  Make sure they can still use your site.

2. How about for folks who have trouble with accurate mouse control? Does your website require fine motor control for navigation?  This can make it hard for some people to use.  If your web page generates pop-up windows or autoscrolls, this can make it harder for these folks to control the display.  Make sure someone with, e.g, hand tremors can still navigate your web site.

Does your page rely on audio, or does it have multimedia presentation?  Consider using subtitles so that users who are Deaf or hearing-impaired can make use of the content as well.

Accessible-aware web design makes it easier for many people to navigate web pages.  It widens your audience and can make using your web page less frustrating and more enjoyable for all users, and can help with search engine indexing.

Accessible design is good design!

Check out Usability.gov for a general overview of usability and user-focused design from the US government, or the W3C's Web Accessibility group's web page for more ideas.