Web checklist

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

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. Style sheets can be defined by the Web author or by the end user. This enables Web authors to give a Web site a consistent look. Support for user defined style sheets enables users to override the look defined by the Web author and replace 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 for low vision users to have an alternate way of viewing a Web page. In addition, style sheets were not supported by all browsers and assistive technology. Therefore, if a Web page included CSS features that were not supported by the browser or assistive technology, they may have been ignored, causing 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 customization of the look and feel. Low-vision users now have the option to control font sizes 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 can provide equivalent facilitation for low-vision users. Equivalent facilitation refers to Electronic and Information Technology which uses designs or technologies that do not meet the applicable Section 508 technical provisions, but provide substantially equivalent or greater access to and use of a product for people with disabilities.

Back to top

Compliance with this checkpoint requires all of the following techniques be met.

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. Hide content: Hide content using style sheets.
4. Text decoration: Do not use text decoration or color as the only way to add meaning.
5. Media style sheets: Avoid using media style sheets except where extensive testing has been done to properly support the intended audience.
6. Equivalent facilitation: If your application uses technology that relies on CSS in order to render properly, and that rendering cannot be accomplished any other way: provide equivalent facilitation.

Examples for CSS developers

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

To comply with this technique, all of the following examples must be implemented.

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 so screen readers can identify elements on the page such as headings, lists, and quotations. CSS can be used 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 is not accessible. The following techniques are required when using CSS to define presentation:

• Use HTML markup to identify headings and CSS to style headings. Screen readers use heading mark up to provide support to navigate Web pages by headings. Do not style text to look like a heading, use the heading tag together with CSS to give the heading the look you want on the Web page.
• Do not use a blank image or <blockquote> to indent content. <blockquote> should only be used to markup quotations. Use text-indent to indent content.

Example 1

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>

• Use HTML markup to identify lists and CSS to style the list, including bullets.

Do not use CSS positioning to create tabular effects. This may cause the page to be read out of order by a screen reader. Use the <table> element to provide correct structure for tabular data and then use CSS to give the table the look you want.

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

To comply with this technique, all of the following examples must be implemented.

In Firefox, the CSS :before and :after pseudo-elements can be used to generate content that provides additional information. But since the Web site must be accessible with style sheets 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 the information is important, provide text equivalents. Equivalents can be provided via the background-image, list-style, or content properties. Images generated by style sheets that are purely decorative do not require text equivalents.

Example 2

Because generated content may not be accessible to some assistive technology, do not use CSS to generate important content that is not available using other methods. The :before and :after pseudo-elements generate additional content on the page. This can be used to provide additional information such as identifying the beginning and end of sample code as shown in the example below. Note that these pseudo elements are not supported in Internet Explorer.

Code for example using generated content (not supported in IE):

.example:before { font-style: italic; color: red; content: "Start example."; }
.example:after { font-style: italic; color: red; content: "End example."; }
....
<code class="example">
<table border="1" summary="A simple data table showing the number of boys and girls in each grade">
<caption>Boys and Girls in Elementary School Classes</caption>
</code>

3. Hide content: Hide content using style sheets.

To comply with this technique, all of the following examples must be implemented.

CSS can be used to display content that is not seen visually, but is still available to assistive technology. These techniques enable you to provide additional information or cues to screen reader users without impacting the visual look or layout of the Web site. Some techniques to hide content are not supported by all screen readers. The Screen Reader Visibility Test Results (link resides outside of ibm.com) page at the Access Matters Web site (link resides outside of ibm.com) provides test cases for different techniques to hide content along with the results showing how each method is supported in different screen readers.

Example 3

This example uses the "access" or "off-left" technique to hide content using CSS. This technique displays data far to the left of the screen, beyond what a Web browser is capable of displaying, but the data is still 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>
....

Example 4

Do not use the display:none property to hide content that will be accessed by screen readers. Unless used with the <label> element, display:none will hide the content from all users, including those using a screen reader. For example, the following code to hide a "skip to main" link will hide 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>

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

To comply with this technique, all of the following examples must be implemented.

CSS text decoration attributes (underline, overline, strikethrough) are not accessible so they are ignored when they are encountered by someone using a screen reader. Do not use text decoration attributes as the only way to provide meaning.

CSS text properties can be used to add color to text. When used purely for decoration or visual appeal, this is not a problem for accessibility. 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 Use of color.

5. Media style sheets: Avoid using media style sheets except where extensive testing has been done to properly support the intended audience.

To comply with this technique, all of the following examples must be implemented.

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 that would be rendered on specific devices such as the screen, printer, TTY or Braille display. While specifying media types for aural, Braille, embossed (Braille printers) and TTY seem like they would provide improved accessibility, it usually does not. Browsers and assistive technology provide minimal and inconsistent support for these media types. Media style sheets for these devices should only be used if you have done extensive testing to ensure the media types are properly supported for the audience of the Web site.

6. Equivalent facilitation: If your application uses technology that relies on CSS in order to render properly, and that rendering cannot be accomplished any other way: provide equivalent facilitation.

To comply with this technique, all of the following examples must be implemented.

Rich Internet Applications that require CSS to be enabled in order to render properly and to be usable must provide equivalent facilitation for low-vision users. Custom widgets that rely on CSS in order to render properly are also required to provide equivalent facilitation for low-vision users. Avoid using CSS background images as essential parts of custom controls (i.e. a custom check box image). CSS background images are not rendered at all in high contrast mode. 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 in order 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 browser settings."

Back to top

Examples for Dojo developers

For techniques that have no technology-specific examples, refer to the Examples for CSS developers section for guidance.

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

To comply with this technique, all of the following examples must be implemented.

Example 5

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 browser font size is increased or decreased.

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

Incorrect method:

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

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;">

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

There are no specific techniques for Dojo.

3. Hide content: Hide content using style sheets.

There are no specific techniques for Dojo.

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

There are no specific techniques for Dojo.

5. Media style sheets: Avoid using media style sheets except where extensive testing has been done to properly support the intended audience.

There are no specific techniques for Dojo.

6. Equivalent facilitation: If your application uses technology that relies on CSS in order to render properly, and that rendering cannot be accomplished any other way: provide equivalent facilitation.

There are no specific techniques for Dojo.

Back to top

The techniques above are required; the following techniques are recommended to enhance accessibility:

1. Use style sheets instead of the font element.

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 due to specific customer requirements, this technique is required.

2. Specify font size in relative measurements using em or %.

This technique allows the fonts to resize properly on all browsers. Some browsers will not resize text specified in absolute measurements like px or pt. If your Web site must conform to WCAG 1.0 guidelines due to specific customer requirements, this technique is required. For recommendations on how to specify font size using em, see How to size text using ems (link resides outside of ibm.com).

3. Use style sheets instead of tables for layout and positioning.

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

4. Include a specification for a backup font when a font style is specified.

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

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

Back to top

The following test tools and techniques are required to test this checkpoint.

1. Test tools
2. Required accessibility verification test techniques

Back to top