[contents]

W3C

CSS Techniques for WCAG 2.0

W3C Working Draft 15 June 2004

This version:
http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-CSS-TECHS-20040615.html
Latest version:
http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-CSS-TECHS/
Previous version:
http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-CSS-TECHS-20031219.html
Editor:

Abstract

This document provides information to Web content developers who wish to satisfy the success criteria of "Web Content Accessibility Guidelines 2.0" [WCAG20] (currently a Working Draft). It includes techniques, code examples, and references to help authors satisfy each success criterion. The techniques in this document are specific to using Cascading Style Sheets [CSS1] and [CSS2] in conjunction with other technologies such as Hypertext Markup Language content [HTML4], [XHTML1], Scalable Vector Graphics [SVG11], and SMIL [SMIL2]. Deprecated examples illustrate techniques that content developers should not use. The techniques listed in this document are suggestions on how to conform to WCAG 2.0. However, they may not be the only way to satisfy each success criterion.

Editorial Note: Did not list CSS3, since at the time of this draft some modules are in Candidate Recommendation, others are in Last Call and there is not a single URI to reference the various specs. Not sure how we'll want to reference them all without writing a list of 11 references.

Editorial Note: Needs to be clearer that CSS needs to be used in conjunction with other technologies and that this document only presents general CSS concepts. That implies each technology-specific document ought to have a CSS-specific chapter for clarification on use of CSS with each technology.

Note: WCAG 2.0 is a Working Draft and the cross-references between success criteria and techniques are not fully established.

This document will be part of a series of documents published by the W3C Web Accessibility Initiative (WAI) to support WCAG 2.0.

Status of this Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document is prepared by the Web Content Accessibility Guidelines Working Group (WCAG WG) to show how CSS Techniques for WCAG 2.0 might read. This draft is not yet based on consensus of the WCAG Working Group nor has it gone through W3C process. This Working Draft in no way supersedes CSS Techniques for WCAG 1.0 published as a W3C Note September 2000. The content of this draft has not changed significantly since the September 2000 draft, although we have attempted to provide a code example and "task" for every technique. This draft signifies a renewed effort by the WCAG WG to provide guidance on using CSS to create accessible content.

Please refer to "Issue tracking for WCAG 2.0 Techniques for CSS" for a list of open issues related to this Working Draft.

The Working Group welcomes comments on this document at public-comments-wcag20. The archives for this list are publicly available.

Patent disclosures relevant to this specification may be found on the WCAG Working Group's patent disclosure page in conformance with W3C policy.

This document has been produced as part of the W3C Web Accessibility Initiative (WAI). The goals of the WCAG WG are discussed in the Working Group charter. The WCAG WG is part of the WAI Technical Activity.


Table of Contents


Why CSS?

David Woolley - 7 May 2001

Author benefits

  • Increases consistency.

  • Decreases maintenance.

  • Separating markup for content from markup for presentation decreases clutter of markup.

  • Able to create dynamic decorative effects.

To take advantage of these features in HTML:

  • Identify the various terms included throughout a site and create a look for each in your style sheets.

  • Mark up content properly according to its function, then create classes that further specify the function. For example, if you use the p element to set the byline on an article, create a class called "byline".

  • Use the same "class" name for the same concept in all of the style sheets.

  • Use external style sheets rather than embed style information.

  • Use a minimal number of style sheets for your site.

Where style sheets have been optional to display HTML content, they are required to display information from XML applications. As explained in question C.22 of The XML FAQ by Peter Flynn:

  • In HTML, default styling is built into the browsers because the tagset of HTML is predefined and hardwired into browsers. In XML, where you can define your own tagset, browsers cannot know what names you are going to use and what they will mean, so you need a stylesheet if you want to display the formatted text.

Therefore, the differences between CSS for XML and HTML are:

  • define styles for elements and attributes (including class if that is defined in the language),

  • content is marked up for function since there is no hardwired presentation,

  • style information is usually required to be in an external style sheet (always?),

To apply the same external style sheet to both HTML and XML

  • make the HTML class names the same as the XML element names,

  • define each style twice: once with a period (HTML class name) and once without (XML element name). e.g., .copyright, copyright {font-size : .5em}

Editorial Note: test and confirm these statements.

For more information about XML and CSS:

For more information about creating accessible XML applications refer to the XML Accessibility Guidelines.

User benefits

  • Ability to change presentation to suit preferences or needs such as:

    • higher contrast color combination,

    • increase font size,

    • present the information aurally with a preferred scheme (through a screen reader or over the phone),

    • present the information in Braille with a preferred scheme,

    • present the information on a smaller screen (mobile device with a small screen, such as a PDA).

  • Ability to turn off style sheets if have a slow modem connection

In [CSS2], if a user's style sheet contains "!important", it takes precedence over any rule in an author's style sheet. This is different from [CSS1], where the author always has final say over styles. For more information on the !important selector refer to the CSS1 and CSS2 specifications. Also, note that since !important was introduced with CSS1 and is more widely implemented than CSS2, the author might have preference over the user in most of the existing user agents. However, it seems that !important is rarely used in author style sheets and therefore might work as defined in CSS2.

For examples of user's style sheets, refer to Appendix ?? - Example user's style sheets.

Editorial Note: Need to either create this example and include it in an appendix or point to an external resource.

Editorial Note: Turn these into references rather than direct links.

Controlling fonts, colors, text-size

1.1 Specifying fallback fonts

This technique relates to the following sections of the guidelines:

Task:

Always specify a fallback generic font.

Good article by Eric Meyer .

Editorial Note: What is the accessibility issue?

Editorial Note: We don't say anything about selecting readable fonts, specifically. We were supposed to add an issue related to the JIS guidelines and their requirement for selecting readable fonts. (@@add issue to bugzilla)

Example:

@@

BODY { font-family: "Gill Sans", sans-serif }
               
@@better examples in  Eric's article.                 

1.2 Specifying font characteristics

This technique relates to the following sections of the guidelines:

Task:

Instead of using deprecated presentation elements and attributes, use the many CSS properties to control font characteristics.

Use CSS properties to format text (: 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', and 'font-weight'.) Instead of the following deprecated font elements and attributes in HTML: font, basefont, "face", and "size".

Example:

@@

<STYLE type="text/css">
   P.important { font-weight: bold }
   P.less-important { font-weight: lighter; font-size: smaller }
   H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>         

1.3 HTML elements to control fonts

This technique relates to the following sections of the guidelines:

Task:

If you must use HTML elements to control font information, use big and small, which are not deprecated.

Editorial Note: They are not deprecated, but are they used? What reasons would someone give that they "must use HTML elements?"

Example:

@@

1.4 Specifying colors with numbers not names (deprecated?)

This technique relates to the following sections of the guidelines:

Task:

Use numbers, not names, for colors.

Editorial Note: Is this always the case? Deprecated?

@@

Example:

@@

H1 {color: #808000}H1 {color: rgb(50%,50%,0%)}         
Example:

@@

H1 {color: red}

1.5 Specifying colors

This technique relates to the following sections of the guidelines:

Task:

Use CSS properties to specify colors

Use the following CSS properties to specify colors:

  • 'color', for foreground text color.

  • 'background-color' ,for background colors.

  • 'border-color', 'outline-color' for border colors.

  • For link colors, refer to the :link, :visited, and :active pseudo-classes.

Editorial Note: Think this isn't the best fit with success criterion, so put 2nd criterion as "UNKNOWN" to highlight.

Example:

@@

1.6 Create foreground and background contrast

This technique relates to the following sections of the guidelines:

Task:

Ensure that foreground and background colors contrast well.

To test whether color contrast is sufficient to be read by people with color deficiencies or by those with low resolution monitors, print pages on a black and white printer (with backgrounds and colors appearing in grayscale). Also try taking the printout and copying it for two or three generations to see how it degrades. This will show you where you need to add redundant cues (example: hyperlinks are usually underlined on Web pages), or whether the cues are too small or indistinct to hold up well.

Editorial Note: Still want to recommend this test? Instead could recommend brewer palette or other techniques. Move this to General techniques?

1.7 Specify background color if specify foreground color

This technique relates to the following sections of the guidelines:

Task:

If specifying a foreground color, always specify a background color as well (and vice versa).

@@

Editorial Note: Accessibility issue? Can't user agents override?

Example:

@@

1.8 Conveying information through multiple means (not just color)

This technique relates to the following sections of the guidelines:

Task:

Ensure that information is not conveyed through color alone

For example, when asking for input from users, do not write "Please select an item from those listed in green." Instead, ensure that information is available through other style effects (e.g., a font effect) and through context (e.g,. comprehensive text links).

Editorial Note: Refer to discussion list.

Example:

For instance, in this document, examples are styled by default (through style sheets) as follows:

  • They are surrounded by a border.

  • They use a different background color.

  • They begin with the word "Example" or "Deprecated Example".

  • They also end with the phrase "End example", but that phrase is hidden by default with 'display: none'. For user agents that don't support style sheets or when style sheets are turned off, this text helps delineate the end of an example for readers who may not be able to see the border around the example.

Editorial Note: Best example?

1.9 Using relative units of measure for properties that need to change

This technique relates to the following sections of the guidelines:

Task:

Use "em" or % for properties that need to change

Editorial Note: We talked about a new criterion along the lines of, "separate style from layout" or ...something and this seems to be associated with that. @@create bugzilla issue. Also, refer to issues with our use of the terms "relative" and "absolute."

  • Think about what needs to change in size and what doesn't. Raster images, for example, have fixed width and heights. We specify them in the img tag in pixels...Similarly, if I just want to move the text away from the border of the page, setting the padding on the body to 5 px shouldn't be a problem. Text, on the other hand, should always be free to change size (a good reason not to use text in images). But when my text doubles in size, do I need the gutter next to it to double in size as well? Probably not. In fact, doubling the gutter might even decrease the usability of the page.

Charles Munat - 6 May 2001

Font properties that need to change:

  • font size,

  • line height,

Editorial Note: Can we create an exhaustive list? Are there any exceptions?

Example:

Use em to set font sizes

H1 { font-size: 2em }
Example:

Rather than

H1 { font-size: 12pt }

1.10 Using absolute units of measure for properties that do not need to be flexible

This technique relates to the following sections of the guidelines:

Task:

Use px for properties that do not need to change:

  • height and width of raster images,

  • margins,

Editorial Note: Can we create an exhaustive list? Are there any exceptions? Refer to discussion about our use of the terms "absolute" and "relative" compared to definition in specs. Inherit issues identified in previous technique.

@@

Example:

Use absolute length units and percentages for margins otherwise as text increases the margin will widen and space available for text will decrease.

BODY { margin-left: 15px; margin-right: 15px}
Example:

Use absolute length units when the physical characteristics of the output medium are known.

.businesscard { font-size: 8pt }

1.11 Creating stylized text with CSS rather than using raster images

This technique relates to the following sections of the guidelines:

Task:

Use style sheets to style text rather than representing text in images.

Using text instead of images means that the information will be available to a greater number of users (with speech synthesizers, braille displays, graphical displays, etc.). Using style sheets will also allow users to override author styles and change colors or font sizes more easily.

If it is necessary to use a raster-based images to create a text effect the image must be accessible (refer to the section on text equivalents ).

Example:

The image shows the word "Example" in large, red characters. The alt attribute denotes this.

<P>This is an <IMG src="BigRedExample.gif" alt="example"> of what we mean. </P>
Example:

This is how to create the large, red character effect with CSS

@@to add
Example:

This image shows text effects that can not yet be created via CSS

@@to be created

1.12 Formatting and positioning of text

This technique relates to the following sections of the guidelines:

Task:

Use CSS2 properties to control the formatting and position of text

Editorial Note: There is an "and" relationship between this and using structural elements (e.g., in HTML, use the header element and then style with css)

  • Indentation: 'text-indent'. Do not use the BLOCKQUOTE or any other structural element to indent text.

  • Letter/word spacing: 'letter-spacing', 'word-spacing'.

  • White space: 'white-space'. This property controls the white space processing of an element's content.

  • Text direction: 'direction', 'unicode-bidi'.

  • The :first-letter and :first-line pseudo-elements allow authors to refer to the first letter or line of a paragraph of text.

Example:

When letters are separated by whitespace they are read as individual letters. Thus, "H E L L O" will be read by a screen reader as the individual letters, 'H', 'E', 'L', 'L', 'O' rather than the word "hello." Create the same visual effect with the 'word-spacing' property applied to "HELLO". Text without spaces will be transformed effectively to speech.

@@example showing use of "word-spacing
Example:

This example shows how to use style sheets to create a drop-cap effect.

<HEAD>            
   <TITLE>Drop caps</TITLE>            
   <STYLE type="text/css">                  
      .dropcap { font-size : 120%; font-family : Helvetica }    
   </STYLE>            
</HEAD>            
<BODY>            
   <P><SPAN class="dropcap">O</SPAN>nce upon a time...</BODY>         

1.13 Text style effects: case, shadow, decoration

This technique relates to the following sections of the guidelines:

Task:

@@

The following CSS2 properties can be used to style text:

  • Case: 'text-transform' (for uppercase, lowercase, and capitalization).

  • Shadow effects: 'text-shadow'

  • Underlines, overlinks, blinking: 'text-decoration'.

Note. If blinking content (e.g., a headline that appears and disappears at regular intervals) is used, provide a mechanism for stopping the blinking. In CSS, 'text-decoration: blink' will cause content to blink and will allow users to stop the effect by turning off style sheets or overriding the rule in a user style sheet. Do not use the BLINK and MARQUEE elements. These elements are not part of any W3C specification for HTML (i.e., they are non-standard elements).

1.14 Creating rules and borders

This technique relates to the following sections of the guidelines:

Task:

Use style sheets to create rules and borders.

Rules and borders may convey the notion of "separation" to visually enabled users but that meaning cannot be inferred out of a visual context.

Use these CSS properties to specify border styles:

  • 'border', 'border-width', 'border-style', 'border-color'.

  • 'border-spacing' and 'border-collapse' for tables.

  • 'outline, 'outline-color', 'outline-style', and 'outline-width' for dynamic outlines.

Example:

In this example, the H1 element will have a top border that is 2px thick, red, and separated from the content by 1em.

<HEAD>
   <TITLE>Redline with style sheets</TITLE>
   <STYLE type="text/css">   
      H1 { padding-top: 1em; border-top: 2px red }
   </STYLE>
</HEAD>
<BODY>
<H1>Chapter 8 - Auditory and Tactile Displays</H1>
</BODY>         
Example:

If a rule (e.g., the HR element) is used to indicate structure, be sure to indicate the structure in a non-visual way as well. (e.g., by using structural markup). In this example, the DIV element is used to create a navigation bar, which includes a horizontal separator.

<DIV class="navigation-bar">
   <HR>
      <a rel="Next" href="next.html">[Next page]</a>
      <a rel="Previous" href="previous.html">[Prevous page]</a>
      <a rel="First" href="first.html">[First page]</a>
</DIV> 

Generated content

CSS2 includes several mechanisms that allow content to be generated from style sheets:

Generated content can serve as markers to help users navigate a document and stay oriented when they can't access visual clues such as proportional scrollbars, frames with tables of contents, etc.

2.1 Text equivalents for content generated by style sheets

This technique relates to the following sections of the guidelines:

Task:

Provide a text equivalent for any important image generated by style sheets (e.g., via the 'background-image', 'list-style', or 'content' properties).

Editorial Note: isn't this saying the same thing as the other task? can we combine them?

@@

Editorial Note: If it is a background image, does it need a label? There is no exception in 1.1 for background images. Also, is there a way to "explicitly associate" a text equivalent with images included via css?

Editorial Note: Is this an issue for text? Is it always an issue for images? What about decorative images?

Example:

@@

 

2.2 Generated content in the DOM

Task:

Ensure that important content appears in the document object. Text generated by style sheets is not part of the document source and will not be available to assistive technologies that access content through the Document Object Model Level 1 ([[DOM1]).

Editorial Note: remove specific reference to Level 1? Isn't this redundant with the previous technique? Propose we delete it.

@@

Editorial Note: Same question as with previous technique: Is this an issue for text? Is it always an issue for images? What about decorative images?

Example:

The following user style sheet generates the words "End Example" after each example in the document. Examples are contained in div elements marked as class "example."

 
DIV.example:after {        
   content: End Example   
} 
Example:

Users can number paragraphs to help locate current reading position in a document.

 
P:before {           
   content: counter(paragraph) ". " ;            
   counter-increment: paragraph      
} 

2.3 Providing contextual clues in lists

This technique relates to the following sections of the guidelines:

Task:

If lists are marked up correctly, i.e. with ul element for unordered lists and ol element for ordered lists, CSS can be used to provide contextual clues in lists.

Editorial Note: Find real-world example of where this is actually used or would be beneficial.

Example:

This CSS2 style sheet provides compound numbers for nested lists created with either UL or OL elements. Items are numbered as "1", "1.1", "1.1.1", etc.

<STYLE type="text/css">
   UL, OL { counter-reset: item }
      LI { display: block }
      LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>                      
Example:

Until either CSS2 is widely supported by user agents or user agents allow users to control rendering of lists through other means, consider providing contextual clues in nested lists. The following CSS1 mechanism shows how to hide the end of a list when style sheets are turned on, and to reveal it when style sheets are turned off, when user style sheets override the hiding mechanism, or when style sheets aren't supported.

Note: This example does not help the case of wrapping list items. With some more effort, the author could put similar markup at the end of each list item.

Editorial Note: Find a real world scenario where this would be used and create a test file to determine what users think of this proposal

<STYLE type="text/css">
   .endoflist { display: none }
</STYLE>

<ul>
   <ITEM>Paper:
   <ul>  
      <ITEM>Envelopes  
      <ITEM>Notepaper  
      <ITEM>Letterhead  
      <ITEM>Poster paper   
      <span class="endoflist">(End of Paper)</span>
   </ULIST>

   <ITEM>Pens:
   <ul>  
      <ITEM>Blue writing pens  
      <ITEM>whiteboard pens   
      <span class="endoflist">(End of Pens)</span>
   </ULIST>
   
   <ITEM>Fasteners:  
   <ul>    
      <ITEM>paper clips    
      <ITEM>staples    
      <ITEM>Big lengths of rope. 
      <span class="endoflist">(End of Fasteners)</span>
  </ULIST> 

  <span class="endoflist">(End of Office Supplies)</span>

</ULIST>
    

Miscellaneous assortment of techniques

3.1 Creating layout, positioning, layering, and alignment

This technique relates to the following sections of the guidelines:

Task:

Use style sheets to create layout, positioning, layering, and alignment.

Layout, positioning, layering, and alignment should be done through style sheets (notably by using CSS floats and absolute positioning):

  • 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these properties allows users to control spacing without adding additional spaces. Use 'text-align: center' instead of the deprecated CENTER element.

  • 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. With these properties, authors can create space on four sides of an element's content instead of adding non-breaking spaces (&nbsp;).

  • 'float', 'position', 'top', 'right', 'bottom', 'left'. With these properties, the user can control the visual position of almost any element in a manner independent of where the element appears in the document. Authors should always design documents that make sense without style sheets (i.e., the document should be written in a "logical" order) and then apply style sheets to achieve visual effects. The positioning properties may be used to create margin notes (which may be automatically numbered), side bars, frame-like effects, simple headers and footers, and more.

  • The 'empty-cells' property allows users to leave table cells empty and still give them proper borders on the screen or on paper. A data cell that is meant to be empty should not be filled with white space or a non-breaking space just to achieve a visual effect.

Example:

@@

3.2 Null alt-text

Task:

If content developers cannot use style sheets and must use invisible or transparent images (e.g., with IMG) to lay out images on the page, they should use alt=".

Editorial Note: This should be moved to HTML Techniques and perhaps include the general idea in the Techniques Gateway discussion of text equivalents (if not there already).

Example:

Do not use &nbsp; or the text "spacer" as the text equivalent for images.

my poem requires a big space<IMG src="10pttab.gif" alt="&amp;nbsp;&amp;nbsp;&amp;nbsp;">here
<IMG src="spacer.gif" alt="spacer">
<IMG src="colorfulwheel.gif" alt="The wheel of fortune">
         

3.3 Providing good structural markup for graceful degradation

Task:

@@something about using structural markup and document order

Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. The order in which items appear on a screen may be different than the order they are found in the source document.

Editorial Note: "and" relationship with use of structural elements

Example:

The following example demonstrates a few principles:

  1. the text appears visually in the browser in a different order than in the markup.

  2. CSS positioning may be used to create tabular effects. An HTML table element could have been used to create the same effect.

Note that a class is defined for each object that is being positioned. The use of "id" could be substituted for "class" in these examples. "Class" was used because in the live example, the objects are replicated and thus not unique.

    
<head>
   <style type="text/css">      
      .menu1 { 
         position: absolute; 
         top: 3em; 
         left: 0em;     
         margin: 0px; 
         font-family: sans-serif;     
         font-size: 120%; 
         color: red; 
         background-color: white 
      }        
      
      .menu2 { 
         position: absolute; 
         top: 3em; 
         left: 10em;     
         margin: 0px; 
         font-family: sans-serif;     
         font-size: 120%; 
         color: red; 
         background-color: white 
      }      
      
      .item1 { 
         position: absolute; 
         top: 7em; 
         left: 0em; 
         margin: 0px 
      }      
      
      .item2 { 
         position: absolute; 
         top: 8em; 
         left: 0em; 
         margin: 0px 
      }      
      
      .item3 { 
         position: absolute; 
         top: 9em; 
         left: 0em; 
         margin: 0px 
      }      
      
      .item4 { 
         position: absolute; 
         top: 7em; 
         left: 14em; 
         margin: 0px 
      }      
      
      .item5 { 
         position: absolute; 
         top: 8em; left: 14em; 
         margin: 0px 
      }      
      
      #box { 
         position: absolute; 
         top: 5em; 
         left: 5em 
      }     
   </style>
</head>    
<body>    
   <div class="box">      
      <span class="menu1">Products</span>       
      <span class="menu2">Locations</span>       
      <span class="item1">Telephones</span>       
      <span class="item2">Computers</span>       
      <span class="item3">Portable MP3 Players</span>       
      <span class="item5">Wisconsin</span>       
      <span class="item4">Idaho</span>    </div>    </body> 
Example:

The following example shows that the same visual appearance may be created in a browser that support style sheets as well as creating a more meaningful presentation when style sheets are not applied. Structural markup (definition lists) have been applied to the content. Note that the margins have been set to 0 since in HTML browsers, definition lists are displayed with a margin set on the DD element.

    
<head>
<style type="text/css">
<!--
.item1 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 7em;
}

.item2 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 8em;
}

.item3 {
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 9em;
}

.item4 {
   left: 14em;
   margin: 0px;
   position: absolute;
   top: 7em;
}

.item5 {
   left: 14em;
   margin: 0px;
   position: absolute;
   top: 8em;
}

.menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0em;
   margin: 0px;
   position: absolute;
   top: 3em;
}

.menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0px;
   position: absolute;
   top: 3em;
}

#box {
   left: 5em;
   position: absolute;
   top: 5em;
}
-->
</style>
</head>
<body>
<div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
    </dt>
  </dl>
</div>
</body>
 

3.4 Scripting and style sheets

Task:

Editorial Note: This section should discuss ECMAscript, and style sheets. It should reference a real world accessible example. Previously used examples were the MWC example or "the company" (still exist somewhere?). What about examples that use other host languages (not only HTML, but also SVG and MathML)? Demonstrate hide/show content, movement, and changes in color.

Example:

@@

 

3.5 Using ACSS to create auditory presentation

This technique relates to the following sections of the guidelines:

Task:

@@

Editorial Note: If the audio-contrast guideline said something about the ability to turn sounds of our user control of styling sounds, then we could link to a success criterion. As is, linked to guideline but no criteria.

CSS2's aural properties provide information to non-sighted users and voice-browser users much in the same way fonts provide visual information.

The following properties are part of CSS2's aural cascading style sheets.

  • 'volume' controls the volume of spoken text.

  • 'speak' controls whether content will be spoken and, if so, whether it will be spelled or spoken as words.

  • 'pause', 'pause-before', and 'pause-after' control pauses before and after content is spoken. This allows users to separate content for better comprehension.

  • 'cue', 'cue-before', and 'cue-after' specify a sound to be played before and after content, which can be valuable for orientation (much like a visual icon).

  • 'play-during' controls background sounds while an element is rendered (much like a background image).

  • 'azimuth' and 'elevation' provide dimension to sound, which allows users to distinguish voices, for example.

  • 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness' control the quality of spoken content. By varying these properties for different elements, users can fine-tune how content is presented aurally.

  • 'speak-punctuation' and 'speak-numeral' control how numbers and punctuation are spoken, which has an effect on the quality of the experience of aural browsing.

Furthermore, the 'speak-header' property describes how table header information is to be spoken before a table cell.

Example:

This example shows how various sound qualities (including 'voice-family', which is something like an audio font) can let a user know that spoken content is a heading.

    
H1 {           
   voice-family: paul;           
   stress: 20;           
   richness: 90;           
   cue-before: url("ping.au")         
} 

3.6 Access to alternative representations of content

Task:

Provide alternative presentations of attribute values (optional)

Editorial Note: Wording needs work.

CSS2 lets users access alternative representations of content that is specified in attribute values when the following are used together:

  • attribute selectors.

  • the attr() function and the 'content' property'

  • the :before and :after pseudo-elements

Example:

The value of the "alt" attribute for the IMG element is rendered after the image (visually, aurally, etc.). Note that the value of the attribute is displayed even though the image may not be (e.g., the user has turned off images through the user interface).

    
IMG:after {         
   content: attr(alt)      
} 

3.7 Media types

Task:

Optimize presentation for a variety of devices by providing media-specific style sheets

Editorial Note: Wording needs work

The CSS2 "media types" (used with @media rules) allow authors and users to design style sheets that will cause documents to render more appropriately on certain target devices. These style sheets can tailor content for presentation on braille devices, speech synthesizers, or TTY devices. Using "@media" rules can also reduce download times by allowing user agents to ignore inapplicable rules.

Example:

@@

References

Editorial Note: Need to prune this list.

CSS1
CSS, level 1 Recommendation, B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. This CSS1 Recommendation is http://www.w3.org/TR/1999/REC-CSS1-19990111. The latest version of CSS1 is available at http://www.w3.org/TR/REC-CSS1.
CSS2
CSS, level 2 Recommendation , B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 May 1998. This CSS2 Recommendation is http://www.w3.org/TR/1998/REC-CSS2-19980512/. The latest version of CSS2 is available at http://www.w3.org/TR/REC-CSS2.
HTML4
Dave Raggett, Arnaud Le Hors, Ian Jacobs, Eds., HTML 4.01 Specification, W3C Recommendation. (See http://www.w3.org/TR/html401.)
SMIL2
"Synchronized Multimedia Integration Language (SMIL 2.0) ," Jeff Ayars, et al, eds., 07 August 2001.
SVG11
"Scalable Vector Graphics (SVG) 1.1 Specification," Jon Ferraiolo, 藤沢 淳 (FUJISAWA Jun), and Dean Jackson, eds., 14 January 2003.
WCAG10-CSS-TECHNIQUES
"CSS Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds. The latest version of this document is available at http://www.w3.org/TR/WCAG10-CSS-TECHS/.
WCAG20
"Web Content Accessibility Guidelines 2.0", B. Caldwell, W. Chisholm, J. White, and G. Vanderheiden, eds.
XHTML1
"XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)" Steven Pemberton, et al., 26 January 2000, revised 1 August 2002. This XHTML1 Recommendation is http://www.w3.org/TR/2002/REC-xhtml1-20020801/. The latest version of XHTML1 is http://www.w3.org/TR/xhtml1/.