A11y: Navigation Consistency and Identification

The navigation of your website needs to be consistent, no matter what page your visitor is on. A good rule of thumb is to keep your navigation as simple as possible.

Key Takeaways

  • Navigation menus are the same on every page.
  • Order of items should be the same (and at the very least, labeled consistently)
  • Drop downs on menus should be kept to a minimum (shoot for 5 or fewer)
  • Off-site links or links to files should be content on a page and not in the menu (webstore exception)
  • Parent pages should also have a table of contents of sub-pages in the page content itself.
  • Menu items should not take people to a blank or empty page, or do nothing.

Consistent Navigation

Consistent navigation means that no matter what page you’re visiting on the website, the menu structure, positioning, labeling, and order is consistent. Main navigations and their items should display on every page.

To help with consistency, here are some tips:

  • The first link in a primary navigation should lead the user back to your homepage.
  • Navigation links should keep people on-site (as much as possible) and not link to PDFs.
  • Main (and secondary) navigation should be at the top of the content area.
  • Sidebar navigation should be used for page-specific items only and not be used as your site’s main navigation.

Simple Navigation

Essentially, keep your menu items as simple as possible, avoiding complicated and nested drop downs whenever possible. It’s not necessary to pack your menus with links to everything on your website. You can use page-specific links, or links within a page’s content for access to many areas.

For many, the menus must be read to them, and finding a menu item within a sea of menu links can be difficult and burdensome. A decent rule of thumb is to have menu items be high-level or conceptual, and then have links within the page content itself sorted by headings.

Navigation Items and Their Destinations

The expected use in a primary and secondary navigation is to keep people on site. When a menu item does the unexpected, such as leading off-site or to a PDF, it can throw people off and result in confusion and frustration.

Whenever possible, make sure your menus keep users on-site. There can be some exceptions, for example menu items that lead to your school’s web store or athletics site. Link to PDFs in a page’s content and not in the menu.

Menu items should not be left to do nothing, even if that menu item has sub-menu items. Instead, a page should be created and have a table of contents for the sub-menu items.

Sub-Menu Items as a Table of Contents

Anytime a primary navigation menu has submenu items (a.k.a. children), the resulting main page should also have a table of contents at the top that lists those submenu items. This allows for those submenu items to be accessed quickly without having the entire menu be read out loud.

For example, let’s say your website’s menu is relatively simple, as indicated in the ‘Example Menu Setup’ table:

HomeCommunityDirectorySupport Materials
PTAAdmin & Front Office
Community CouncilTeachers
Family Engagement CenterSupport Staff
Example Menu Setup

The Community menu item has three sub-menu items. When a user visits the main Community page, it should have a table of contents at the top of it with links to PTA, Community Council, and Family Engagement Center. In this way, those three sub-menu items can be accessed in two different ways, and affected users can simply bookmark the Community page instead of having the entire menu read to them each time.

The PTA, Community Council, and Family Engagement Center pages would not need that same table of contents unless they too had sub-menu items associated with them.

Directory would have the same thing, but both Home and Support Materials would not need a table of contents on them because they don’t have sub-menu items.