Using CSS to Simulate Markup - Don't

Contact Us or call 1-877-932-8228
Using CSS to Simulate Markup - Don't

Using CSS to Simulate Markup - Don't

  • Pages will not be readable if you use Cascading Style Sheets to simulate structural markup

If you use Cascading Style Sheets to simulate structural markup, your pages will not be "readable" when a user has style sheets turned off.

It is good, accessible web authoring to choose and modify the visual effect of heading content; it is not good practice to modify normal text to make it look like a heading. It is possible to make ordinary text with DIV's and SPAN's look like almost any HTML construct. This creates two problems:

  1. Your page is not "readable" with style sheets turned off (in the sense of the Section 508 provision above), and
  2. Even with style sheets turned on, assistive technology will not find the structural elements that it needs to help navigate the content.

The following examples illustrate this problem. This code fragment shows how a style element can simulate a heading tag - don't do it!

Code Sample:

StyleSheets/Demos/Code05.xml
<style>
.head { font-size: x-large; font-weight: bold;}
</style>
...
<h1>This is a true Heading Level 1</h1>
<p class="head">This is a Heading 1 created with Style!</p>

Here is the result. As you can see, the heading levels look exactly alike:

Code Sample:

StyleSheets/Demos/Code06.xml
<h1 style="font-size: x-large; font-weight: bold; color: #000; font-family: times, serif">This is a true Heading Level 1</h1>
<p style="font-size: x-large; font-weight: bold; color: #000; font-family: times, serif">This is a Heading 1 created with Style!</p>

These headings will not look alike when style sheets are turned off or not supported. In addition, they are not alike to assistive technology. IBM Home Page Reader, Version 3.0 will not only jump from heading to heading, but it will also read each heading with slight audio "ping" informing the user of the fact that the text is a heading. HPR 3.0 would read the true heading correctly, but would not even find the second heading using its "headings" navigation. JAWS and Window-Eyes use headings navigation with the "H" key. They won't find the heading created by styling the text.

It is conceivable that you could have a paragraph in your document, or the whole document, with the same text color and background color, with that "error" corrected in a style sheet. If you do that, and a user had style sheets disabled, then that user would see nothing. Mistakes like this one can have dire consequences and have led the Access Board to require that pages be readable even with style sheets turned off.

Next