WAI defines guidelines for web developers.
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:
The alt attribute allows you to provide an alternative text for an image:
Sometimes a web browser will not display your images. The reason could be one of many:
If you use the "alt" attribute, most browsers will at least display (or read) the "alt" text.
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.|
Text with extra letter spacing is easy to read.
Text with reduced letter spacing is difficult to read.
Text with good
is easy to read.
Text with reduced
is difficult to read.
Normal fonts are easy to read.
Italic fonts are not so easy to read.
Serif fonts are more difficult to read.
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|
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).|