WAI defines guidelines for web developers.
WAI - The Web Accessibility Initiative
WAI (W3C,1997) is a set of guidelines intended for web developers and designers, about how to make the web accessible to people with disabilities.
The goal of these guidelines is accessibility, but they will also help make web contents available to more browsers (voice browsers, cell phones, hand-held devices) and to more users working in difficult environments (hands-free, strong light, darkness, bad sight, heavy noise).
If your website lacks WAI features (good contrast, resizable text, images with descriptions), people with disabilities will not be able to access your information.
Reasons for making your site more accessible:
- It will improve your reputation and your customer satisfaction
- It will increase your number of visitors
- It will let your visitors stay longer at your site
- It will make your site more usable for people with older equipment
Remember "alt"
The alt attribute allows you to provide an alternative text for an image:
<img src="images/banana.jpg" alt="Banana">
Sometimes a web browser will not display your images. The reason could be one of many:
- The user has turned off the display of images
- The browser is a mini browser without image display
- The browser is a voice browser
If you use the "alt" attribute, most browsers will at least display (or read) the "alt" text.
Don't Use Small Fonts
Some web sites use a small text size just to "squeeze" more text into each page, or to make the page more "stylish".
Again, visitors with different equipment, viewing conditions, or disabilities might have difficulties reading the text.
Don't force your visitors to enlarge the text size every time they visit your site.
Chose the Best Letter and Line Spacing
Text with extra letter spacing is easy to read.
Text with reduced letter spacing is difficult to read.
Text with good
line spacing
is easy to read.
Text with reduced
line spacing
is difficult to read.
Avoid Fancy Fonts
Normal fonts are easy to read.
Italic fonts are not so easy to read.
Serif fonts are more difficult to read.
Avoid Poor Color Contrasts
Black text on a white background, or white text on a black background, is best for people with viewing disabilities, and for display on bad equipment.
Grey text on a light background can give a poor contrast:
| Text color #AAAAAA on white background |
| Text color #666666 on white background |
| Text color #333333 on white background |
| Text color #000000 on white background |
Grey text on a dark background can also give a poor contrast:
| Text color #666666 on black background |
| Text color #AAAAAA on black background |
| Text color #CCCCCC on black background |
| Text color #FFFFFF on black background |
Some combinations - like black and red, black and blue, yellow and green - always strain the eye:
| Black text on a red background |
| Black text on a blue background |
| Yellow text on a green background |
And some combinations are not so bad:
| Black text on a grey background |
| Black text on a light blue |
| Black text on antique white |
| White text on dark blue |
Always Set Background Color
Most web pages use colors for different text elements. Both headers and links are often in a different color from the body text.
As a web designer, you should be aware of the fact that your visitors are able to change their default color preferences.
If you define colors for your web elements (like header and links), you should also define the background color.
If you don't define a background color, your web site might end up with some very bad combination of colors (like light red headers on a red background, or even worse, black text on a black background).