Skip Main Navigation
Indiana University

Main Content

Web Accessibility Made Easy:
Cascading Style Sheet Basics

March 19th, 2011

This blog post in the “Web Accessibility Made Easy” series discusses the basics of Cascading Style Sheets (CSS) and the importance of correctly using CSS.

Cascading Style Sheets

Use Cascading Style Sheets (CSS) to add consistent styling to Web pages. CSS rules separate document presentation elements (color, fonts, spacing, layout, headings, etc.) from document content (written in HTML or a similar markup language). Separation of content and presentation does the following:

  • Improves content accessibility
  • Improves flexibility and control for specification of presentation characteristics
  • Enables multiple pages to share formatting
  • Reduces complexity and repetition in the structural content though web design that does not rely on tables. (W3C & Wikipedia)

Modern Browsers (Firefox, Opera, and Internet Explorer) allow users to substitute their own custom style sheets that render Web pages in a more accessible format for that user. Without the use of Cascading Style Sheets this is not possible because inline and embedded styles override external style sheets added by the user. The images below show an example of a user modified style sheet created to improve the visual accessibility of the Web page to meet their particular needs.

Normal View as set by CSS Normal View as set by CSS
High Contrast View (White on Black) High Contrast view (White on Black)

The first image shows the Web page using the CSS style sheets created by the Web developer. The second image of the same Web page derives from a user specified CSS style sheet. High contrast black and white text improves visual contrast of the page. This is often helpful to individuals with low vision.

It is important to note, not all CSS style rules improve accessibility. If important content is added to a Web page by using CSS instead of through the underlying code, when Cascading Style Sheets are disabled or they are substituted to accommodate personal preference or adaptive technology, the content added with CSS might not be accessible to the user.

Good example with style sheets turned off

Below is the Web page used in the examples above. In this instance, the Cascading Style Sheets have been disabled. Cascading Style Sheets have been used correctly because all the information available with the Cascading Style Sheets enabled is available when Cascading Style Sheets are disabled. In addition, new content is visible that was initially hidden by the CSS. This hidden content aids users of adaptive technology with page navigation. It was hidden so that it would not disrupt the visual layout, but still be useful.

Web Accessibility Good Example page with Stylesheets turned off

Bad example with style sheets turned off

CSS has not been used appropriately in the Web page below. Using CSS, the header image and contact information were coded as background images of an HTML division element (<div>). Neither the header image nor contact information appears when the Cascading Style Sheets are removed.

Web Accessibility Bad Example page with Stylesheets turned off

Guideline

IU Web Accessibility Guidelines


4.   Presentation and navigation style shall remain consistent throughout the document.

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

16.  Use style sheets to control layout and presentation.

Tutorial

This tutorial demonstrates Cascading Style Sheet coding for both the bad example Web page and the good example Web page.

  1. Bad Code – Important content is coded as a CSS background image.

    To display the header image, the code below uses an HTML <div> element with a background image coded using CSS encapsulated in an HTML link element (<a>). The CSS style rule is linked to the <div> element’s id attribute, “headerimg”. Normally, there is no accessibility issue when using CSS background images. But in this case, the header image is the main heading on the page. Therefore, its content should be accessible to adaptive technology through the alternative text attribute. Unfortunately, alternative text can only be added to hard coded images not CSS background images. The CSS style rule is found in the screen.css file or below:

    <div id="header">
    <a href="Bad.html"><div id="headerimg"></div></a>
    </div>


    CSS code

    #headerimg {
    background-image:url(../img/Header.jpg);
    width:552px;
    height:150px;
    margin-left: 15.5em;
    }
  2. Good Code – The CSS background image is hard coded as an image with alternative text in a HTML heading element

    The header image and parent link element act as the main heading for the page and therefore should be encapsulated a HTML heading element. HTML heading level 1 (<h1>) opening and closing elements are added around the entire link element, which encompasses the HTML <div> element and header image. The HTML heading level 1 element was chosen because the image describes the main topic of the Web page, “Indiana University Web Accessibility Class.”

    <div id="header">
    <h1>
    <a href="Good2.html"><div id="headerimg"></div></a>
    </h1>
    </div>


    As stated above, because the image is now part of a heading it should be coded as an image with alternative text, instead of a CSS background image. If no alternative text is present, the heading and link will appear empty to adaptive technology. The HTML <div> element is changed to an HTML <img> element. The image should have its height and width specified in the source code instead of in the CSS style rule to ensure the page layout does not expand when the image is loaded. Finally, a new CSS style rule is added to the image to reposition it in the center of the parent HTML <div> element.

    <div id="header">
    <h1>
    <img src="img/Header.jpg" width="552" height="150"
    alt="Indiana University Web Accessibility Class" />
    </h1>
    </div>


    CSS code

    .thrColElsHdr #header img {
    margin: auto;
    }

Wrap Up

Properly using CSS can increase accessibility. However, when improperly used, CSS can adversely affect accessibility for those who use adaptive technology to access the web or who need to modify web pages to fit their specific accessibility needs. Remember, CSS creates the most accessible Web pages when used to style content that already exists in the underlying code. Therefore, a good rule of thumb is to create page content first and then use CSS to style it for presentation on the Web page. By following this rule, no matter what style is used, the content will be accessible to all users of assistive technology. In future blog posts more advanced CSS techniques will be discussed.