Guidelines and Manual Checks

Avoiding Errors at Page Creation

The best way to avoid errors at the beginning is to create pages using the Dreamweaver or Contribute Templates (see Dreamweaver page creation or Contribute page creation instructions). Contribute is recommended for home use; both programs can be downloaded once by CSUN faculty via the ITR download page (https://www.csun.edu/itr/downloads/index.cgi).

The most common source of HTML errors comes from copying invalid code from non-template-based pages. The easiest way to avoid this is to paste into your web page using "Paste Text Only" function (Ctrl-Shift-v).

You can save yourself a lot of time and aggravation by checking a few items yourself before running the page through the automatic validation and accessibility checkers.

Page Structure

Headings

The main heading on your page is formatted as <h1>. The next structural divisions of your page should be organized under <H2>-formatted headings; subsections of material under an <h2> heading can be further organized under <h3>headings, and so on.

In order to conform to accessibility guidelines:

• Heading format must be used where applicable for structural purposes (not just to make text big or bold)
• Headings have to be properly "nested," without skips. For example, you can not follow an <h1> with an <h3>.

You can check the headings structure in your page using the Accessibility Toolbar. Open your page in Internet Explorer. In the Accessibility Toolbar, select Structure > Headings, or Structure > Headings Structure. Apply or fix headings format as necessary:

• Format headings in Contribute
• Format headings in Dreamweaver

List Structure

Lists of items must have HTML list formatting applied to them. Unordered (or bulleted) list format should be applied to lists of items whose order is not relevant (as in a list of resources). Ordered (or numbered/lettered) list format should be applied to lists of items whose order is relevant (as in instructional steps). For more information, see When and How to Use Lists.

• Apply list formatting in Contribute
• Apply list formatting in Dreamweaver

Links

Does linked text make sense out of context?

Read the linked text out loud -- does it clearly identify where the link is taking your user? It is more helpful to link a descriptive phrase (see a, below) than a single word (see b, below). Never -- EVER! -- use "Click here" as a linked phrase.

1. Find out more about seventeenth-century printing process by examining the First Folio of Shakespeare's Works (PDF) facsimile from Octavo Press.
2. Find out more about seventeenth-century printing process by examining the First Folio of Shakespeare's Works facsimile (PDF) from Octavo Press.

Is each linked phrase on the page unique?

Repeated occurrences of the same phrase used to link to different URLs can confuse users using assistive technology. If using the same phrase repeatedly is unavoidable, please contact the web master for help.

Are adjacent links separated by more than whitespace? (table cells and paragraphs don't count as separation!)

Adjacent links must be separated by:

• list structure (each link must be a separate list item)
  • Formatting Lists in Contribute
  • Formatting Lists in Dreamweaver
    
  OR
• unlinked text (such as ; , / . | - etc.). You can make the unlinked text invisible by applying the "invisible" style to it.
  • Applying styles in Contribute
  • Applying styles in Dreamweaver

Do the links work?

It's best to test this once you have uploaded the page.

• Fix links in Contribute
• Fix links in Dreamweaver

Accessibility Toolbar Tip:

Select Doc Info > List Links to view linked text and links side by side.

Next: Running the Tests>>