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.

Step 1: Part I: Visually Impaired Folks

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.

Step 2: Visually Impaired Accessibilty Guidelines (cont)

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.

Step 3: Page Navigation for the Visually Impaired

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.

Step 4: Part II: Mobility Impaired Folks

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.

Step 5: Part III: Hearing Impaired and Deaf Folks

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.

Step 6: Conclusion

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.

Comments

[HelenaTroy]

I couldn't read the colourblind pictures either, but that may be because my visual range is about four inches! I have this problem with paintings etc: I have to get so close to see it that it breakes up into meaningless dots and smears.

I have a 42" TV as a monitor, and have to have minumum resolution, AND still need 150% zoom.

Some sites are a real pain, because they use frames, which gives me only a very small keyhgole at the bottom of the screen (lol the Instructables logo takes up about a third of my screen!)

A lot of sites don't take other rez or even zoom factors into account: half the page goes offscreen with no scroll bar to get to that side of the page (I'm still trying to find an email service I can use since Yahoo forced me to go to their "new" layout - 89cm screen width and only 18cm to read emails in!)

But for me the killer is - glaring white background!! Given the screen sie, and that I still have to get within a couple of inches to read a site, the glare does my eyes and my head in. So I would beg of people, use a slightly tinted page colour - nothing jazzy or drastic, just not brilliant white!

[mg0930mg]

:( I can not see the number.

[regisd]

The number in the image for step 1?  It's one of the standard Ishihara color plates for testing for colorblindness.  http://en.wikipedia.org/wiki/Ishihara_color_test has more details.

Have you been tested for colorblindness?  Something like 5-10 percent of the population has some kind of colorblindness.

[mg0930mg]

Yes, I have taken the colorblidness tests in school since first grade, and yes, I am colorblind. I was most likely going to be colorblind. On both sides of my family, all the guys, and some of the girls are colorblind.

[Cekpi7]

i can see colors but i cant read number :P since third grade i think

[mg0930mg]

Then you are colorblind...?

[Cekpi7]

no i cant see some orange and green color

[mg0930mg]

Yeah, get checked again. Color blindness doesn't mean black and white there are different kinds of color blindness.

[Cekpi7]

no i cant see some orange and green color

[Shoukei]

These could really come in handy especially those with dyslexia like me. :P

[kelseymh]

Thank you!  In addition to the Section 508 stuff at Usability.gov, the W3C also has some execellent resources for accessibility in their Web Accessibility Initiative (WAI), a core component of their "Web For All" principle.

On a side note (and a bit of vanity), this is a soap-box I've been shouting from since the Web began...

[regisd]

You're quite welcome.  Computer accessibility issues are a pet peeve of mine.  Computers can make it much easier for people with disabilities (or even temporary injuries) to get the information and other content that they want, but only if designers design for it.