Thursday, December 9, 2010

Mobile device accessibility using dropdown menus and mouseover/hover effects

Someone mentioned that "using mouseovers to reveal information is problematic on devices without mice, such as mobile phones and tablet devices like iPads.  On these devices, this page provides no way to see any descriptive information about the resources."

Does this mean that unless we create mobile versions of our site, mobile users won't be able to use the mouseover drop down menus on PC's new website?

The answer that accessibility really is not a problem for these devices. Proper dropdown menus are created using standard HTML, such as lists (ul) tags. The dropdown effect is usually done using a combination of CSS hover attribute and Javascript as well. This method makes it accessible for screenreaders, assistive devices, and mobile platforms. The NCSU library website uses Drupal. They use device detection to redirect iPods and iPads to the mobile version of their site (m.lib.ncsu.edu). Also take note that they are using mega dropdowns, and the links also work when you click it.

Other websites that don't have a "mobile" version of their site also seem to work fine with the iPad/iPod, such as:

http://econsultancy.com/us/blog/6058-how-do-e-commerce-websites-work-on-the-ipad (these dropdown menus work on iPad)

http://www.foodnetwork.com/ (these dropdown links go to that link's landing page instead of showing the dropdown, because these dropdowns are activated differently)

As you can see, there are different ways to slice the pie, but they do produce accessible sites that work on mobile devices as well.

No comments:

Post a Comment