Course Organization and Navigation

Discussion

Consistency breeds familiarity and increased confidence. But not only should structure be consistent, it should also be similar. That is, if I use particular language in the headings on one page and it establishes a pattern for organizing my content within the entire course, as much as possible I should be using the same or highly similar language on other content pages. In other words, if I have an H3 "Exercises" section on one page, I should not name it "Homework" and introduce it with an H4 on other pages. Choose the clearest and most descriptive heading titles. Keep the use of heading levels consistent and make the language choices echo throughout your course.

Discussion

This Best Practice is not meant to be limiting. Rather consistent appearance makes for a more professional look and feel. In certain cases, it may be appropriate to color-code certain chunks of content. For example, "Special Notes" that interrupt the text with important information might be a specially styled box with more padding and a light yellow background. Or you may want to make the section of content dealing with "Genetic Evolution" a different color than that which deals with "Evolution Due to Environmental Factors." Just make sure all "Special Notes" get the same style and color and all sub-pages in the "Genetic Evolution" section remain stylistically consistent. A caveat: keep it simple. Style sheets can do amazing things with the appearance of text. Experiment as much as you want—on your own, but not in course content.

Discussion

As we mentioned in the introduction to this section of Best Practices, links can be read by screen readers apart from the words that surround them on the page. Even when tabbing through a web page, a sighted student's ability to decide if a particular link is something he/she is interested in following is improved if the link, which is styled differently from surrounding text and appears somewhat autonomous, provides a clear indication of what it points to.

Same goes for titles, except a title should convey not only the page content but also where that content is, structurally, within the course. You should use your best judgment on how much context you need to provide; imagine that you are given only the page title from which to determine the page's content and location in the particular course. Which is better: "Module 1" or "Module 1: Environmental Factors – Theories of Evolution – Biology 650." The jury is out on what character to use to separate the parts of a title. We tend to prefer a dash or a colon with a space on both sides. One can also argue about the order of the parts. Do we work from page content out to course number or title or from course title to page content? Starting with the page, it makes skimming with a screen reader easier because the user has less to read before getting the gist. But starting with the course number or name allows for bookmarks in the browser to be alphabetized so that titles from the same course follow one another.

Example

Screen Shot: Choosing a good title for your document:

Figure BP-Course Organization-1. Click image to enlarge.

Discussion

In designing your own content structure, you have complete control over page-to-page navigation. In such a case, the key for usability in course organization is to keep the navigation consistent across all pages, whether the navigation is a list of links or an actual navigation bar, such as one would see on a large web site. Consistent navigation allows for screen reader users to have a familiar set of references that are always identical. This increases both page-to-page navigation but also, and perhaps as importantly, helps the student feel confident he/she is aware of where to find all of the course content. For students with cognitive disabilities, consistent navigation reduces cognitive load by providing a familiar reference, something the student does not have to be distracted by or worry over. Finally, a text link back to the course "home" page incorporated into the main navigation is preferable to the all-too-common practice of creating a clickable course logo or some other non-text anchor back to the home page.

Discussion

• use nested lists, if needed
• use CSS to manipulate appearance (see Content Layout and Styling)

Screen readers can browse the contents of lists with simple keystrokes. In addition, most screen readers announce the number of items in a list before they begin reading it. For these reasons and because of the semantic appropriateness and styling possibilities of lists, use of unordered lists for grouping navigation links has become a web convention. Virtually all modern web sites organize their navigation bars and menus using unordered lists. This may not be obvious to visual users of the web because often these navigation elements get sophisticated styles that make them appear similar to the menus of desktop applications. But if you disable the style sheets or look at the code, you will see unordered lists are the rule for site navigation schemes.

Examples

Screen Shot: Web page with the CSS disabled reveals its heading structure and flow of document:

Figure BP-Course Organization-2. Click image to enlarge.

Screen Shot: Unordered list styled to look like a horizontal menu:

Figure BP-Course Organization-3. Click image to enlarge.

Code Example: Unordered list styled to look like a horizontal menu. Showing CSS and HTML and using the .semantic off-left class defined next example, for Best Practice 6:

 ...
    ul#nav
    {
      list-style: none;
      background-color: #036;
      color: #fff;
      float: left;
      width: 100%;
      font-family: Arial, Helvetica, sans-serif;
    }
    ul#nav li a
    {
      padding: 0.2em 1em;
      background-color: #036;
      color: #fff;
      text-decoration: none;
      float: left;
      border-right: 1px solid #fff;
    }
    ul#nav li a:hover
    {
      background-color: #369;
      color: #fff;
    }
  </style>
</head>
<body>
  <h2 class="semantic">Site Navigation</h2>
  <ul id="nav">
    <li><a href="#" id="selected">Course Home</a></li>
    <li><a href="#">Content</a></li>
    <li><a href="#">Discussion</a></li>
    <li><a href="#">Grades</a></li>
  </ul> 
  ...

Resources

• Listamatic: http://css.maxdesign.com.au/listamatic/

Discussion

As mentioned, screen readers can navigate by heading. Browsing a page's headings is one of the first things a screen reader user will do when entering a page. Introducing the site navigation with an H3 heading (or other level as appropriate to page structure) such as "Course Navigation Bar" provides an easily discoverable "waypoint" for blind students. Such headings may be hidden from visual users using the "off-left" technique, if you feel the page design is adversely affected by having the heading visible.

Example

Code Example: CSS class for creating semantic but hidden/non-visual content. Also know as, “off-left” positioning. (This example comes from WebAIM):

.semantic
{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}