home about/faq features tutorials resources members search

Previous | Next


Achieve Accessibility with Dreamweaver

By Virginia DeBolt

Source Order and Skip Navigation

A common barrier to accessibility is the failure to address the needs of visitors who are unable to navigate the site with a manual pointing device, such as a mouse. Accommodating users who rely on the Tab key can be a daunting task unless the content is structured logically.

According to Elderweb, the “ideal” web page would present text in a logical order to every user agent:

  1. The title of the page.
  2. For long pages, a summary or abstract of what is on the page.
  3. The main content of the page.
  4. Secondary content of the page (the kinds of things that might be displayed in a right column or inset box).
  5. Site navigation and other information not intrinsic to the main content.

Browsers and assistive devices read English documents from left to right and from top to bottom. The order of the HTML from left to right and top to bottom is called document flow.

Since not every document meets the ideal described above, many use skip navigation links. A skip navigation link allows the user to tab directly to the content. There have been numerous attempts to provide skip navigation links that are not visible to the normal user, but which would be usable by screen readers. For example, a negative margin of 1000px to move a skip navigation link out of the viewport, while still allowing it to be read by a screen reader.

The current wisdom on best practices for skip navigation is to make it visible in the viewport and to use the words "skip to main content" as the link text.

If your document contains a div for the main content that is identified with a named id, Dreamweaver can create a link directly to that id. Highlight the link text and select Insert>Hyperlink.

The DW Insert Menu commands

Before you select Insert>Hyperlink, you need the name of the id to link to and  the name of the HTML page, if it is different from the page you are on, to complete the dialog box. You type this information in the dialog box.

DW Hyperlink Dialog Box

You could also manually type the same information in using Code View or the quick tag editor:
<a href="#content">Skip to main content</a>

Navigation and the :focus Pseudo Class

When tabbing through a menu, the currently selected element can be indicated with the a:focus pseudo class.

Dreamweaver does not include a:focus among its pseudo class options.

DW pseudo class options

As with other advanced selector names, you can type the a:focus selector in the Selector field when defining a style for a:focus.

type your own selector name

In your CSS, the order of the links should be Link-Visited-Hover-Focus-Active to ensure that the pseudo class will work in most normal situations.

Use Code View or the Quick Tag Editor to add the class to the code. Here's a code example:

a:focus:hover { background: white }

Pseudo class selectors can be combined, as you can see in the code above. Focus works for those using the Tab key, hover for those using the mouse.

This is not widely used yet, and it provides no value for a person tabbing through a site using a screen reader. It does provide a visual cue to people tabbing through a site who can see what they are doing.

Previous | Next





Learning Podcasting by Carolyn Wood.


Complete list of past tutorials.


Printable version of this page

Link to us

Join the discussion lists

passionate about the web