web Accessibility

Styles (CSS Style Sheets) and Headings - Checkpoint (d)

The law states:

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

If you use a CSS style sheet, your web site should be readable and make sense without the associated CSS file. The web site does not have to be visually appealing with style sheets turned off, but all the information must linearize (flow) correctly. Linearization is how your content is ordered with your style sheet turned off.

With the style sheet turned off, are headings, paragraphs and lists obvious and sensible to a reader? If not, add heading markup to properly nest headings and sub-headings, and structure lists using ordered and unordered markup.

With the style sheet turned off, does the order of the page content make sense as read? If it does not, rearrange your code so that the things you want read first are at the beginning of your HTML code. You will most likely have to worry about this only when you use CSS's absolute positioning features.

With the style sheet turned off, does any content appear that was invisible with style sheets turned on? All content must be visible to the reader with style sheets on and off. For example, a Skip to Content link that is required at the top of a page must be visible always.

See the testing section below to see how well your pages linearize with style sheets turned off.

An Example Web Site with Style Sheets On

You should note the visual linearization of the web site. Keep track of the order of the content from left to right and top to bottom as this is how most people read. It is perfectly fine for your content to linearize in a different way. Just make sure it is the way that you want your information to be displayed.

Screen shot of Meyerweb.com with style sheets turned on.

The Same Web Site with Style Sheet Turned Off

As you can see below, turning off the style sheets does not really affect the content of the web site. It just looks a little less pleasing. This web site uses CSS as layout and decorates the page. As you can see, CSS can layout a web page as well as tables can. The designer of this Web site chose to put his navigation links at the end of his code. When his web site linearizes, the navigation links at the right hand side of his page are at the very bottom (not shown in the screen shot). He provides invisible links to jump to these navigation links at the top of his page. This is so users do not have to read the entire body of the Web site to get to his navigation links. This is good practice and is outlined in Skip to Navigation.

Screen shot of Meyerweb.com with style sheets turned off.

Headings (section headings)

Headings orient users to the page, and inform them about the page's organization and structure. They classify the information on the page and allow users to scan the text to easily find the information they are looking for. Headings should be written so that they are unique, descriptive, and clearly identify the purpose of the content the heading represents. Take time to develop headings that make sense to users even if taken out of context. Headings should also be used consistently across your Web site.

Headings should always be marked up using the HTML heading tags and properly nested by level, e.g. h1, h2, h3, and so on. The h1 tag should always be used for the page title. The style (look and feel) of the heading should be controlled with CSS. Use of the correct markup allows screenreader users to browse a web page using only the headers, much the same way a sighted user scans a page.

Graphic headers should not be used. The use of graphic headers creates problems for screen reading technologies where the heading mode is used to read the page (as described above).

Testing for Styles and Headings

For testing techniques and tools, refer to Checkpoint D (styles) in the CSU Cal Poly Section 508 Manual Website Evaluation Guide found in the Tools section of the Accessibility Compliance Guide.

Information is AvailableHelpful Web Sites