Getting Started

Let's Go!

This Fast Track demonstrates how to create the accessible, static Navigation section on the left side of this and each web page in this tutorial.

Scenario

There are times when we need to build a navigation tree stucture to accomodate a small document collection. There is no need to have this nav list expand or contract, so employing a Behavior layer (unobtrusive DOM/JavaScript) is not appropriate.

• We have a technical document module consisting of twenty or less topic web pages.
• We need to build a simple and user-friendly navigation tree, listing and hyperlinking the topic names to the topic web pages.

Objectives:

• Build:
  1. a valid, semantic, navigation Structure layer according to current web standards
  2. a valid navigation Presentation layer to accompany the structure layer
  3. full accessibility for all users in the structure and presentation layers
  4. static navigation without employing the Behavior (unobtrusive DOM/JavaScript) layer, i.e. expand/contract

Each section of the navigation div container will be illustrated in its own Topic throughout this tutorial, containing its respective structure and presentation code.

Let's move to the Nav Container topic to get started.

top