Navigation Menu Bars

Most pages on your website have to serve two purposes; (1) Deliver actual content and (2) Present links to more content. Getting the balance right between these two tasks for any particular page requires careful thought. Content pages are primarily about imparting information or performing a task such as completing a form. On these content pages therefore, any navigation system becomes a hurdle that a visitor has to get over in order to obtain the content or perform the action.

Page structure

On most content pages you will want to offer your users two groups of links.

  1. For casual users, or those who have arrived at this page from a search engine, you will want to offer a top level (site-wide) navigation system so that they are encouraged to explore the site if this page is not exactly what they want.
  2. For people who are interested in the content of this page you want to offer links to similar, related, material once they have read the current content.

The usual practice is to provide a navigation bar across the top of the page to direct the user to the different main sections of the site. A further a sub-menu of links to pages relevant to the current section might be provided, usually down the left-hand side. We shall use this model for this lesson, but there is no golden rule about where you visually put your navigation bars on the screen – so long as they are consistent throughout the site. Remember that this positioning of elements should be done by CSS, always check that the underlying HTML sequence of navigation bars and content is efficient for assitive software and robots.

Skip links

It has become standard practice nowadays to start each page with a short series of site-wide links that include links to your home page, products/service, contact details, and your site map. This helps the casual visitor gain an overview of the site. However, to avoid frustrating visitors who are on their second or third page by constantly repeating this set of top-level links at the beginning of every page you can add a single link at the very beginning of a page that allows these users to skip the navigation bar and go straight to the content.

In practice this "skip links" option is very useful and should be used whenever you present a long list of navigation links. Keyboard users can get confused and frustrated if they have to keep on pressing the tab key to get through a series of navigation links that they know they do not want to use at the moment.

 

We shall use the following structure to explain how we reduce the navigation hurdles on a standard content page.

  1. Skip to content (link)
  2. Skip to secondary navigation menu (link)
  3. Top level navigation bar
  4. Page content
  5. Secondary navigation bar
  6. Anything else (e.g. advertisements)
  7. Footer navigation bar

Note that we have added a third navigation bar at the very bottom of the page (footer) so that visitors do not have to scroll back to the top of the page if they want to use any site naviagtion links.

Navigation bars

All navigation bars are lists of links. In our example the main site navigation is a horizontal list whilst the sub-menu is a vertical list. It is important that these lists are coded as lists in HTML so that assitive technologies, such as screen readers, can identify them properly in order to present them to the user. Lists of links also display correctly in text-only browsers. Each list of links must start with a heading that explains the purpose of the list (again this helps assistive software). This heading can be hidden from visual users by the style sheet. Blind users will be able to hear the heading read out aloud before they hear the links, thus they are able to set the links in context.

Horizontal navigation bars

Horizontal navigation bars use a list where the list <li> element is formatted in CSS to display "inline". There are a couple of additional formatting requirements in order to make horizontal navigation bars accessible.

  1. We need to make sure that there is a space between each of the links as they are displayed across the screen. This "non-linking" space marks the boundary between one link and the next. Thus, as the user passes the mouse cursor over each link it changes from a "hand" pointer to an "I beam" or "arrow" pointer in the space between the links. This change of cursor shape provides a good visual clue to the user and helps distinguish one link from the next.
  2. Keyboard users do not have a mouse cursor available, so they need to see a change to the actual look of the link when they tab to a link. This is done by defining a different colour for the link text when the text is "active" (using the pseudoclasses a:active and a:focus). We can change the background colour instead if we want, but we must not change the size or shape of the link. Changing dimensions whilst the user is on a page can make the whole page layout jump about as shown in the previous session.

In the following example we have defined a horizontal navigation bar using CSS

Sample CSS code

.topnav li {
display: inline;
list-style-type: none;
overflow: visible;
}

.topnav a {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
color: #000099;
background-color: #FFFFFF;
padding-right: 1.5em;
padding-left: 1.5em;
}

.topnav a:hover {
color: #FFFFFF;
background-color: #000066;
}

.topnav a:active {
color: #FFFFFF;
background-color: #000066;
}

Example of a well spaced out main navigation menu

The simple navigation bar shown above has been formatted in CSS so that there is a gap between each link and the colours of the text and background change when selected. Many other formatting options are available, for example a right and left borders could provide a vertical line between each link as shown on the footer menu below. You can easily use images for the background to create a "button" effect using CSS, but do make sure that the text of the link is always presented as text in HTML.

Another useful option is to supply a different background colour or image for the currently active section. For example, whilst within the "Our Products" section of the website the background colour of the top "Our Products" link might be grey. This would remind visitors where they are within the overall structure of the site. These visual effects do not benefit blind users but they do help visual users.

 


Example of a footer submenu with vertical bars between each link

Here we have defined the the list element in CSS to have a left and right border

#footer li { display: inline; border-right-width: 1px; border-left-width: 1px;
border-right-style: solid; border-left-style: solid; border-right-color: #FFFFFF;
border-left-color: #FFFFFF; }

Vertical menu bars

The default option for the list element is to present a vertical list of the items, as a result there is a line space between each link so extra spaces are not normally required. Keyboard users still need to see a change in the link as they move through the list. Don't forget to include a heading for the list so that blind users can identify the overall purpose of the list menu. If you want to have an icon, such as a pointing finger, at the left of each link you should set this in CSS as the bullet image for the list item so that it is ignored by screen readers.

Using the title attribute

A useful addition for the anchor element is the title attribute. This attribute works in a similar way to the alt attribute of the <img> element in that the value (text) should be displayed as a user focuses on the element. Most, but not all, screen readers can also be set to read out the title attribute as the software reads out the link text. If you have short link text on your navigation bar and want to be a bit more specific you can use the title attribute to expand upon the link text. By way of a demonstration we have used the following code for the "Our Products" navigation link of the top level menu in the example above .

 

<a href="/products.htm" title="More information about our extensive range of cameras for professional photographers"> Our Products </a>

This is not a "universal fix" but it can be helpful for some users as it will be read out by mosts screanreaders and will also display when the mouse cursor hovers over the navigation button. However, you should use this fix with care. Not all users will be able to benefit from the title attribute. Furthermore it can be annoying to blind users if it is not really necessary

USING CSS FOR “ROLL-OVER” BUTTONS

As mentioned in the previous session, CSS provides a set of “Pseudo-classes” for the link attribute (a href) that can react to the user focus (mouse or keyboard selection). These are

  1. a:link standard link
  2. a:visited listed in the browser history
  3. a:hover on mouse over
  4. a:active selected by the tab key (Internet Explorer)
  5. a:focus - selected by the tab key (Firefox)

These classes must be declared in the CSS in the order given above. It is best to define the hover, active and focus classes seperately (in the same style) because some browsers do not work well with combined pseudoclasses. Technically you can use a comma delimeted list such as a:hover, a:active, a:focus {definition} ). But experience has shown this is not 100% reliable.

Using CSS to create roll-over buttons is preferable to using javascript as CSS is universal. Each of the a:hover, a:active and a:focus classes need to be set so that both mouse and keyboard users can see the roll-over effect. For keyboard users this is a great benefit as otherwise it is not always clear where their current focus is (mouse users can see the cursor arrow to check where they are).

NOTE 1 – whenever we specify a font colour in a style sheet we should specify a background colour as well. This prevents us accidentally publishing white text on a white background!

Note 2 - whenever you use a mouse or keyboard action to change the look of an element such as a button you must not change the size. If the size of an element changes whilst the page is loaded the page layout tends to jump about and cause confusion to people using assistive software.

PULL-DOWN MENUS

Pull-down (and “pop-across”) menus are useful for sighted users who have good mouse control, but for everyone else they can be a real problem. They are particularly problematic for people with weak eyesight, limited motor skills, or users of some assistive software. The purpose of any pull-down menu is to give the user an extended range of links. You should ask yourself why you need to provide so many links on a page designed to deliver content.

However, for large complex sites, a well designed set of pull-down menus can benefit users who have reasonable mouse control. For example the John Lewis website uses a navigation system on every page that presents links to each major department in the top level navigation bar. Mouse users are then presented with a "pull-down" submenu that groups together the various sections of that department. This means that however you arrive at the site you have immediate access to all the main shopping areas. Keyboard users do not see these pull-down menus, however as soon as they select one of the main departmental links they are taken to the department's "home page" where the drop down menu is duplicated as a standard vertical list in the left-hand column. This means that keyboard users may have to perform one extra click to get to the same content as a mouse users. However this extra click should not be considered a barrier to accessibility as the alternative would be to present the pull-down menus to keyboard users and require them to click through all the departmental sub-menus until they arrived at the last departmental sub-menu.

Note: Whilst the John Lewis pull-down menu concept is useful, the method of coding in HTML causes real problems to users of screen readers, text-only browsers and mobile devices because all the menus and submenus are coded in HTML before any content. As a result every page starts with 207 links! This is a clssic case of poor HTML structure. Preferably these submenus should be written after the content and CSS used to position them at the top of the page. Alternatively it might have been better to use javascript to deliver the pull-down menus (screen readers etc. ignore javascript so these users would have the same level and method of accessibility as keyboard users).

BREAD-CRUMB TRAILS

A website is a multi-dimensional resource presented in a two dimensional medium (the screen). It is easy for users to become confused about where they are and how they got to any particular point in the site. To help the user orientate himself within the web site it is helpful to provide a series of links at the top of the page that presents a logical path from the Home Page to the current page. This is called a bread-crumb trail.

For example a breadcrumb trail that said "Home Page -> Sports & Leisure -> Indoor Games" tells the user that they are in the Indoor Games section and can easiliy go back to the main Sports & Leisure main page for outdoor games etc.

Using visual positions for instruction

Please remeber that blind users do not see the whole page, they work up and down the text as presented in the HTML document. For this reason it is important that you do not rely upon positions (where something is on the page) for navigation. Instructions such as "Use the left hand menu bar" cannot be followed by screen readers, braille pads or text-only browsers.