Cascading Style Sheets

WAI Guideline 3 instructs Web designers to "control presentation with style sheets rather than with presentation elements and attributes." This Guideline refers to the techniques used to control the appearance of text and other elements on a Web page. When it first emerged, the strength of the World Wide Web was its ability to convey information in an organized way, and this was appropriate for its initial purpose in research and academia. Over time, however, the Web became a commercial medium, and its function shifted from the organization of information to the visual appearance of screen elements. But because the language of the Web (HTML) was designed to structure information, it was not well-suited to control presentation features such as typography, colors and layout. As a result, Web designers deliberately misused HTML’s structural tags in order to produce visual effects. Meanwhile, software companies that produced Web browsers introduced new features that allowed for greater control over the appearance of screen elements, but required designers to use “tags” that were not part of the standard HTML language. The combination of these influences significantly weakened the efficiency of the Web as a communication medium.

A solution ultimately emerged in the form of Cascading Style Sheets (CSS), a system that gives Web designers power over visual features like typography, colors and layout. While HTML still structures the information on a Web document, CSS is now used to control its appearance. Access Art utilizes CSS for certain design elements, such as text size and color, because of its benefits for accessibility. Individual visitors can change the settings of their browsers to make Web pages easier to read. For instance, someone with a visual impairment can enlarge text on the screen, or a person unable to perceive certain colors can adjust the color scheme.

On other Web sites, it is common to find navigation menus made of graphic images that portray words such as "Home" or "Search." Images are used instead of ordinary text because Web designers often place great value on the ability to control font size, type style and text color. Unfortunately, using graphic images in place of text makes a Web page slower to download, and more difficult to access for people with visual impairments. In contrast, the menus within Access Art are made using simple text, which is the most efficient and accessible type of content available on the Internet. Aesthetic concerns are still in effect, however, so CSS is used to format the size, style and color of these menus.

This sample code shows a typical headline in Access Art. It is created using the HTML headline tag H1, which is a structural element that identifes the most important heading on a page. The resulting headline is displayed below the HTML code.

  <h1>Dialogue with the DIRECTOR</h1>

Dialogue with the DIRECTOR

The second example shows how CSS instructions can be added to the same headline tag. The "style" attribute is used with a variety of statements that modify the font size, type style and text color of the phrase. The HTML H1 element is left in place, so the headline’s structural identity remains the same though its visual appearance has changed.

  <h1 style = "color: CC9900; font-family: Futura Condensed, sans-serif; 
   font-size: 1.8em; font-weight: bold;">Dialogue with the DIRECTOR</h1>

Dialogue with the DIRECTOR