Test for drop-down type Menu's

Test file location: http://osu.orst.edu/instruct/dce/dev/DCE_template/course_site/index.htm

Test Platform	PC	MAC	UNIX	AOL	PDA	WEB-TV
Internet Explorer 4,5,6	Yes, tested on 6	IE 5.1, tabs work and menus work	-	-	-	-
Netscape 4.7x	Mouseovers work, tabs work, images are out of place in the banner		-	-	-	-
Netscape 6.1, 6.2, 7	Everything works in Netscape 7.	tabs and menus work, but menus appear in the middle of the page	-	-	-	-
Mozilla 1.1	Mouseovers and tabs work	tabs and menus work	-	-	-	-
Opera	Neither mouseovers nor tabs work in this browser	Neither mouseovers nor menus work in this browser.	-	-	-	-
HomePage Reader	Yes	-	-	-	-	-
LIFT	-	-	-	-	-	-
iCab (MAC only)	-	nothing works, the site is a jumble of images and text in the wrong places.	-	-	-	-

Changes made to the DCE template: (previous version template, not MX)

• Added variable asking for the font size used in the pop-up menus (in px).
• The Array boxes have been rearranged so that the first array box is the first menu to pop up (from left to right on the screen). Note it is crucial that the array boxes are defined in this logical order in order to maintain correct tab order.
• In the function showLayer(layerName, shownOnMouse), code was added to allow browsers that support document.all to be able to tab through the menus. In order to do this and allow user to mouse over the menus, the focus had to be set to the main menu heading in the table (the menu bar that is always visible). This is done to help reduce errors.
• Function setMenuFocus(layerName) was added so that when the function is called it sets the focus to the first heading in the layer that was made visible. This is done to ensure that users, who tab through the menu items, will be able to tab through correctly and logically. Note only browsers that support document.all can do this.
• Function hideLayers(layerName) was added to fix the problem of some layers remaining visible after they were tabbed through.
• Function findBoxLength(boxArray) was added to fix the problem of incorrect box sizes because of the need to define the hidden menu layers within the visible main menu heading bar. In order for the screen reader to be able to read the menu system in logical order the hidden table menus have to be constructed in the order that the user needs to read them. But when this is done the constructed tables can't use auto formatting so the table widths have to be discovered. This algorithm is a crude method that should work for reasonably normal sized menus. If a better method for discovering text length is available then this method should be redone.
• In function boxGen(boxArray), code was added to give the first menu item in the hidden layers an ID name. The name is whichever box letter the layer corresponds with (A, B, C,...) plus FirstMenuItem. So the first menu on the page (the menu on the far right) should have its first menu item id set to AFirstMenuItem.
  
  Code was also added to this function so that the last menu item of the hidden layer will have a onBlur event attached to it that hides the current menu. This is done so that when the user has tabbed through the entire menu the menu will disappear rather than staying on the screen.
• In the library function nav_top.lbi:
  • When the user is using IE or a browser that supports document.all, the hidden layers will be constructed after each main menu heading (the always visible menu). For example: if "Welcome" is the first menu heading containing a hidden layer menu, then Array Abox will be constructed (document.write(boxGen("Abox"));) right after the <a> tag containing "Welcome".
  • The TabIndex attribute was added to each main menu heading (the <a> tag) and set to the default 0. This was done because later versions of explorer require a tabIndex be set if certain events are to be used.
  • The event onFocus was added to each main menu heading so that when the user tabs through the menus the correct hidden menu layer is made visible.
  • The event onBlur was added to each main menu heading so that when the user tabs off of the main (always visible) menu heading they will then be directed to the first menu heading of the corresponding menu layer.
  • An if() test was added to allow people who use IE (or a browser that supports document.all) to pop-up the hidden menu layer when the mouse scrolls over the corresponding table cell and people who use Netscape (or a browser that does supports document.layers) to pop-up the corresponding hidden menu layer when the mouse over the actual <a> tag link.
• At the bottom of the template an if() test was put in for users of Netscape (or a browser that does not support document.all) to construct the hidden menu layers at the bottom of the page instead of logical order. This is done because Netscape can display some erratic behavior if this code is not placed at the bottom.

Test Results (previous version of template, not MX)

• Internet Explorer 6.0:
  • Results: Passed all tests. IE displays the correct behavior for all the desired additions and changes.
• Netscape 4.7:
  • Results: This version only allows users to mouse over the menus. Code was changed so that the arrow gif displays when the user mouses over the menu item.
• Netscape 6.2
  • Results: Users are allowed to mouse over the menus and they can tab through the main menu headings with the sub menus displaying at the correct moments, but they cannot tab through each sub menu item.
• IBM Home Page Reader 3.0
  • Results: Works as well as IE. It also reads through the menus in the correct order. Passed all tests.
• Mozilla 5.0
  • Results: Mouseovers work, limited tab accessibility (can display menus by tabbing but cannot tab through submenus)
• Opera 5.0
  • Menus displayed further right. Displays the most erratic behavior, such as menus not disappearing. Tabbing not allowed with Opera