AccessibleWeb@U Feb 25,2009

Wendy Chisholm: Accessible Menus

Attending: People from the following UW units were present: Environmental Health, Law School, UW Technology, Engineering (moving to Drupal), Risk Management, Libraries, Disability Resources for Students, Health Sciences Educational Technology, Assistive Technology Lab (UW Technology), School of Nursing, Dept. Applied Mathematics. School of Nursing Information Management, School of Nursing Distance Learning, School of Public Health

Wendy reported on her evaluation of various methods for creating accessible menus. Her procedure and results are summarized in a Menu Testing Matrix (http://dl.getdropbox.com/u/3401/Menus/testMatrix.html).

A key question in evaluating these menu methods is whether in providing menus for non-disabled users they also provide usable, coherent, efficient navigation functionality for disabled users.

Evaluation Procedure

Each menuing method was evaluated using the following criteria:

• Does the method use Javascript? If so, is the Javascript unobstrusive (is it maintained in a separate library or does it have to be embedded in each page?)
• Does the method use progressive enhancement (are menu items in html elements being operated on by scripts, or are they written into the scripting?)
• Is there keyboard access to sub-menus?
  • Which keys are used to access the sub-menus? Does it work like a system menu?
  • Tab and enter
  • Can you use arrow keys to navigate?
• Does keyboard access method allow you to skip submenus (as opposed to having to go down all the submenu items before you get to the next menu topic)?
• How good is cross browser/device support? f
• Screen reader support
  • Does the method support Jaws 8, 9, 10, with various browsers?
  • For menus that are ARIA enabled, what kinds of behaviors are implemented?
• Screen magnifier support
  • Does it have proper focus behavior at various magnifications
• Touch screen behavior?
• How well does it handle font size increase?
• How well does the method handle use color combinations (such as high contrast)?
• How well does the method handle different screen sizes?
• Does the method include WAI-ARIA support?
• Price?
• Licensing terms?

Quick Summary of Results

See the Menu Testing Matrix page for more detailed information.

• Son of Suckerfish
  • http://htmldog.com/articles/suckerfish/dropdowns/
  • CSS only
  • Popular
  • Problems
    • moving focus by tabbing from element to element is not so good
    • moving thorugh menus requires tabbing through all
• PVII Tree Menu Magic
  • http://www.projectseven.com/products/menusystems/tmm2/01basic.htm
  • Costs $95
  • Behavior not so good
• UDM
  • http://www.udm4.com/demos/style-officexp.php
  • Do have to have visible link to UDM, copyright statement in code file
  • Free to educational institutions
  • Not ARIA enabled
  • Example page
    • Links at top of page are at bottom of XHTML file
    • Using arrow keys, does not move
    • Tabbing works, then can arrow key to read text
    • JAWS has optional mode that works with menus, allowing you to jump through menu structure. How many people would know about the option?
  • Pretty good option
• Huskie Menus
  • http://www.washington.edu/webinfo/case/flyout/ex1.html
  • Not good, not keyboard accessible
  • Designed for use on the UW's www.washington.edu servers
• CSS Only
  • http://meyerweb.com/eric/css/edge/menus/demo.html
  • Not too good
• YADM - Yet Another Dynamic Menu
  • http://www.onlinetools.org/tools/yadm/
  • Similar to Son of Suckerfish, same issues
• YUI menus using ARIA
  • http://developer.yahoo.com/yui/examples/menu/menuwaiaria.html
  • JAWS 10 and FireFox 3 combination is ARIA aware
  • Works like a system menu
• Dojo Dijit Menu system
  • http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Menu.html
  • Has behavior tabbing and arrowing that is similar to what sighted people get
  • ARIA gives you system level information that you just do not have in HTML and CSS alone
  • A JAWS 9 user has to know to change mode to get arrow keys to work (also true with YUI)
  • When you open things they appear onscreen and with focus

Discussion

Discussion of the results included the following:

• Wendy's favorite menu method is YUI with ARIA plug-in
  • Uses progressive enhancement
  • Uses ARIA, works well with browsers that do not yet support ARIA
  • Works well with NVDA (http://www.nvda-project.org/), a free open source screen reader
• Did not have a chance to test speech input in this study.
• Font size increases with the YUI menu results in a scrollbar, which is really cool.
• ARIA support is available in YUI and Dijit.
• Dijit only requires that a copyright statement be included in the code. The code itself can be modified, and you can use it to make money with paying Dojo any fees.
• Does OSX Voiceover support ARIA? (see http://discussions.apple.com/thread.jspa?threadID=1921048&tstart=0)
• Designing for scaling is worth doing. You should not rely on zooming because of differences in how browsers zoom.
• ARIA discussion:
  • Widgets are the way to implement the handlers to make ARIA work
  • ARIA support is being built into the scripting widget libraries
  • Latest versions of screen readers can interact with ARIA information
  • There is a need to educate Web site developers about ARIA
  • ARIA is increasingly being used to create behaviors for widgets. There is a need to standardize across menus systems to have more consistent predictable behaviors.

Goal: Uniform Menu Behavior on UW Interfaces?

• Could UW Web developers work together to develop or adopt a uniform menu behavior across our sites and services?
• We have several really good libraries to use:
  • YUI
  • Dojo
• Now is an interesting time: We need effective methods and there is no money to hire extra people
• Could we develop our own open source approach to share good methods
• YUI is easy to use
  • YUI user information is very clear
  • YUI site offers videos
  • YUI developers have done testing with screen readers. Accessibility people at Yahoo are among many developers there and have to fight to get their stuff into the Yahoo libraries
  • Yahoo staffer Doug Crockford wrote the book on unobtrusive JavaScript

Other Libraries

• Prototype (http://www.prototypejs.org/)
  • heavy
  • nice to work with, pretty code
  • no ARIA widgets built in
  • very little apparent mention of accessibility
• Cappuchino (http://cappuccino.org/)
  • Port of Cocoa, Apple's Objective-C framework
• SilverLight (http://silverlight.net/)
• Flash (http://www.adobe.com/products/flash/)
• Needed: People to prepare presentations on accessibility features of each of these products

Ideas for future speakers or discussions

• Accessibility issues
• Will be as accessible as you create it
• How do you keep your site accessible
• Drupal on accessibility
• Drupal interest group
  • depts.../uwdrupal
• Browser plug-ins
  • for disabled
  • for developers
  • cheap, good tools
  • tools for evaluating sites
• Real life users trying sites