Appearance

Appearance includes those things that affect the visual presentation of website content, such as cascading style sheets, color, contrast, images and text images. The combination of sound, visuals and interactivity is covered in another section called multimedia.

HTML and Cascading Style Sheets

The introduction of Cascading Style Sheets has enabled the separation of presentation from content in web pages. This has a huge benefit for accessibility. Instead of HTML code dictating the size, shape and color of web page content, browsers can apply their own set of specifications to match their user's needs.

For example, persons can set their own browsers to use a large font for greater readability, and to present white text on a black background for improved legibility. They can also set them to ignore animations, graphics, or javascript if they will interfere with comprehension or download times.

Style sheets also have great benefits for designers, by enabling them to direct text size, color, margins, weight, positioning and actions by definition. Once text has been designated to have a particular style, designers can change any aspect of that style throughout the entire website, rather than revising it one item at a time on each page.

Code Example:

.TopNav {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight: bolder;
text-align: center; .px;
font-weight: bold;
text-align: center;
}

Another reason to use style sheets rather than HTML code is that many of the tags used in the past for appearance have been deprecated (subordinated to other methods, such as style sheets) and will no longer be supported by browsers in the future.

Top Of Page

Color

Another crucial aspect of creating an accessible website is ensuring that colors are not the only means of differentiating content. About ten percent of the adult male population has difficulty distinquishing between colors (most often green and red) and must rely on other means. That is why, for example, indicating that something is important or required by highlighting it in red is not sufficient; some other means must also be used such as an "*" or bold type. The Vischeck website checks readability of websites, or images for their accessibility to persons who are color blind.

Example of color blindness:

Person without color blindness sees:

Person with color blindness see:

Contrast

Contrast is the degree to which objects are differentiated by their color and saturation. Persons with low or impaired vision will benefit when there is sufficient contrast between objects or text and the background of a web page. Be sure when differentiating objects that you use both differences in color and intensity (or saturation).

Top Of Page

Images

A critical rule of accessibility is to describe images using the Alt and Longdesc tags. Screen readers are unable to describe the content of images, and in the absence of alternative text will read the file name (for example: "Images/Title.gif"). This is rarely satisfactory.

Instead, each image should have an Alt tag description when it communicates relevant information. The rule of thumb is for Alt tag content to be long enough to be descriptive and intelligible when read by a screen reader. If additional information would be helpful, but not critical to understanding, it can be contained in a Longdesc tag that links to a separate page, and/or a "D-link", literally a link that follows the image marked by the capital letter D.

Code Example:

<tr>
<td>

<img src="Images/Title.gif" 
alt="Online Accessibility graphic"
longdesc="AOLInfo.htm"
width="450"height="75">
</img>

<A href="AOLInfo.htm">D</A></td>
</tr>

When an image does not contain any relevant information, an alt tag should contain "", or null text, so it will be passed over by the screen reader.

Text Images

Presenting text in images (such as titles like "Home" or "About" in browser buttons) can be problematic for persons using screen enlargement software, since bitmap and gif images deterioriate into blocks of pixels as they are enlarged. It will also be a problem for people who don't have screen enlargement software who rely on their browsers to increase text size--since bitmap and gif images remain the same size.

There are several solutions. Text can be presented without images and controlled through style sheets, so that it will scale without deterioration. Or vector-based images can be used (such as those produced in Illustrator or Freehand) since they are based on algorithms and not pixels. For more details see the section on Vector Images.

Top Of Page

Previous Section: Navigation

Next Section: Content