Make containers accessible with tabindex focus

Here's the patch I'm testing now on a test copy of Drupalcon Chicago.

Cross posted!

@Everett. Well, its not a link right now because there is no page to link to. We could add a <a href="#"> wrapper around the label, but I fear that might be worse since it would go nowhere. (Also, it would break the current touch device compatibility; though this is not important since we're building a mobile version of the Drupalcon site right now.)

By simply setting the item as focusable many AT users will not have any idea that the item is actionable.

It isn't actionable per se. It is just a container label that helps to organize its child links. The child menu items really are links that actionable.

Here's a sample of what the HTML would be (after the patch) for a container with child links:

• Conference
  
  • About DrupalCon
  • Sessions
  • Keynotes
  • Core Conversations
  • Pre-Conference Training
  • Sponsors
  • Event Schedule

Is there some additional accessible text I could add before the "Conference" label that would help with understanding the context?

The alternative is to make the "Conference" label link to the exact same page as "About Drupalcon". However, there's some technical issues with that approach since Drupal's menu system doesn't work well when there are 2 links with the same URL in one menu. Specifically, when you follow one of those links, Drupal has no idea which of the multiple links with the requested URL is the proper one to be the "active item", so it often highlights the "wrong" menu item from the user's perspective. I've been contemplating how to build a contrib module to get around that limitation.

Here's the example in code form:

<ul class="menu">
<li class="expanded first menu-mlid-11814"><span title="" class="menu-item-container" tabindex="0">Conference</span>
<ul class="menu"><li class="leaf first menu-mlid-1299"><a href="/conference" title="Overview">About DrupalCon</a></li>
<li class="leaf menu-mlid-12354 has-children"><a href="/sessions">Sessions</a></li>
<li class="leaf menu-mlid-11854"><a href="/keynotes" title="Keynotes">Keynotes</a></li>
<li class="leaf menu-mlid-11884"><a href="/conference/core" title="Core Conversations">Core Conversations</a></li>
<li class="leaf menu-mlid-3754"><a href="/training" title="">Pre-Conference Training</a></li>
<li class="leaf menu-mlid-1079 has-children"><a href="/sponsors">Sponsors</a></li>
<li class="leaf last menu-mlid-11909"><a href="/conference/schedule" title="Event Schedule">Event Schedule</a></li>
</ul>
</li>
</ul>

If the links are not expanded by default, and require hover or focus to become expanded, then screen-reader users will still have a difficult time expanding the links.

Yep. The mistake I made was putting a "display: none" on the child menu, which gets toggled on hover. I'm working on changing that to "overflow: hidden" and toggling it to "overflow: visible" on focus/hover. I'm hoping even without activating the toggled "overflow: visible" the child links will still be accessible.

I'll post a link to a test site once I've got it working in Safari's tab navigation.

So the patch for this module was the easy part.

But the javascript on the drupalcon chicago site was causing me serious grief. Since its a D6 site, it has an old version of jQuery 1.2.6 that doesn't support the focusin and focusout events that allow a container <li> to know if its children have keyboard focus.

I've implemented a usable, but less than ideal work-around for it.

Everett, do you think you could test this out? http://chicago2011.scratch.drupal.org You'll be prompted for a username/password before being able to see the site. Just use drupal for both username and password (all lowercase).

Oh, obviously the site chicago2011.scratch.drupal.org site is the development version of the site. If all works well, we'll push the changes to the production server.

Is it working for keyboard only users, including visually displaying which item has focus?

Yes, I tested in both Safari and Firefox using tab navigation and the links are visually displaying when tabbed to.

I'll get someone to push these changes to production. (Later today when they are awake.)

Thanks for your help Everett!

The module issue has been fixed with http://drupal.org/cvs?commit=486184

Leaving open until the Drupalcon Chicago module and javascript issues are fixed.

It works the way I expected it to work. Thanks, Larry!

Everett (or anyone), please feel free to re-open if there are other a11y issues with the drupalcon nav. This is the easiest place to talk about it.