• Home
• Products
• Tutorials
• Extensions
• Support
• Company
  

Q: What do Assistive Readers, keyboard surfers, iPhones, iPads, Androids, Windows Touch, and JavaScript-disabled devices have in common with the latest high-end Windows and Mac desktop computers?

Answer: Pop Menu Magic 2 works on all of them.

Default iPhone, iPad, iPod and Android support

Support for touch-enabled devices is a default feature built into Pop Menu Magic 2 (version 1.4.0 or higher). This feature is fully transparent to people using a mouse. For them, the menu will work as expected onmouseover. For an iPhone or iPad user, the menu will work by touch—that is, when a user taps a parent link its sub-menu will appear and be fully accessible. Sub-menus can be closed by tapping the trigger link a second time or by pressing the ESC key.

Default keyboard browsing support

Our usability testing indicates that a surprising number of people use the keyboard, rather than a mouse, to surf the web. While some people have physical impairments that limit or prevent them from using a mouse, other people simply prefer to use their keyboards instead of a mouse (or laptop touch pad). Pop Menu Magic's default settings allow keyboard surfers to use their tab keys to access menu items and to open sub-menus in the expected way, by pressing their Enter or Return keys. Sub-menus can be closed by a second hit on the trigger link or by pressing the ESC key.

To support touch-enabled devices and keyboard use, simply accept the default Trigger Action setting of MouseOver and Click and leave the Activate Trigger Links option deselected in the Pop Menu Magic 2 interface when you create your menu.

How do I support Assistive readers?

In general, support for assistive readers involves many different opinions. The method we recommend has been tested in JAWS and NVDA, the most popular assistive readers. The majority of assistive reader users scan a web page by headings, which is why it's always important to structure your documents using heading tags. We'll use a level 2 heading (you can change the level to suit your document's structure) to identify the menu.

Copy the code below and place it just above your menu's opening DIV tag, which will likely have an ID of p7PMM_1 (the "_1" indicates this is the first PMM menu on your page).

<div id="skip-wrapper">
<h2>Main Menu</h2>
<p><a id="p7PMMshowall" href="#p7PMM_1a1">Jump to Main Menu and expand all of its hidden submenu items. Once expanded you can tab through all links or open your screen reader's link list.</a></p>
</div>

Note: If you change the text in the link, make sure that all of your text remains inside the link so that the assistive reader speaks it in its entirety.

Then add the following style rules to the bottom of your menu style sheet:

#skip-wrapper {
position: absolute;
left: -99999px;
}
.p7PMMshowAll ul div, .p7PMMshowAll ul ul a {
display: block !important;
top: 100% !important;
left: 0 !important;
margin: 0 !important;
}

That's it. When an assistive reader user clicks the link, all menu items will become accessible.

What happens when JavaScript is disabled?

Estimates of how many people browse with script disabled range from 1%-5%. It's probably closer to 1% but your particular market could vary. There are 2 approaches to take. The first approach is handled automatically by Pop Menu Magic 2 (version 1.4.3 and higher):

1. Present users with a pure CSS menu that works using CSS li:hover

The default method yields a menu that works purely through CSS. Pure CSS menus do have some usability issues if you go beyond 2 menu levels and will not work in MSIE 6 (or under). If you want to use this solution, no action is necessary. It is the system default. However, if your menu deployment pre-dates PMM2 version 1.4.3, you can drop these style rules into the bottom of your menu style sheet:

For a Horizontal Menu:

.p7PMMnoscript {
position: relative;
}
.p7PMMnoscript ul div {
position: absolute;
display: block;
left: -9999px;
top: 98%;
}
.p7PMMnoscript ul ul div {
left: -9999px;
top: 0px;
}
.p7PMMnoscript li:hover div {
display: block;
left: auto;
}
.p7PMMnoscript li:hover ul div, .p7PMMnoscript li:hover ul ul div,
.p7PMMnoscript li:hover ul ul ul div, .p7PMMnoscript li:hover ul ul ul ul div,
.p7PMMnoscript li:hover ul ul ul ul ul div {
left: -9999px;
}
.p7PMMnoscript li li:hover div, .p7PMMnoscript li li li:hover div,
.p7PMMnoscript li li li li:hover div, .p7PMMnoscript li li li li li:hover div,
.p7PMMnoscript li li li li li li:hover div {
left: 190px;
top: 1em;
}

For a Vertical Menu:

.p7PMMnoscript {
position: relative;
}
.p7PMMnoscript ul div {
position: absolute;
display: block;
left: -9999px;
top: -1em;
}
.p7PMMnoscript ul ul div {
left: -9999px;
top: 0px;
}
.p7PMMnoscript li:hover div {
display: block;
left: 190px;
}
.p7PMMnoscript li:hover ul div, .p7PMMnoscript li:hover ul ul div,
.p7PMMnoscript li:hover ul ul ul div, .p7PMMnoscript li:hover ul ul ul ul div,
.p7PMMnoscript li:hover ul ul ul ul ul div {
left: -9999px;
}
.p7PMMnoscript li li:hover div, .p7PMMnoscript li li li:hover div,
.p7PMMnoscript li li li li:hover div, .p7PMMnoscript li li li li li:hover div,
.p7PMMnoscript li li li li li li:hover div {
left: 160px;
top: 1em;
}

Note: This method will not work in IE6 or under.

2. Set the menu to display as a static list

This solution supports all browsers, including IE6 and under. If this is the method you want to use, drop the following CSS rules into the bottom of your menu style sheet:

For either horizontal or vertical menus:

.p7PMMnoscript, .p7PMMnoscript div, .p7PMMnoscript ul ul div,
.p7PMMnoscript ul,.p7PMMnoscript li, .p7PMMnoscript li li {
position: static !important;
display: block !important;
background: transparent !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.p7PMMnoscript ul {
margin-left: .75em !important;
padding-left: .75em !important;
}
.p7PMMnoscript a, .p7PMMnoscript ul ul a {
display: inline !important;
padding: 0 !important;
border: 0 !important;
}

Note: Be aware that a horizontal menu positioned near the top of the page will turn into a vertical list, pushing the page content down. Of course, that's the way it would appear in Dreamweaver's design view, too.

Passive accessibility

If you have landing pages for each section of your web site, you can use the Activate Trigger Link option in the PMM2 interface as your sole accessibility method. Consider this menu structure:

• Home
• Hats
  • Mens Hats
  • Ladies Hats
• Contact Us

Home and Contact Us have no sub-menus so they are simply links to the Home and Contact Us pages. Hats, however, has a sub-menu which includes Mens Hats and Ladies Hats. Hats, therefore, is a Trigger Link. To make your menu fully accessible create a page called Hats. The Hats page would be an introduction page that talks about hats in general and that also contains (apart from the menu) links to the Mens Hats and Ladies Hats pages. If your site was structured in this manner, you could simply activate the trigger links by enabling that option in the PMM2 interface:

Of course, you would also make sure to link the Trigger Link Hats to the main Hats page. This technique would work in all scenarios. People using a mouse (the majority of your visitors) would still be able to operate the menu in conventional mouseover fashion, while Keyboard, Assistive Reader, and Touch Device users would navigate by clicking the top-level links—and your pages would be fully accessible to all.

Notes and thoughts

Accessibility is a very subjective and situational endeavor. We've engineered some very advanced capabilities into PMM2 that allow you to choose from among several accessibility methods. The method you choose, or whether you choose one at all, is entirely up to you and can be tailored to your own accessibility vision.

In closing, there is simply no other Dreamweaver menu tool that will afford you this level and scope of accessibility.