Crawford Design

Logo

Markup and CSS

Page Structure, Tables and Styles

Page Structure

When putting a page together it is very important to structure the XHTML of the document as you would read it. Screen readers, like JAWS, read XHTML markup. Screen readers don’t read the content as it is displayed visually in a browser. Disable style sheets to find out if your page reads in a logical order.

Do not misuse structural markup for decorative and formatting purposes. For example, don't format an h1 tag and place it in the middle of a paragraph just to change the size of the text. Headers are block level elements and should never be displayed as an inline element. Another example of misuse of structural elements is the use of the blockquote tag to indent text. The blockquote elements is for quotations only.

In content implemented using markup languages, elements must have complete start and end tags, elements must be nested according to their specifications, elements should not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

Tables

Do not use tables for aesthetic reasons. Tables should not be used to build Web sites. Tables should be used for tabular data only. Misusing tables makes it difficult for users with specialized software to understand the organization of the page or to navigate through it.

External Style Sheets

Presentation of a document should always be controlled with external style sheets. Avoid using presentation elements like inline styles and the font tag embedded in the XHTML.

User Style Sheets

If you would like to allow users to override the default style sheet of a Web site, then do not be very specific when setting styles for common elements like paragraphs and headers. For instance if a style for a paragraph is set like the example below, a user’s style sheet can override it.

p {
font-size: 12px;
font-color: black;
}

But, if a style sheet is more specific and the same paragraph is set like the example below, a user’s style sheet cannot override that. The IDs are too specific. A user would have to know you are using IDs named wrapper and leftcolumn.

#wrapper #leftcolumn p {
font-size: 12px;
font-color: black;
}

Image Replacement

Often, designers won't be satisfied with CSS-formatted HTML text and will use images in the place of the text. The best way to do image replacement is to overlay the image on top of HTML. If images in the browser are turned off, the HTML text will be revealed.

In the example below the h1 HTML text is replaced with an image. An empty span with a background image is placed over the HTML text. There are some provisos with this method: An otherwise meaningless span element is required, the size of the real text must always be smaller than the size of the text image, and the text image cannot be transparent.

Introduction

#intro {
width: 12em;
height: 3em;
position: relative;
border: 0;
padding: 0;
margin-top: 0;
}

#intro span {
background: url(/webaccessibility/img/intro_title.gif) no-repeat;
width: 100%;
height: 100%;
position: absolute;
}

Image Replacement Techniques to Avoid

Avoid other text replacement techniques like using the HTML img element. The text in an image is only accessible through the alt attribute, which can be cumbersome to screen reader users.

Using styles to position HTML text off the screen and replacing the HTML text with an image onscreen also causes problems because an image may not load, leaving no visible text on the screen.

Lists

When creating lists make sure to use the ul, ol or dl list types. Do not create a list by using breaks (br) and indenting with non-breaking spaces.

Below is an example of an ordered list with a properly nested unordered list. Nested lists should always be contained in a parent list item. Please view the page source for the markup.

  1. Tylenol
  2. Aleve
  3. Advil
    • Tablets
    • Gel Caps
    • Capsules
  4. Bufferin

Unordered Lists

Do not use img bullets to make lists look fancier. Do not use the list-style-image property to create fancy bullets. If the list-style-image property is used the word bullet will be announced for each list item, which can be annoying and very repetitive to people using screen readers. Use the CSS background property to add fancy image bullets to lists as seen in the unordered list above. It is important to use the background property because the word bullet is not announced before each list item.

Ordered Lists

Most ordered lists are very helpful to the visually impaired and screen readers speak them very well. The two list types that screen readers do not read properly are lower-roman and upper-roman, which produce a list styled with roman numerals. The screen reader does not speak numbers as 1, 2, and 3. The screen readers speak the letters of the roman numerals as V, I, and X instead.

When nesting lists make sure to use different list styles. Don't list a numeric list inside a numeric list or alphanumeric list inside of an alphanumeric list. Using different list styles helps differentiate the lists for screen readers.

  1. Red
  2. Orange
  3. Yellow
    1. Lemon
    2. Sunshine
    3. Traffic Sign
  4. Green

Validation

To ensure that your XHTML and CSS are valid and accessible it is necessary to use a validation service. There are a number of tools that can be used.

Tools

Remember, just because an XHTML page passes validation does not mean it is accessible. Judgement testing by individuals needs to be done as well. The markup of a page may validate but the content may not be accessible or read properly to a person who is disabled.

It is also possible for a document to be accessible and not validate. Flash does not validate, but Flash and the page it is on can still be accessible. A good practice is to send a page through a validator while it just contains XHTML and CSS to make sure it passes validation before adding Flash or a component that may cause the page to fail validation.

Doctype

Be sure to include strict Doctype at the beginning of a document so a validation service knows how to validate a document. Do not use transitional Doctype.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

References

Top