1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.02.03 JavaScript usage: DHTML menus

DHTML navigation

DHTML is a mixture of JavaScript and CSS used to provide increased functionality of a web page.

Many sites utilise this improved functionality to provide extended menu options which are hidden until the user mouse-overs a link.

Example:

  • Products
  • Services
  • Support

A common use of onmouseover and onmouseout is for fly-out or drop-down navigation systems. Place your mouse over the menu items below to view an example of drop-down menus. When the mouse is placed over the main menu items (onmouseover), additional sub-menu items appear below. When the mouse is removed from the menu system (onmouseout), then the sub-menus disappear.

Try accessing a sub-menu with the keyboard only.


Problems

Additional content and functionality is being displayed using onmouseover. In this example, JavaScript is controlling the display of Cascading Style Sheet elements within the page. The sub-menu items will only be visible if the mouse is placed over the main menu item. These items may not be available if JavaScript is disabled and may not be read by assistive technologies.


Solutions

When possible, use additional event handlers that allow keyboard navigation. When this is not possible, you must provide redundant navigation. This can be done one of two ways. First, provide links within the main content of the page to the pages displayed in the sub-menu navigation. Second, have the main navigation item (e.g., Product, Services) link to a page that contains the sub-menu navigation items. Click on the Products, Services, or Support links to see an example of providing redundant navigation.


Question 3

Which of the following are required by the NGfL? (Choose all that apply)