Web checklist

Checkpoint 1.3f: Cascading style sheets

Web pages are readable without requiring style sheets or equivalent facilitation is provided. See the equivalent facilitation explanation in the Rationale and Required development and unit test techniques sections on this page.


Rationale

Cascading Style Sheets (CSS) describe how elements within a Web page are presented. Web authors use CSS to add style, such as fonts, colors, and spacing to Web documents. Web authors can define style sheets to give a Web site a consistent look. User-defined style sheets enable users to override the look that the Web author defined by replacing it with their style preferences. For example, someone with low vision can define a style sheet that uses larger fonts and higher contrast on the Web page.

When this requirement was originally written into Section 508, the intent was to provide low-vision users with an alternate way of viewing a Web page. In addition, not all browsers and assistive technology supported style sheets. Therefore, if a Web page included CSS features that the browser or assistive technology did not support, these features may have been ignored, which would cause some users to miss important content on the Web site. Recently, browser and assistive technology support for CSS has improved and many new rich Internet applications rely on CSS to create graphical user interfaces and to enable users to customize the look and feel of a Web page. Low-vision users can now control font size and contrast settings at the browser and operating system level.

Recent guidance from the United States Access Board says applications that rely on CSS can still meet this checkpoint as long as they provide equivalent facilitation for low-vision users. Equivalent facilitation refers to Electronic and Information Technology using designs or technologies that do not meet the applicable Section 508 technical provisions, but provide substantially equivalent or greater access for people with disabilities.

Required development and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques.

  1. Format and position: Use style sheets to control text format and position.
  2. Important information: Avoid the use of CSS to generate content that conveys important information.
  3. Important images: If CSS is used to include an important image, provide a text alternative for the image when CSS is disabled.
  4. Hide content: Hide content using style sheets.
  5. Text decoration: Do not use text decoration or color as the only way to convey meaning.
  6. Media style sheets: Avoid using media style sheets, except where extensive testing verifies that the media style sheets support the intended audience properly.
  7. Equivalent facilitation: If your application uses technology that relies on CSS to render properly and proper rendering cannot be accomplished using other means, you must provide equivalent facilitation.

Note for iOS platform: The unit test procedures for the following techniques and examples call for disabling style sheets. However, mobile Safari does not support disabling stylesheets. Therefore, use a desktop browser and user agent switcher to confirm that content is readable without requiring style sheets.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

CSS examples

  1. Format and position: Use style sheets to control text format and position.

    To comply with this technique, you must implement all of the following examples.

    One of the most important features of CSS is the separation of presentation from structure. This requires that Web authors use correct HTML markup in conjunction with using CSS to define the style and look of the Web page. HTML markup is required to provide the structure necessary for accessibility, which enables screen readers to identify page elements, such as headings, lists, and quotations. Authors can use CSS for any text elements to make them visually appear as headings, titles, lists, and quotations. If you use CSS without WAI-ARIA roles and properties to achieve the visual effect you want without correct HTML markup, the page will not be accessible. The following examples are required when using CSS to define presentation.

    CSS example 1

    Use HTML markup to identify headings and use CSS to apply style to the headings. Screen readers use heading markup to allow users to navigate Web pages by headings. Do not stylize text to appear like a heading, instead, use the heading element together with CSS to give the heading the intended appearance.

    CSS example 2

    Do not use a blank image or <blockquote> element to indent content. The <blockquote> element should only be used to mark up quotations. Use CSS text-indent to indent content.

    CSS example 3

    Use CSS text-indent to indent content. The following CSS rule indents the paragraph by 2em.

    p.indent {text-indent: 2em} .... <p class="indent">This text is indented using text:indent. Using CSS instead of blockquote gives the same visual look with the correct semantic markup.</p>

    CSS example 4

    Use HTML markup to identify lists and use CSS to stylize the list, including bullets.

    CSS example 5

    Do not use CSS positioning to create tabular effects. This may cause screen readers to read the page out of order. Use the <table> element to provide the correct structure for tabular data and then use CSS to give the table the intended appearance.

    Required unit tests for CSS development technique 1

    Perform the following unit test using a Web syntax analysis tool or a screen reader.

  2. Important information: Avoid the use of CSS to generate content that conveys important information.

    To comply with this technique, you must implement the following example.

    CSS example 6

    In Firefox®, the CSS :before and :after pseudo-elements can be used to generate content that provides additional information. However, since the Web site must be accessible when style sheets are disabled, the content may not be visible to all users. In addition, text generated by style sheets is not part of the document source and may not be available to assistive technologies that access content through the Document Object Model Level 1 (DOM1). Because the generated text may not be accessible, do not use CSS to generate important information that is not available through other means. If CSS-generated content is important, provide text equivalents for the content. Images generated by style sheets that are purely decorative do not require text equivalents.

    Note that Microsoft® Internet Explorer® does not support the :before and :after pseudo-elements. To see the generated text, you will need to use the Firefox browser.

    Required unit tests for CSS development technique 2

    Perform the following unit test using a Web syntax analysis tool or a screen reader.

  3. Important images: If you use CSS to include an important image, provide a text alternative for the image when CSS is disabled.

    To comply with this technique, you must implement the following example.

    CSS example 7

    The following example represents an advertisement for a 30-day free trial. The advertisement contains a CSS background image that a user selects to sign up for a free trial. When the image is selected, a signup form appears.

    30 day free trial!!!

    When the user enables the high-contrast mode, the CSS background image disappears. Therefore, if code is not implemented to handle high-contrast mode, users cannot access the form to sign up for the free trial.

    When properly coded, the following link alternative appears when high-contrast mode is enabled:

    30 day free trial!!!

    To ensure conditional rendering of the background image or alternative text link, supply the following code to support both high-contrast enabled and disabled modes.

    <style type="text/css"> #trial { background-image: url(30daytrial.jpg); background-repeat: no-repeat; background-position: left top; padding-top: 68px; } .access { position: absolute; left: -3000px; width: 500px; } </style> <div id="trial">...</div> <span class="access"><a href="#">30 day free</a></span>

    For this example, the image remains visible when high-contrast mode is disabled. The CSS access class moves the "30 day free trial" text link off the screen where it is not visible to sighted users. This approach makes the free trial text link accessible for screen reader users because they can hear the link text and activate the link.

    When high-contrast mode is enabled, JavaSript® must detect this mode and remove the class attribute from the <span class="access"> element. Removing the class attribute makes the "30 day free trial" text link visible to low-vision users. Contact the HA&AC if you require guidance on code that detects high-contrast mode.

    For a complete description on how Dojo detects Windows® high-contrast mode, see the Dijit Accessibility Strategy (link resides outside of ibm.com).

    Required unit tests for CSS development technique 3

    Perform the following unit test using a Web syntax analysis tool or a screen reader.

  4. Hide content: Hide content using style sheets.

    To comply with this technique, you must implement the following examples.

    CSS can be used to insert content that is available to assistive technology, yet does not appear visually. These techniques enable you to provide additional information or cues to screen reader users without changing the visual look or layout of the Web site. The IBM w3v8 template uses these techniques to provide additional information, such as a link to the IBM accessibility statement, the list of access keys and additional navigation to skip between portlets. Not all screen readers support techniques to hide content. The Screen Reader Visibility Test Results page on the Access Matters Web site (link resides outside of ibm.com) provides test cases for several techniques to hide content and demonstrates how individual screen readers support each method.

    CSS example 8

    The following example uses the access or off-left technique to hide content using CSS. This technique displays data on the leftmost portion of the screen, beyond the point that a Web browser is capable of displaying, while remaining accessible to screen readers.

    <style type="text/css"> .access {position:absolute; left: -3000px; width: 500px; } </style> ... <p class="access">The access keys for this page are:</p> <ul class="access"> <li>ALT plus 1 links to the w3.ibm.com home page</li> ....

    CSS example 9

    Do not use the display:none property to hide content. Unless used with the <label> element, display:none hides content from all users, including screen reader users. For example, the following code to hide a "skip to main" link actually hides the link for everyone:

    .hidden {display:none } ... <div class="hidden"> <a href="#skip">Skip to main</a> </div> ... <h2 id="skip">Start of main content</h2> <p>Using display:none hides the link from everyone.</p>

    Required unit tests for CSS development technique 4

    Perform the following unit tests using a Web syntax analysis tool or a screen reader.

  5. Text decoration: Do not use text decoration or color as the only means to convey meaning.

    To comply with this technique, you must implement the following example.

    CSS text decoration attributes (underline, overline, strikethrough) are not accessible because screen readers ignore them. Do not use text decoration attributes as the only means to provide meaning.

    CSS text properties can be used to add color to text. Using color solely for decoration or visual appeal is not a problem for accessibility. However, when color is used as the only way to convey meaning, it is not accessible. Use context and markup, in addition to color, to make the content accessible. For more information, see Checkpoint 1.4a: Use of color.

    Required unit tests for CSS development technique 5

    Perform the following unit tests using a Web syntax analysis tool or a screen reader.

  6. Media style sheets: Avoid using media style sheets, except where extensive testing verifies that the media style sheets support the intended audience properly.

    To comply with this technique, you must implement the following example.

    Cascading Style Sheets (CSS) techniques for WCAG 2.0 (link resides outside of ibm.com), the latest specification for CSS, added support for media types to enable Web authors to design style sheets for content on specific devices, such as the screen, printer, TTY or Braille display. Although it seems that specifying media types for aural, Braille, embossed (Braille printers) and TTY would improve accessibility, it usually does not. Browsers and assistive technology provide minimal and inconsistent support for these media types. Use media style sheets for these devices only if you have performed extensive testing to ensure the media types are properly supported for the audience of the Web site.

    Required unit tests for CSS development technique 6

    Manually perform the following unit test:

  7. Equivalent facilitation: If your application uses technology that relies on CSS to render the application properly and proper rendering cannot be accomplished using other means, you must provide equivalent facilitation.

    To comply with this technique, you must implement the following example.

    If a Rich Internet Application is only usable and can only render properly with CSS enabled, it must provide equivalent facilitation for low-vision users. For custom widgets that rely on CSS to render properly, you are also required to provide equivalent facilitation for low-vision users. Because CSS background images do not render in high-contrast mode, avoid using these images as essential parts of custom controls (such as a custom checkbox image). Instead, use foreground images for any essential image in a custom widget.

    If your application relies on CSS and you choose to provide equivalent facilitation to meet this checkpoint, you must add the following paragraph to the Comments section of the CSS checkpoint when you complete the Web Accessibility Checklist:

    "This application relies on CSS in order to render properly and be usable. However, the application provides equivalent facilitation for low-vision users by utilizing the user’s system display settings, including high contrast mode. Users may also control the font sizes using the device or browser settings."

    Required unit tests for CSS development technique 7

    Manually perform the following unit test:

    Desktop configuration instructions for high contrast and large font mode

    To display your Web content in high contrast and large font mode, follow these steps:

    1. Configure your Web browser to inherit the system color scheme.
    2. Apply a high-contrast color and large font scheme in Windows.

    The following sections contain detailed instructions.

    How to apply a high-contrast color and large font scheme in Windows XP

    iOS configuration instructions for high contrast and large font mode

    The Zoom mode provided in iOS meets the large font requirement because it is provided on all iOS devices and integrates with all applications.

    iOS does not support a true high contrast mode. However, it does have a reverse video mode which is available in the accessibility settings. Teams are expected to test applications with the Zoom feature in conjunction with the reverse video mode in order to meet the equivalent facilitation requirement.

    How to apply a high-contrast theme in Windows 7

    How to apply large fonts in Windows 7


Dojo examples

  1. Format and position: Use style sheets to control text format and position.

    To comply with this technique, you must implement the following examples.

    Dojo example 1

    Use em to size Dojo widgets — do not use px (pixels). Using pixels to size a widget may cause the widget to appear incorrectly when the user increases or decreases the browser font size.

    The following image shows a menu sized in pixels that becomes partially obscured when browser font size changes.

    Incorrect method:

    <div dojoType="dijit.Toolbar" region="top" style="height:25px;">

    menu sized in pixels and partially obscured when browser font size changes.

    The following image shows the same menu displayed correctly when sized with em.

    Correct method:

    <div dojoType="dijit.Toolbar" region="top" style="height:1.25em;">

    menu displayed correctly when sized with 'em'

    Required unit tests for Dojo development technique 1

    Perform the following unit test using a Web syntax analysis tool or a screen reader.

  2. Important information: Avoid the use of CSS to generate content that conveys important information.

    There are no specific examples for implementing this technique in Dojo. Use the CSS examples as a guide.

  3. Important images: If CSS is used to include an important image, provide a text alternative for the image when CSS is disabled.

    To comply with this technique, the following example must be implemented.

    Dojo example 2

    The Dojo widgets use CSS background images for important icons, such as those in a toolbar. When CSS is turned off, the toolbar images are no longer visible, however, a text alternative for the images is provided.

    When extending existing Dojo widgets or developing new widgets, provide text alternatives for important CSS background images.

    Required unit tests for Dojo development technique 3

    Refer to the required unit tests for CSS development technique 3.

  4. Hide content: Hide content using style sheets.

    There are no specific examples for implementing this technique in Dojo. Use the CSS examples as a guide.

  5. Text decoration: Do not use text decoration or color as the only way to convey meaning.

    There are no specific examples for implementing this technique in Dojo. Use the CSS examples as a guide.

  6. Media style sheets: Avoid using media style sheets, except where extensive testing verifies that the media style sheets support the intended audience properly.

    There are no specific examples for implementing this technique in Dojo. Use the CSS examples as a guide.

  7. Equivalent facilitation: If your application uses technology that relies on CSS to render the application properly and proper rendering cannot be accomplished using other means, you must provide equivalent facilitation.

    The unmodified Dojo Dijits meet the requirements for this checkpoint via equivalent facilitation.


Recommended development techniques

Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them because they can improve the accessibility and usability of an application.

The following techniques are recommended to improve the accessibility of style sheets. Use of these techniques goes beyond compliance to make the Web site usable, as well as accessible.

  1. Use style sheets instead of the <font> element.
  2. Specify font size in relative measurements using em or %.
  3. Use style sheets instead of tables for layout and positioning.
  4. Include a specification for a backup font when a font style is specified.

Recommended example 1

The <font> element has been deprecated in HTML 4.01 and should be avoided. If your Web site must conform to WCAG 1.0 guidelines because of specific customer requirements, this technique is required.

Recommended example 2

This technique enables the fonts to resize properly in all browsers. Some browsers will not resize text specified in absolute measurements like pixels (px) or points (pt). If your Web site must conform to WCAG 1.0 guidelines because of specific customer requirements, this technique is required.

For recommendations on how to specify font size, see:

Recommended example 3

If your Web site must conform to WCAG 1.0 guidelines because of specific customer requirements, this technique is required.

Recommended example 4

When a font style is specified, include a specification for a backup font. If the browser does not support the preferred font, it uses the backup font. For example:

{font-family: "arial", "sans serif"}


©2013 IBM Corporation

Last updated January 1, 2013.

W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.