[contents] _________________________________________________________________ W3C CSS Techniques for Web Content Accessibility Guidelines 1.0 W3C Working Draft 08 August 2000 This version: http://www.w3.org/WAI/GL/WD-WCAG10-CSS-TECHS-20000808 (plain text, postscript, pdf, gzip tar file of HTML, zip archive of HTML) Latest version: http://www.w3.org/WAI/GL/WCAG10-CSS-TECHS Previous version: http://www.w3.org/WAI/GL/WD-WCAG10-CSS-TECHS-20000727 Editors: Wendy Chisholm, W3C, Gregg Vanderheiden, Trace R & D Center, University of Wisconsin -- Madison Ian Jacobs, W3C Copyright ©1999 - 2000 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. _________________________________________________________________ Abstract This document describes techniques for satisfying the checkpoints of "CSS Techniques for Web Content Accessibility Guidelines 1.0" [WCAG10] when using CSS ([CSS1], [CSS2]). CSS1 allows content developers to duplicate most HTML 4.0 presentation capabilities and offer more power with less cost. However, until most users have browsers that support style sheets, not every presentation idiom may be expressed satisfactorily with style sheets. We also provide examples of how to use HTML 4.0 features (e.g., tables, bitmap text) more accessibly when they must be used. "Techniques for Web Content Accessibility Guidelines 1.0" [WCAG10-TECHS] contains additional techniques and references for other formats and languages. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C. While CSS Techniques for Web Content Accessibility Guidelines 1.0 strives to be a stable document (as a W3C Recommendation), the current document is expected to evolve as technologies change and content developers discover more effective techniques for designing accessible Web sites and pages. This is a W3C Working Draft for review by W3C Members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". This is work in progress and does not imply endorsement by, or the consensus of, either W3C or participants in the Web Content Accessibility Guidelines (WCAG) Working Group. This document is part of a series of accessibility documents published by the Web Accessibility Initiative. WAI Accessibility Guidelines are produced as part of the WAI Technical Activity. The goal of the Web Content Guidelines Working Group is discussed in the Working Group charter. A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR. Please send detailed comments on this document to wai-wcag-editor@w3.org. To do * Get rid of @@'s placed by editors. * Include WebReview browser compatibility information for each CSS property as well as other known bugs, inconsistencies, etc. Reference links where possible. E.g., other webreview articles. * Ensure that discussions of checkpoints are grouped according to priority so that it is clear which techniques need to be implemented in order to conform at a certain priority level. Table of Contents * Abstract * Status of this document * 1 Decrease maintenance and increase consistency * 2 User override of styles * 3 Units of measure * 4 Generated content * 5 Fonts * 6 Text style effects * 7 Text instead of images * 8 Text formatting and position * 9 Colors + 9.1 Color Contrast + 9.2 Ensuring information is not in color alone * 10 Providing contextual clues in HTML lists * 11 Layout, positioning, layering, and alignment + 11.1 If you must use images as spacers * 12 Rules and borders * 13 Using style sheet positioning and markup to transform gracefully * 14 Creating movement with style sheets and scripts * 15 Aural Cascading Style Sheets * 16 Access to alternative representations of content * 17 Media types * Acknowledgments * 18 References * 19 Resources + 19.1 Accessibility resources _________________________________________________________________ 1 Decrease maintenance and increase consistency Checkpoints in this section: 14.3 Create a style of presentation that is consistent across pages. [Priority 3] . * Use a minimal number of style sheet for your site * Use linked style sheets rather than embedded styles, and avoid inline style sheets. * If you have more than one, use the same "class" name for the same concept in all of the style sheets. 2 User override of styles Checkpoint in this section: 11.2 Avoid deprecated features of W3C technologies. [Priority 2] . 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: Example. 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: Example. /* 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: * System colors (for 'color', 'background-color', 'border-color', and 'outline-color') and system fonts (for 'font') mean that users may apply their system color and font preferences to Web documents. * Dynamic outlines (the 'outline' property) allow users (e.g., with low vision) to create outlines around content that don't affect layout but do provide highlight information. 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: Example. :focus { outline: thick solid black } :active { outline: thick solid red } 3 Units of measure Checkpoints in this section: 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values. [Priority 2] . Techniques: * Use the "em" unit to set font sizes. * Use relative length units and percentages. CSS allows you to use relative units even in absolute positioning. Thus, you may position an image to be offset by "3em" from the top of its containing element. This is a fixed distance, but is relative to the current font size, so it scales nicely. * Only use absolute length units when the physical characteristics of the output medium are known, such as bitmap images. Example. Use em to set font sizes, as in: H1 { font-size: 2em } rather than: H1 { font-size: 12pt } End example. Example. Use relative length units and percentages. BODY { margin-left: 15%; margin-right: 10%} End example. Example. Only use absolute length units when the physical characteristics of the output medium are known. .businesscard { font-size: 8pt } End example. 4 Generated content Checkpoints in this section: * 3.1 When an appropriate markup language exists, use markup rather than images to convey information. [Priority 2] , * 6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. [Priority 1] Techniques: * Provide a text equivalent for any important image or text generated by style sheets (e.g., via the 'background-image', 'list-style', or 'content' properties). * 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 DOM, levels 1 and 2 ([[DOM1],[DOM2]]). CSS2 includes several mechanisms that allow content to be generated from style sheets: * the :before and :after pseudo-elements and the 'content' property. When used together, these allow authors to insert markers (e.g., counters and constant strings such as "End Example" in the examples below) before or after and element's content. * the 'cue', 'cue-before', and 'cue-after' properties. This properties allow users to play a sound before or after an element's content. * List styles, which may be numbers, glyphs, or images (usually associated with the LI element in HTML). CSS2 adds international list styles to the styles defined in CSS1. See the 'list-style-type' and 'content' properties. 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: Example. 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: Example. P:before { content: counter(paragraph) ". " ; counter-increment: paragraph } 5 Fonts Checkpoints in this section: 11.2 Avoid deprecated features of W3C technologies. [Priority 2] . Techniques: * Always specify a fallback generic font. * Instead of using deprecated presentation elements and attributes, use the many CSS properties to control font characteristics: 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', and 'font-weight'. * Use the following CSS2 properties to control font information + 'font', '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". * If you must use HTML elements to control font information, use BIG and SMALL, which are not deprecated. Example. Always specify a fallback generic font: BODY { font-family: "Gill Sans", sans-serif } End example. Example. End example. 6 Text style effects Checkpoints in this section: 7.2 Until user agents allow users to control blinking, avoid causing content to blink (i.e., change presentation at a regular rate, such as turning on and off). [Priority 2] . 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). 7 Text instead of images Checkpoints in this section: 3.3 Use style sheets to control layout and presentation. [Priority 2] . Content developers should 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 fonts sizes more easily. If it is necessary to use a bitmap to create a text effect (special font, transformation, shadows, etc.) the bitmap must be accessible (see the sections on text equivalents and alternative pages). Example. In this example, the inserted image shows the large red characters "Example", and is captured by the value of the "alt" attribute.
This is an
of what we mean.
Once upon a time... Note. As of the writing of this document, the CSS pseudo-element ':first-letter', which allows content developers to refer to the first letter of a chunk of text, is not widely supported. 9 Colors 9.1 Color Contrast Checkpoints in this section: * 2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text]. Techniques: * Use numbers, not names, for colors. Example. Use numbers, not names, for colors: H1 {color: #808000} H1 {color: rgb(50%,50%,0%)} End example. Deprecated example. H1 {color: red} End example. Use these 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. Ensure that foreground and background colors contrast well. If specifying a foreground color, always specify a background color as well (and vice versa). 9.2 Ensuring information is not in color alone Checkpoints in this section: * 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority 1] 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). 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. Quicktest! To test whether your document still works without colors, examine it with a monochrome monitor or browser colors turned off. Also, try setting up a color scheme in your browser that only uses black, white, and the four browser-safe greys and see how your page holds up. Quicktest! 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 two small or indistinct to hold up well. For more information about colors and contrasts, refer to [LIGHTHOUSE]. 10 Providing contextual clues in HTML lists Checkpoints in this section: * 3.6 Mark up lists and list items properly. [Priority 2] * 13.2 Provide metadata to add semantic information to pages and sites. [Priority 2] Content developers are encouraged to use UL for unordered lists and OL for ordered lists (i.e., use markup appropriately) combined with CSS to provide contextual clues. The following CSS2 style sheet shows how to provide compound numbers for nested lists created with either UL or OL elements. Items are numbered as "1", "1.1", "1.1.1", etc. Example. End example. Until either CSS2 is widely supported by users agents or user agents allow users to control rendering of lists through other means, authors should 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. Example.