Chapter 14 - Web WAI

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). Need help? Try KimmyJusTips!