Navigation Issues and problems:

Making your navigation consistent helps all users to find their way around your site. Whether you choose to put your links across the top, down the left or right side, or somewhere else is up to you, but make them easy to find and use.

This is especially helpful to users with cognitive problems. We discussed screen readers and how they will negotiate a simple layout table in the layout section.

For a blind user, left-side navigation links will be read before the main body text. It’s fine to hear the navigation links the first time, but imagine a site that interests you greatly, so you visit twenty pages within it. Do you really want to hear the list of navigation links every time you switch to a different page? No. On the other hand, it is important to include navigation links on every page and it is best to leave them in the same place.

Because our navigation links will be read by screen readers before the main body text is read, there needs to be a way for a user to skip the navigation links and jump directly to the page content.

Solutions:

A link that allows users to skip repetitive navigation links will solve the problem. Just before the first link, I am going to create a link that reads, “Skip navigation links.” This link will take me to the first line of the page body, where the page content begins. Don’t forget to separate this link from the next one (AboutUs) with a spacer graphic. Take a look at this technique. As a sighted user, it will be difficult for you to know what is happening when you click the link, but it is jumping to the headline, “Welcome to Our Web Site.”

I’ll admit that it’s ugly, but here’s a trick. Using your external style sheet, create a class of link entitled “SKIP” and define it to have a font size of 2 pixels and be almost, but not exactly, the same color as the navigation bar background. Apply this class to the SKIP link and watch it disappear. A screen reader will still find it, but sighted users won’t see it. Users who override your style sheet will see it, but this is not a problem.

This technique requires two actions. First, define the class SKIP in your style sheet:

A.SKIP { font-size: 2px; color: #FFFF99; text-decoration: none; }

Next, apply the class to the link in your HTML code:

<A HREF=”#SKIP” CLASS=”SKIP”>Skip Navigation Links</A>

Issues and problems:

When a user reaches the bottom of the page, it is nice to have the navigation links repeated for easy access. If a page is quite long, a user appreciates the ability to access the links at the end of the page without having to negotiate their way back to the original links. Many pages use this technique, but be sure that links are separated by more than just white space.

Solutions:

Let’s add a navigation area to the bottom of the page, using a pipe as a separator character.

Issues and problems:

If a link will open a page in a new window, the user needs to know that this will happen. It is difficult to know that you are on a new page when using a screen reader. The subject page contains a link that opens in a new window (the advertisement) and the user is not warned that this will happen.

Solutions:

If there are links that open in a new window (such as the advertisement on this page) you can simply state that this will happen in the text. If you don’t want to do that, you can use another tiny transparent image just inside of the link containing an ALT tag which reads, “This link will open in a new browser window.” This message will not be visible to sighted users because the spacer is so small. An example is below:

<A HREF=”linktosite” TARGET=”_blank”><IMG SRC=”transparent.gif” HEIGHT=”1″ WIDTH=”1″ BORDER=”0″ ALT=”This link will open in a new browser window”>linking text</A>the rest of the text.

Let’s apply it to the advertisement so that you can see that sighted users can’t see it.

Data Tables

Issues and Problems

We discussed tables and their use for layout above and covered some issues with screen readers. While you should limit your use of layout tables to only one, if possible, tables are certainly appropriate for actual data. The subject page contains a data table showing the savings resulting from the use of the company’s products. It’s a fairly simple table, but could be much more clear to users with screen readers if it were coded differently.

The following changes to this table are needed:

1. Include the attribute SUMMARY in the TABLE tag to describe the table. (For layout tables, I usually say SUMMARY=”Layout table.”)
2. Use the CAPTION element for the table’s caption.
3. Use TH tags to identify that the top row contains the column header information, and use the SCOPE=”COL” attribute to further define the purpose of the table headers (they describe what is below them). If you use table headers in the far right column, the SCOPE=”ROW” attribute would be the appropriate one.

Note that items 2 and 3 should not be used for tables that are used strictly for layout. These attributes are intended for the presentation of data.

Solutions:

Below are the items that I added, shown in bold:

1. <TABLE BORDER=”1″ CELLPADDING=”8″ SUMMARY=”This table lists from left to right the names of products, followed by the annual costs before use of the product, followed by the annual costs after use of the product, followed by the annual savings.”>
2. <CAPTION><STRONG>Our products can save you money!<BR>See for yourself:</STRONG></CAPTION>
3. <TR>
   <TH SCOPE=”COL”>Product Name</TH>
   <TH SCOPE=”COL”>Annual Cost<BR>Before Use</TH>
   <TH SCOPE=”COL”>Annual Cost<BR>After Use</TH>
   <TH SCOPE=”COL”>Savings</TH>
   </TR>

Also, you would use TH cells and SCOPE attributes on the left columns:

<TH SCOPE=”ROW” ALIGN=”LEFT”>Zeppelin B2000</TH>
<TH SCOPE=”ROW” ALIGN=”LEFT”>Extenda-Bar 24</TH>
<TH SCOPE=”ROW” ALIGN=”LEFT”>Supercharge 56</TH>

Look at the table now and see that it hasn’t changed very much to a sighted user, but it is much more clear to someone who is using a screen reader. By the way, you can left-justify the CAPTION and TH cells if you want to.

Sue Bolander started Webworks7 in 2000, with a focus on creating Web sites for small business and government and making Section 508 compliance a standard feature of her designs. She is a Certified Master HTML Programmer and is also certified in Web Design for Accessibility. Webworks7 provides site design, redesign, JavaScript programming, and training in client-side Web environments.