OREGON STATE UNIVERSITY
Open search box
There are two different definitions that you might be thinking of with regards to navigation; how someone navigates while on a page, and the navigation (or navigation menu) one uses to find way their way through a website.
Navigation within a page happens in multiple ways that are covered throughout the other pages on this website. Users navigate through a variety of ways, including: headings, descriptive links, skip links and keyboard access.
Navigation (or navigation menu) is the main topic of this page. Having a consistent main navigation menu on every page of your website is very important for clarity and organization, for all users, not just those who might have disabilities. The navigation menu should be clear and concise, but still informative. Have you ever visited a website where the navigation menu changed from page to page? That can be very frustrating for an able-bodied person, let alone someone using a screen reader, magnification software, or just trying to make sense of a website.
3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA)
The easiest way to meet success criteria 3.2.3 from WCAG 2.0 (listed above) is to use a template for your website. This automatically provides consistent navigation where repeated components are presented in the same relative order. If you are not using a template, make sure that each individual page has the same navigation, in the same order, in the same location so that it can more readily be understood by all.
If you read WCAG more in depth, this in no way limits your ability to have expanding menus, as long as you have a defined menu that stays consistent from page to page, more dynamic menus are okay, as long as all of menu items are keyboard accessible or are available in other ways within a website. Accessibility issues with dynamic menus are much more in depth that this page provides. If you are considering a dynamic menu that uses JavaScript, expanding accordion style menus, drop down menus, etc., contact [email protected] and you can receive help determining the accessibility of your content.
Most navigation menus today are created using lists as lists by definition are inclusive and defined. Lists can be styled to look just about however you want.
Always use meaningful, and different, text labels for each link. Each link label should match the main heading on the linked page for consistency and easy of understanding. Also, if you use images as navigation menu links, you must also make sure all images have appropriate alt text.
In Drupal, the navigation style has already been determined for you and is consistent across all pages of your site. All you need to do is build your navigation menu (within Site Building > Menus) and decide where to place it on the page (within Site Building > Blocks). Note that in Drupal, you can have multiple menus determined, on this website, all of the lists in the footer at the bottom of the page are also navigation menus that were created using Blocks and Menus to provide more resources for the users.
Where should you place your navigation menus? It is most important that you are consistent throughout your website, but there are strategic decisions about where to place your menu that affect how accessible they are. There are two options in Drupal, header menus or right sidebar menus. Placing the menu in the header makes it one of the first things a keyboard only user finds on a page, placing the menu in the right sidebar allows you to have a more through menu visible to visitors, but it is much further down on the page using a keyboard. You should weigh these options when deciding which menu to use.
Generally, providing a full navigation menu at all times is preferable, unless the website is so large that this would mean the navigation menu would take up a lot of space. This website follows this principle, as there are so many pages that having all visible in the navigation menu would make the menu very large. In most cases, however, it is recommended that you enable expanded menus in Drupal for all items.
A note about drop down menus, known as "nice-menus" in Drupal. One feature that a lot of websites use at OSU is a nice-menu, a drop down menu predefined for you in Drupal. All you need to do is create your navigation menu links, select nice-menu in Blocks, place in the header region and your navigation will appear as a drop down menu, similar to the image below.
These menus are now fully accessible. Visit one such website at OSU, Financial Aid, and using your keyboard and the tab key, the key used to navigate between links in most browsers, find a drop down menu item. The drop down menu appears when using a mouse or when using a keyboard, so all of the menu items within the drop down menu are accessible.
Financial Aid has also implemented the drop down menu with an additional step. Visit any of the top level menu items, "Apply for Aid" "Review Your Award" etc., and you'll find all of the other menu items located within the drop down menu.
