Creating Accessible CSS
Using CSS to Your Advantage

Separating Content from Presentation

One of the primary benefits of CSS is that it allows authors to separate content from its presentation. Content means the text, images and other elements that make up the core of the document. Presentation means the way in which content is displayed. For a dramatic demonstration of the difference between content and presentation, view the WebAIM site (www.webaim.org)with the styles turned off. This can easily be accomplished within the Opera browser (available at http://www.opera.com - external link). Below is a screen shot of the option in Opera that allows you to go into User mode to turn off the page's styles.

If you're using the Firefox web browser, you can turn off styles by selecting View > Page Style > No Style or by using the Firefox Web Developer Toolbar.

Now let's look at the WebAIM home page with the styles turned off:

Without styles, the site looks like a completely different site. If we apply a style sheet that is customized for someone with low vision, the page looks like this:

Once again, the site looks completely different from the original. The presentation of the content is separate from the content itself. The content can be presented with any combination of styles, but the content itself will remain unchanged. This is what it means to separate content from presentation.

Altering the Linearized Layout

With style sheets, you have greater control over layout than you do with tables. One of the accessibility benefits of this control is that you can change the linear layout of a page without altering its visual layout. Linear layout refers to the order of elements in a web page when all styles and formatting are removed. The linear reading order of web content is important to screen reader users because that is the order that screen readers access the content. Screen readers ignore most visual styles within web content and generally access content without any presentation. This stripped-down version of web pages is all that screen readers has access to. How can you tell what the linearized reading order of a web page will be? Here is the answer:

One of the nice things about style sheets is that you don't have to alter the visual formatting of a web page when you alter the linearized reading order. This can be useful when you want to make sure that screen reader users access the page content in a certain order. The following two example pages show you the power of CSS when reconfiguring the linearized reading order.

Example 1: in this example, the main content of a web page is read third in the linearized reading order.

Example 2: in this example, the main content is read first, even though the visual layout remains unchanged.

The only difference between the two files is the literal order of the <div> elements in the HTML. The <div> elements that surround the main content were moved to the top of the document, putting it at the top of the linear order. This example is a bit simplistic, but hopefully it gives you a taste for some of the possibilities when you use style sheets. Now, don't assume that it's always best to put the main content first, either. Most people who use screen readers are accustomed to having the navigation at the beginning of the page. However, it is always best to provide a means for skipping over navigational elements.

Using Hidden CSS

A close look at the web site with styles removed reveals extra text (you are here in the breadcrumbs and current page in the article contents) that is not present in the CSS-enabled view:

By way of comparison, here is a screenshot of the CSS-enabled view:

The hidden text is for the benefit of screen reader users. The text allows these users to orient themselves within the context of the page. Is this text necessary? No. Is it part of the Web Content Accessibility Guidelines? Well, sort of. This is one of many techniques that can help make the content more understandable to users (in this case screen reader users), which is one of the main principles of accessibility according to WCAG 2.0.

The techniques for hiding text using CSS are presented in the section on invisible content just for screen reader users.