Accessible Popup and Dropdown Menus
The Pop Menu Magic System is designed with accessibility in mind. When you insert a PMM menu on a blank page, that page will meet Section 508 and WAI checkpoints 1, 2, and 3 without error - according to the online accessibility checkers at both Watchfire and Cynthia Says. This does not mean your menu or your site is accessible in any specific context - only that we've removed all the most glaring technical errors. Your work towards an accessible web site is off to a good start, but you will need to consider other issues, as well, to successfully build an accessible web site. This article will describe one approach to building an accessible site around a PVII Pop Menu Magic Menu.
A myth dispelled
Are some popup/flyout menu tools impossible to make accessible? Sure. But to say all popup menus are inaccessible is simply not true. Pop Menu Magic will work with you, never against you, to achieve your accessibility goals.
An accessible example site
We built an example web site to illustrate how Pop Menu Magic can be integrated into an accessible design. It passes muster with the automated Watchfire and Cynthia Says checkers, but it also addresses our own accessibility vision as it relates to a mythical company named Harrison Clothiers. Let's discuss that vision in some depth.
The vision and the methods
Pop Menu Magic sub-menus are never hidden by default. They are simply positioned off-screen until needed. This enables all links in the menu to be accessible to blind visitors using an assistive reader, like JAWS. In the absence of a well-designed site structure, this is an invaluable feature - a failsafe measure we built in. But if you are blind, your surfing experience is totally different than it would be if you were able to see the page. You cannot simply scan the page, it is read to you from the top to the bottom of the source code. When you arrive at the menu, you will have to wait as the entire menu (including sub-menus) is recited, before you can move on to the page content. If this happens each time you load a page, you might get frustrated. If your vision is perfect, but you cannot use a mouse, your experience could be similar. Imagine having to use your tab key, and each time you tab into the menu, you must keep tabbing until you tab through all of the root-level and sub-menu links. That could be frustrating, too. So our goal is to hide the sub-menus and make it so that they are only revealed to people who can point at them with a mouse - typically, the vast majority of users. To accomplish this, we make 3 quick edits to our style sheet - so that instead of just being positioned off-screen, our sub-menus are made invisible (search engine spiders can still read them). Then we make a very simple tweak to the system script, disabling the automatic onFocus behavior, so that tabbing into a menu trigger does not cause its sub-menu to be revealed.
Editing the CSS
Let's start by editing 3 CSS rules that relate to the menu used in our sample site. We are simply going to add a visibility and display declaration to each of the three rules:
Set #p7PMnav ul to be hidden:
Note: This first edit is only necessary if your menu is vertical. Sub-menus in Horizontal PMM menus are hidden by default
#p7PMnav ul {
z-index: 10000;
visibility: hidden;
display: none
}
Set #p7PMnav .p7PMhide to be hidden:
#p7PMnav .p7PMhide {
left: -9000px;
border: 0;
visibility: hidden;
display: none
}
Set #p7PMnav .p7PMshow to be visible:
#p7PMnav .p7PMshow {
left: auto;
z-index: 20000 !important;
visibility: visible;
display: block;
}
Tweaking the JavaScript
We're going to make two changes in the script file. The first will turn off the onFocus event so that sub-menus will not appear for keyboard users. The second tweak enables you to use the Advanced Current Marker utility that ships with PMM to enable two links to the same page to exist in your menu and to have both of them highlighted when that page is visited. That means that you can have a root-level link for tab key surfers that goes to a main section page, and the same page represented in the sub-menu for mouse users - and both links will be highlighted when that page is the current page.
To ensure that no errors are made locating the code or copying it, click the link below to download a zipped copy of the tweaked JavaScript file. The file contains comments marking the tweaks at line 21 and near the end of the file at line 71.
Download tweaked JavaScript file
Unzip the tweaked script file and when you need to deploy it for a site, paste it into your p7pm folder to overwrite the default script file. Save a backup copy of the zipped file so it's always available for quick deployment.
Accessibility and compromise
If your area of expertise is accessibility, but your coding, CSS, and scripting skills are not very advanced, you might wind up having to make compromises that omit certain features for the majority of your mouse-using visitors, for the greater good of those who cannot use a mouse. But if you have the ability to include enhanced features for mouse users, that degrade gracefully for those with special needs, then that's what this article (and our example site) is about. If you navigate the example site using your keyboard, you will not be aware that there is a popup menu. That's by design. We have structured the site so that executing a top-level link loads a section intro page, which also contains links to the other pages in that section - including a second link to the intro page.
Using the PMM Advanced Current Marker
If you follow the structural logic we've used in the example site, a root-level menu item will link to a main section page, which will also be listed as a link in your sub-menu. If a page is linked to from both a root-level item and a sub-menu item, it would be very nice if both links were highlighted. If you load the example site casual Attire page, you'll note that the root link Country & Casual and the sub-menu link Casual Attire Info are both highlighted (bold). This is a feature available in Pop Menu Magic only. To learn how to use it, please see the Advanced Current Marker topic in the online PMM User Guide.
Use the Match to a specific Link Text option and select the appropriate link text from the list.
Note: if you do not use Pop Menu Magic, you can achieve a similar effect by manually assigning a special CSS class to the links you wish to highlight.
Pop Menu Magic enhances an accessible site
The popup sub-menus in our example site are operated with a mouse or other pointing device. That is, the feature is accessible to mouse users without being imposed on those unable to use a mouse. Moreover, people who are using a pointing device, but whose motor skills are impaired to the extent that aiming for sub-menus is a problem, can access the entire site through the root-level links. For the majority of users who have access to, and are able to operate the sub-menus, we have provided an extremely useful, flexible, and attractive navigation system, which enables them to quickly scan a large number of menu items to refine their search for a destination, without having to load a new page first. Additional Pop Menu Magic features, such as automatic current page highlighting, are of measurable benefit for sighted visitors.
Surf the example site
As you navigate the example web site, try it with your mouse first. Then take a second trip around using just your keyboard tab key (Opera uses the A and the Q keys for tabbing through links, and the spacebar to execute). As you tab, note that you can access a link that allows you to skip the main menu and another that places focus on the first item in the menu. Links that are accessed via the keyboard light up with a background color and reversed text, making it easier for some people to spot them. Let's look at how the skip links were done and how we got the links to "light up" when they are reached via the keyboard.
Mac Users: Sadly, some Apple browsers are not delivered with accessibility features enabled by default. If your tab key does not navigate through the links on your page, you will need to enable keyboard surfing in your browser's preferences.
The Skip links
The skip links are set using named anchors. The link at the top of the example site looks like this:
<div id="skipnav"> <a id="skipit" href="#content_top">Skip Main Navigation</a></div>
The link is inside an absolutely positioned DIV that hugs the top left corner of the window and links to a named anchor called #content_top. This anchor is just inside the opening tag for the content_text DIV:
<div id="content_text"> <a name="content_top"></a>
Executing the link with your tab key, moves focus directly to the main content.
The top skip link is invisible until you tab to it. This is accomplished very simply with CSS link styles. The skip link <a> element is given an id of skipit, which is used to set up our CSS link selectors:
#skipit, #skipit:visited, #skipit:hover {
font-size: .8em;
text-decoration: none;
color: #FFFFFF;
display: block;
padding: 2px;
border: 1px solid #FFFFFF;
cursor: default;
}
#skipit:active, #skipit:focus {
background-color: #333333;
border: 1px solid #333333;
}
The first selector combines the default, visited, and hover link states. The link is hidden by setting its color and border to match the page background, in this case white. Cursor is set to default so that if a mouse user happens to point at the "invisible" link, his cursor will not change to a link (hand) cursor.
The second selector combines the active and focus states, which fire when the link is reached via the tab key. The background and border colors are set, making the link light up.
A similar technique is used to make links in the content and footer areas light up. In that case, we assign separate link, visited, and hover rules and a combined active/focus rule.
The skip link in the footer that sends your focus to the first menu item, is also accomplished with a named anchor. In this case, the link points to #navigate, which is the Id assigned to the first root item in the menu:
<ul id="p7PMnav"> <li><a href="../index.htm" id="navigate">Home</a></li>
In conclusion
There are many facets to accessibility. We have presented one way, out of many possible ways, to integrate an engaging menu system into an accessible web site - without undue complexity or having to train visitors to use unfamiliar web surfing techniques.
If you have comments or suggestions please do drop by our newsgroup and let yourself be heard. Our news server is forums.projectseven.com and the newsgroup you should be using for this subject is pviiwebdev. Accessing newsgroups requires a news-capable program such as Windows Outlook Express, Mac Entourage / Mac Outlook Express, or Mozilla Thunderbird for Mac or Windows. See our main support page for all contact options.