Web WAI

## Web Building

HOME Web Empty Site Web Database

## PHP Demo

PHP Demo PHP Website PHP Styles PHP Database PHP Navigation PHP Ajax

## ASP Demo

ASP Demo ASP Website ASP Styles ASP Database ASP Login ASP Security ASP Navigation ASP Ajax

## .NET Web Pages

WebPages Demo WebPages Website WebPages Styles WebPages Database WebPages Login WebPages Security WebPages Navigation WebPages Ajax

## .NET Web Forms

WebForms Demo WebForms Website WebForms Styles WebForms Database WebForms Navigation WebForms Ajax

## Web Building

Web Design Web Quality Web WAI Web Validation Web SEO Web TCP/IP

## Web Hosting

Host Intro Host Providers Host Domains Host Capacity Host Email Host Technologies Host Databases Host Types Host E-commerce

# Web WAI

« Previous
Next Chapter »

WAI defines guidlines 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.

| In fact: Your site violates the rights of these people.

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, and 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 close letter spacing is difficult to read.

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.

This font is 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)

| If you don't specify a background color, your text might be invisible.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE