Copyright © 1999 W3C®
(MIT,
INRIA,
Keio), All Rights Reserved. W3C
liability,
trademark,
document
use and
software
licensing rules apply.
This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.
This document is a W3C Note made available by W3C. This NOTE has been approved by the Web Accessibility Initiative (WAI) Education and Outreach Working Group (EOWG), the Protocols and Formats Working Group (PFWG), and the Cascading Style Sheets and Formatting Properties Working Group.
Publication of a W3C Note does not imply endorsement by the W3C membership. A list of current W3C technical reports and publications, including working drafts and notes, can be found at http://www.w3.org/TR.
CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the HTML in their documents, making the documents more accessible at the same time.
CSS allows precise control over spacing, alignment and positioning. Authors can thereby avoid "tag misuse" - the practice of misusing a structural element for its expected stylistic effects. For example, while the BLOCKQUOTE and TABLE elements in HTML are meant to mark up quotations and tabular data, they are frequently used to create visual effects instead such as indentation and alignment. When specialized browsing software such as a speech synthesizer encounters elements that are misused in this way, the results can be unintelligible to the user.
In addition to preventing element misuse, style sheets can help reduce image misuse. For instance, authors sometimes use 1-pixel invisible images to position content. This not only bloats documents, making them slow to download, but can also confuse software agents looking for alternative text (the "alt" attribute) for these images. CSS positioning properties mean that invisible images are no longer required to control positioning.
CSS provides precise control over font size, color, and style. Some authors have used images to represent text in a particular font when they are uncertain of the availability of the font on the client's machine. Text in images is not accessible to specialized software such as screen readers, nor can it be cataloged by search robots. To remedy this situation, the powerful WebFonts of CSS allows users much greater control of client-side font information. With WebFonts, authors can rely on fallback mechanisms on the client when the author's preferred fonts are not available. Fonts can be substituted with more accuracy, synthesized by client software, and even downloaded from the Web, all according to author specification.
CSS allows users to override author styles. This is very important to users who cannot perceive a page with the author's chosen fonts and color. CSS allows users to view documents with their own preferred fonts, colors, etc. by specifying them in a user style sheet.
CSS provides support for automatically generated numbers, markers, and other content that can help users stay oriented within a document. Long lists, tables, or documents are easier to navigate when numbers or other contextual clues are provided in an accessible manner.
CSS supports aural style sheets, which specify how a document will sound when rendered as speech. Aural style sheets (or "ACSS" for short) allow authors and users to specify the volume of spoken content, background sounds, spatial properties for sound, and a host of other properties that can add effects to synthesized speech analogous to those achieved with styled fonts for visual output.
CSS provides more precise control over the display of alternative content than HTML alone. CSS2 selectors give access to attribute values, often used to provide alternative content. In CSS2, attribute values may be rendered in a document along with an element's primary content.
At the publication of this NOTE, widely deployed browsers do not implement CSS consistently. However, the latest generation of browsers from a number of vendors demonstrates solid implementations of most of CSS1 and much of CSS2, and implementations continue to improve.
Obviously, the benefits of the features described in this document will not be realized without proper implementation of CSS1 and CSS2. Part of designing an accessible document with CSS involves ensuring that the document remains accessible when style sheets are turned off or not supported.
Until most browsers support CSS consistently, content developers may still create accessible documents that mix supported features of CSS with some presentation features of HTML. Documents that use HTML presentation features instead of CSS must transform gracefully. For example, tables used for layout must make sense when rendered serially.
The following is a list of CSS2 features that affect accessibility (and the sections where defined in the CSS2 specification). The sections following the list elaborate on how these features affect accessibility.
Note. Property names are indicated by back quotes, the convention used by the CSS1 and CSS2 specifications.
CSS2 allows authors to control the visual placement of content on the page through text indentation, margins, floats, and absolute and relative positioning. By using CSS properties to achieve visual effects, authors can write simpler HTML and eliminate images and non-breaking spaces ( ) used for positioning.
The following properties give control over spacing, alignment, and positioning:
In order to ensure that users can control styles, CSS2 changes the semantics of the "!important" operator defined in CSS1. In CSS1, authors always had final say over styles. In CSS2, if a user's style sheet contains "!important", it takes precedence over any applicable rule in an author's style sheet. This is an important feature to users who require or must avoid certain color combinations or contrasts, users who require large fonts, etc. For instance, the following rule specifies a large font size for paragraph text and would override an author rule of equal weight:
P { font-size: 24pt ! important }
The CSS2 'inherit' value - available for every property - leads to compact "!important" style rules that govern most or all of a document. For instance, the following style rules force all backgrounds to white and all foreground colors to black:
/*
Sets the text color to black
and the background color to
white for the document body.
*/
BODY {
color: black ! important ;
background: white ! important
}
/*
Causes the values of 'color' and 'background'
to be inherited by all other elements,
strengthened by !important. Note that this
may be overridden by other, more specific,
user styles.
*/
* {
color: inherit ! important ;
background: inherit ! important
}
CSS2 also includes these user control features:
For example, to draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:
:focus { outline: thick solid black }
:active { outline: thick solid red }
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.
For instance, the following user style sheet would cause the words "End Example" to be generated after each example marked up with a special class value in the document:
DIV.example:after {
content: End Example
}
Users could also, for example, number paragraphs so that they could locate their current reading position in a document:
P:before {
content: counter(paragraph) ". " ;
counter-increment: paragraph
}
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 example show how various sound qualities (including 'voice-family', which is something like an audio font) can let a user know that spoken content is a header:
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
The following properties are part of CSS2's aural cascading style sheets.
Furthermore, the 'speak-header' property describes how table header information is to be spoken before a table cell.
CSS2 lets users access alternative representations of content that is specified in attribute values when the following are used together:
In the following example, the value of the "alt" attribute for the IMG element is rendered after the image (visually, aurally, etc.):
IMG:after { content: attr(alt) }
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).
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.
W3C's Web Accessibility Initiative (WAI) addresses accessibility of the Web through five complementary activities that:
WAI's International Program Office enables partnering of industry, disability organizations, accessibility research organizations, and governments interested in creating an accessible Web. WAI sponsors include the US National Science Foundation and Department of Education's National Institute on Disability and Rehabilitation Research; the European Commission's DG XIII Telematics for Disabled and Elderly Programme; Telematics Applications Programme for Disabled and Elderly; Government of Canada, Industry Canada; IBM, Lotus Development Corporation, and NCR.
Additional information on WAI is available at http://www.w3.org/WAI/.
Web accessibility guidelines are essential for Web site development and for Web-related applications development. WAI is coordinating with many organizations to produce three sets of guidelines:
A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR.