13. Same Info without Style Sheets

Use same info without style sheets

Do not use presentation layers (e.g. css, styles) to provide information unless the information is also presented through content or through semantic markup. (And do not use presentation layers to hide content that would be disruptive or misleading if shown.)

Rationale

Screen readers usually do not read information from the presentation layer. So, screen reader users would generally miss any information provided in the presentation layer alone.

Also, when technologies provide separate layers for content and presentation, users are generally allowed to remove or replace the presentation layer. Users with low vision or learning disabilities may replace the visual presentation in favor of a custom visual presentation style that works better for them. As such, any information that is conveyed only through the presentation layer will be lost for these users as well.

In many cases it is okay to hide information using presentation layers. For example, the HTML techiques in these guidelines occasionally recommend placing information offscreen using CSS to provide extra information for screen reader users. Also, it is acceptable to hide elements in an expanding/collapsing menu using CSS, if the menu appears fully expanded when CSS is off or replaced.

However, if you were to hide and show an error message, such as “The server is offline!” using a CSS setting, users who turn off or replace CSS would always see that message. Thus, the information on the page relies on CSS and is inaccurate if the CSS is not present. This type of situation can be as bad or worse than having information missing when the CSS is not present.

Technology Specifics

HTML | XHTML | CSS

Do not use CSS to introduce information that is not available through another method. Examples of this problem include:

Information conveyed through CSS background images (There is no way to include alt-text for these images in the CSS. Also, the images will be lost if the style sheet is replaced.)
Information conveyed through text added through CSS, such as pseudo-elements :before and :after. (Browsers do not pass this information to screen readers and information will be lost if the style sheet is replaced.)
```
/* Do NOT use unless “100% Correct” is also conveyed elsewhere /
h1.congratulations:before {
content: “100% Correct: “;
}
```

Information conveyed by using CSS to establish categories:

/Do NOT use unless the time period associated with each piece of content is also conveyed through text */ div.paleozoic { border-style: dashed; } div.mesozoic { border-style: solid; } div.cenozoic { border-style: dotted; }

(Again, screen readers will not convey this information & it will also be lost if the style sheet is replaced.)

JavaScript

If your Web application hides and shows content, that functionality may be required for access to the information on the page, so, either:

(Preferred) Use server-side technology so that you don’t have to add the content to the page until it is needed.

OR

(Preferred) Keep CSS and JavaScript behavior separate. Hide or show content by removing or adding DOM nodes instead of adjusting CSS styles. This way, people who use custom style sheets can still benefit from the JavaScript behavior.

function hide() {
window.myparent = document.getElementById(“a1”);
window.myobj = document.getElementById(“b2”);
window.myparent.removeChild(window.myobj);
}
function show() {
window.myparent.appendChild(window.myobj);
}


<a href=“javascript:hide();”>Hide sentence below </a>
|
<a href=“javascript:show();”>Show sentence below </a>
<div id=“a1”>
<p id=“b2”>Sentence to hide or show goes here.</p>
</div>

JavaScript Only Hide/Show Sample Page: DOM Hide Show Nodes Demo

For an additional example, see Pearson Guideline 33.

Make sure all content is displayed and makes sense when CSS is not available. For example, a menu that can expand and collapse, might appear fully expanded when the Web page’s CSS are not used.

PowerPoint

Avoid placing content in the slide master. The information contained in the slide master is not read by screen readers.

Images that are decorative can be placed in the slide master. If they are part of the content and not merely decorative, add the images on the slide.

Testing HTML

Testing technique	Description
Tools	Turn off style sheets (CSS). Most browsers provide a way to turn off style sheets. In the Web Accessibility Toolbar you can do this by selecting CSS > Disable CSS. In FireFox go to View > Page Style > No style. Try a custom style sheet. (Download the custom style sheet that Wayne Dick, accessibility specialist and professor from California State University Long Beach, created to help Web developers test access for visual readers with low vision: Screen Density 100 No Auto Height CSS Demo. For information on how to activate custom style sheets, see: How to Activate User Style Sheets (404))
Output	Once you have disabled CSS or have applied a custom style sheet, you may see: content appear, content disappear, or content get cut off.
Analysis	If anything disappears, consider whether those elements are decorative or important. If they are important, that’s an error. If anything appears, consider whether the new items are simply additional content (like expanded menu items) or whether the new items are disruptive (like instructor content in the student view, or a server-down message when the server is not down.) Only disruptive additional content should be considered an error. If anything is cut off, see if there’s a way to reach that content. If not, this is an error.

Tools

Turn off style sheets (CSS). Most browsers provide a way to turn off style sheets. In the Web Accessibility Toolbar you can do this by selecting CSS > Disable CSS. In FireFox go to View > Page Style > No style.

Try a custom style sheet. (Download the custom style sheet that Wayne Dick, accessibility specialist and professor from California State University Long Beach, created to help Web developers test access for visual readers with low vision: Screen Density 100 No Auto Height CSS Demo. For information on how to activate custom style sheets, see: How to Activate User Style Sheets (404))

Output

Once you have disabled CSS or have applied a custom style sheet, you may see: content appear, content disappear, or content get cut off.

Analysis

If anything disappears, consider whether those elements are decorative or important. If they are important, that’s an error.

If anything appears, consider whether the new items are simply additional content (like expanded menu items) or whether the new items are disruptive (like instructor content in the student view, or a server-down message when the server is not down.) Only disruptive additional content should be considered an error.

If anything is cut off, see if there’s a way to reach that content. If not, this is an error.

Related Guidelines

508 Web § 1194.22 (d)

Documents shall be organized so they are readable without requiring an associated style sheet.

WCAG 2.0 – Level A - 1.3.1 Info and Relationships:

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

Row and column headers are identified for data tables. Note: In order to achieve this provision, table objects in data operated on by the software would need to be associated with sufficient information to identify any row and column headers for the table, that the software can obtain as readily as it can obtain the table itself.
In data tables that have two or more logical levels of row or column headers, data cells are associated with header cells. Note: In order to achieve this provision, cells in table objects with multiple logical levels of headers in data operated on by the software would need to be associated with sufficient information to identify any row and column headers for the table cell, that the software can obtain as readily as it can obtain the table cell itself.
Section headings are identified.
Form element LABELS are associated with form fields.