Adding CSS and Accessibility to Your Website

Presented by: Kevin Lanahan, MDI, kevin.lanahan@insurance.mo.gov
MOTEC: January 20, 2004; January 22, 2004; March 2, 2004

Intro: Why use standards-based coding?

Reason 1: Section 191.863 RSMo says that Missouri agencies must comply with Federal Section 508 accessibility guidelines . It's the law. You gotta do it.

One of the easiest ways to do this is to use standards-based coding, starting with basic HTML, and using CSS to mark it up. This allows you to start with an accessible page (after all, what is more accessible than plain text?) and add design elements to enhance the visual impact for the general public.

Reason 2: You can eliminate browser-specific code. All the major browsers (IE6, Mozilla, Opera) do a decent job at supporting XHTML and CSS1 and CSS2. Any Netscape 4.x holdouts can get a plain version of a page by hiding the CSS code from them.

Reason 3: Your site will become much easier to manage once you rid it of nesting tables and obsolete tags. If you've ever been lost in a nested table maze, you know how difficult it can be to add sidebars and other sections to your page. Using plain text and semantic markup will help you keep your site tidy.

Fig 1: Example of nested tables

Advantages of standards-based coding

Accessibility
Bandwidth
Ease of update
Backward compatibility
Forward compatibility

Accessibility

When you write standards-based code, you separate content from presentation. What you are left with is some pretty basic markup. The more basic the markup is, the more accessible the content will be.

Table-based sites are generally less accessible than CSS-based sites due to the way screen readers read tables.

Bandwidth

Using structural markup and CSS can reduce your file size from 20 to 70% by eliminating nesting tables, font tags and other markup. This can result in huge bandwidth savings. http://insurance.mo.gov/motec

Ease of update

Ever get lost in a maze of nested tables? Worry about whether your contributors will use the right fonts and colors? By using standards-compliant code, you let your style sheets take care of those details while you and your web maintainers concentrate on updating your content.

Backward compatibility

This doesn't mean that your page will look the same on old browsers. It means that old browsers will get your content, even if they don't get your style. Standards-based coding is backwards (and cross-browser) compatible.

Forward compatibility

Does your site work on a cell phone? Will it work on the next generation of browsers? It's much more likely to work if you follow the standards.

The tools of the trade

The standards: What to use and why

HTML 4.01

The classic. You know it, you love it, you can't live without it. But is an obsolete standard, having been replaced in 2000 by XHTML.

XHTML 1.0

The current standard. It is not much different, but it requires

All tags to be in lowercase
All tags to be closed, even if it is an empty tag, like <hr>.
All attributes to be quoted
Documents must be well-formed

Transitional vs. Strict

HTML and XHTML come in two flavors, transitional and strict (OK, there is a third, for frames, but friends don't let friends use frames).

Transitional (also known as “quirks” or “loose”) mode tells the browser that it all right to use deprecated tags and attributes, background colors, unclosed tags and all the other bad habits you've developed.

Strict (also known as “strict”) doesn't let you get away with anything. As a result, you will get reliable results on all standards-compliant clients.

CSS 1.0 and CSS 2.0

This is what makes your plain-Jane page sparkle. You can control nearly every aspect of your page with a few commands.

CSS1 arrived in 1996, but it took several years before the standard was supported very well. Version 4 browsers adequately support CSS1. It contains rules to format your text, divisions, images and lists.

CSS2 arrived two years later and included rules for positioning, paged and audio media. All Version 6 browsers have good support for CSS2, although there are differences among them.

The tools:

Dreamweaver MX
DMX-Tidy extension
UsableNet 508 Accessibility extension
TopStyle Lite : a CSS editor
Firebird 0.7 with the Web Developers Toolbar
Apache 2.0 server installed to run locally

Setting up the site in Dreamweaver

Open the CSSAssets.zip file.
Extract the contents of CSSAssets.zip to C:\ motec
Open Dreamweaver

Define new site

Local Info

Site Name: CSS class
Local Root Folder: C:\motec
HTTP Address: http://localhost/

Preferences

Invisible Elements: For server-side includes, check “Show Contents of Included File.”

Load extensions

DWX Tidy
AS-MX 2.0 validator

Getting to the core of the page

Look at your page with Firebird, using the Developer's Toolbar.

Outline the tables and images. Boy, there are a lot of them. Try to validate the page. How compliant is it?

What about your pages?

We need to think about the kinds of information in our page and the structure of that information .

Identify structural components of page.

Think in terms of purpose. There is an identifying header, a navigation bar, a navigation sidebar, content and a footer.

How are these components act? Are they lists? Images? Paragraphs?

Strip all non-structural tags.

Let's get rid of all those that get in the way of pure structural markup. Lose all the <table>, <tr>and <td> tags. What do you need an <hr> for, anyway?

Review what is left: a basic text page…

…with a few pretty pictures.

Fixing your code

Running the validating tools.

File>Check Page>Validate Markup. You will get a list of all the things that don't validate on this page. Click on an item. Dreamweaver will take you to the line of code that isn't validating.

Fixing it yourself

Yeah, you could fix it yourself, but there's an awful lot to fix. You don't even know what the error messages mean.

Decision time

HTML or XHTML? Strict or Transitional? Let's go with XHTML Transitional for now.

How should we attach the style sheet? Link or @import?

In November 2003, the MDI website had 233,000 hits, and 8,000 of them (3.46%) were Mozilla browsers (Netscape and Mozilla). Of those 8,000 hits, only 1,400 were Netscape 4.x browsers, or only 0.59% of the monthly hits.

Since NS4.x has a hard time rendering a lot of CSS, maybe it's time to not worry about NS4.x anymore and write for standards-compliant browsers.

Using DMX-Tidy

Tidy to the rescue. You can download this extension from the Macromedia Exchange under “Style/Format”. DMX-Tidy is based on a free program available at http://tidy.sourceforge.net/ .

Commands>DMX Tidy. Configure it to output HTML and go. Then use Commands> Source Formatting to pretty it up (you can do this to a Word HTML document, too).

Tidy will automatically add the DOCTYPE to your document, which is the first step in validation and standards compliance.

Validate again

Voila! Oops. There's still a little work that needs to be done, but we'll take care of that shortly.

Let's Get Structural

A big part of standards-based design is the structure of your document. This means identifying different parts of your page and applying CSS rules to the parts.

Every CSS rule has a selector and a declaration . The declaration is made up of a property and a value . Properties that sound like they should be two words are hyphenated.

Example: #head { font-family: Verdana, Arial, Helvetica, sans-serif;}

Rule: #head
Selector: font-family
Declaration: Verdana, Arial, Helvetica, sans-serif;
This CSS rule would apply to all elements in the DIV with the id of “head”.

Example: p { font-size: 12px;}

Rule: p
Selector: font-size
Declaration: 12px
This CSS rule would apply to all <p> tags in the page.

Using id and class attributes

An id is an element that appears only once in your web page. In XHTML-strict, it replaces the “name” attribute. You can have many styles in your style sheet that affect a single id, but you cannot have more than one id in your webpage.

HTML Example: <div id=”head”>

CSS Example:

#head {background-color: #fff; color: #000; }
#head img { border: 0; }

Classes are styles that may be reused on different elements in a page.

HTML Example: <h1 class=”center”>, <p class=”center”>, <hr class=”center”>

CSS Example: .center { text-align: center; }

It is a good idea to explicitly declare classes for alignment and display.

Using <div> tags.

Many elements are not allowed to run naked in the <body> tag. They need to be wrapped up in something, like a <div> or <p> tag to give the page its structural markup. Wrap up the banner and top navigation in a <div id=“banner”> tag. Create a <div id=“side”>, <div id=“content”> and <div id=“foot”> tag, too. Validate again.

Let's get semantic

“Semantic” in this case means that the markup on your page has specific meaning—it describes a part of the page.

<h1> means the main topic of the page.
<h2> means a secondary or subtopic on the page.
<p> means a paragraph.
<ul> means an unordered list, and <li> is an item within the list.
And so on and so on

A <font> tag doesn't impart any meaning to the word. It just describes what the word looks like. It is not a semantic tag.

We can set generic styles here for <body>, <h1>, <h2>, <img>, <p> and add classes for .center, .right and .none.

Ouch, it hurts my head

The hardest part of this process is remembering what the tags are for in the first place. You don't start the first header on a page as an <h3> because the font is the “right size”. You make the first header an <h1> because it is the most important. You can style the font to make it smaller.

You don't need to use extra <br /> or <p> tags to put white space in your pages, either. You can format paragraph, list and header margins to adjust the amount of white space you need.

The box model

No browser supports all the standards the same way. One huge problem is that IE6 only really behaves if you code to a strict standard.

The biggest problem with IE is that it uses a flawed version of the “box model”. The box, according to W3C specs, is the width of the content element plus the width of the padding, border and margin (figure2).

The style:

div.boxtest {
border:20px solid; padding: 30px; margin:0;
width:300px;
}

should give a box size of 400px (300px width + 20px left border + 20px right border + 30px left padding + 30px right padding).

Figure 2: The W3C box model

IE includes the padding and border in the width, so the content box is actually:

300px-20px-20px-30px-30px = 200px

This can play havoc with your layout.

The work-around is to use a box model hack, which fools IE into displaying the correct width by calling a style it cannot parse.

div.boxtest {
border:20px solid; padding: 30px; margin:0;
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
html>body .content {
width:300px;
}

IE cannot interpret th e “voice-family: "\"}\""; voice-family:inherit; ” code and ignores the style that follows it, which most other browsers can recognize.

The “ html>body.content {width:300px;} ” style is also called the “be nice to Opera” rule, since Opera also fails to recognize the voice-family style but correctly handles child dependency styles.

Headers, footers and sidebar styles

Rethinking the page elements

Navigation bar: Why not use text? Hide a delimiter with class=“none”.

Sidebar: Isn't this really a list? Let's make it one. Use cutouts of graphic elements for the special items.

Footer: This is plain text. With style sheets, we can pretty it up and not lose any accessibility.

Positioning

Head: Set width for entire #banner id, set font styles. Review and adjust margins and padding.

Side: Set width, float, color, list, and font styles. Review and adjust margins and padding.

Content: Left margin to push everything out to clear sidebar. Review and adjust margins and padding.

Foot: Set clear, font styles, link styles and text alignment. Review and adjust margins and padding.

Tweaking

Adding color to entire sidebar: make new div, add background image

Centering page: set body margin to auto, add margin to banner and content. Use Tantek box model hack.

Sidebar: add margins, new graphic elements. Need to make new ids.

Text menu for parks site: set font, colors and alignment styles.

Footer: make new <div> tags to put address and contact information

Rollovers made easy: choose a different color and background color for a:hover and a:active

Server-Side Includes

Carving out your components into mini-pages

Create a new folder called “SSI”.
Create a new blank page named “head.htm”. Make sure there are no <head> or <body> tags in the new file.
Take the <div id=”head”> tag, highlight it, cut it, and paste it into “head.htm”.
Rinse. Repeat.

Adding the SSI back into the page

On your carved-up page, put your cursor at the top of the page (right after the <body> tag). Select Insert>Script Objects>Server Side Include. Navigate to “SSI/head.htm” and select it.

Do the same for the other includes.

Enhancing accessibility

Using the built-in accessibility report:

DW has a WAI validator built in. If you go to File>Check Page>Accessibility, DW will validate your page against the WAI guidelines. Unfortunately, our standard is the 508 guidelines, which is slightly different.

Using the UsableNet 508 Accessibility report:

This is an extension available from the Macromedia Exchange at http://www.macromedia.com/cfusion/exchange/index.cfm

It gives you a 508 validator you can access from your Results panel.

Fixing the page

Click on the item in the results panel. It will take you to the errant line in your page.

Other accessibility issues

Tables :

Tables should be restricted to data tables as much as possible. When you do need a table, use the “summary” attribute to describe the table, use header cells (<th>) to identify headings, and use the “scope” attribute to identify headings with data cells.

You should also use <caption>, <thead>, <tfoot> and <tbody> to identify sections of the table.

Example:

<table cellspacing=”0” class=”data”>
<caption>This is a table caption</caption> 
<thead> 
     <tr><th scope=”col”>Column 1</th> 
         <th scope=”col”>Column 2</th> 
         <th scope=”col”>Column 3</th></tr> 
</thead> 
<tfoot> 
     <tr><th scope=”row”>Total:</th> 
         <td>Column 2 total</td> 
         <td> Column 3 total </td></tr> 
</tfoot> 
<tbody> 
     <tr><th scope=”row”>item 1</th> 
         <td>C2CR1 item</td> 
         <td>C3CR1 item</td></tr> 
     <tr><th scope=”row”>item 2</th> 
         <td>C2CR2 item</td> 
         <td>C3CR2 item</td></tr> 
</tbody>

Form labels

All form elements (text boxes, radio buttons, etc.) need to have a label associated with them to describe what the form element is for.

Example:

<label for=”lname”>Last Name</label>
<input type="text" name="lname" id="lname" />

Skip navigation

Users should be able to skip repetitive links, like those in the header and sidebar of the page. Otherwise, users with screen readers may end up having to tab through your entire navigation scheme to get to your content. These links can be hidden with CSS for users with no disability.