+1 571-297-6383 | info@sonjara.com

Improving accessibility of drop down menus - Part 2

To briefly recap, here was our menu class as we had left it - a suckerfish implementation with a little bit of help in the keyboard traversal department:

var FakoliMenu = new Class({
		
	root:	Class.Empty,

	initialize: function(elt)
	{
		this.root = $(elt);
		var menu = this;
		
		document.focusWatcher.addEvent('focusChanged', function() 
		{ 
			this.updateFocus(document.focusWatcher.focus);
		}.bind(menu));
		
		$$("#" + this.root.id + " > ul > li").each(function (elt)
		{
			var ul = elt.getElement('ul');
				
			if (ul)
			{
				elt.addEvents(
				{
					'mouseover': function() { menu.showMenu(elt); },
					'mouseout': function() 	{ menu.hideMenu(elt); } 
				});
			}
		});
	},
	
	showMenu: function(elt)
	{
		elt.addClass("sfhover"); 
	},
	
	hideMenu: function(elt)
	{
		elt.removeClass("sfhover");  
	},
	
	updateFocus: function(elt)
	{
		this.clearFocus();
		if (!this.root.contains(elt)) return;
		this.showMenu(elt.getParent());
	},
	
	clearFocus: function()
	{
		this.root.getElements("ul > li").each(function(elt) { if (!elt.contains(document.focusWatcher.focus)) this.hideMenu(elt); }.bind(this));
	}	
});

This works great for our keyboard-bound users, but what about users on tablets or phones? As it turns out, touchscreen devices often have a real problem with drop down menus. The problem lies with the fact that in the world of touch there isn't really any such thing as a hover event - either the user's finger is touching the screen or it isn't, and if it isn't touching the screen then we don't have any positional information at all. As a result, when the user touches one of our top-level menu items, instead of showing the menu they will most often click straight through.

One solution that is often proposed is to add an empty onclick handler to the top-level <a> tags in your menus, like so:

<a href='/about' onclick='return false;'>About ... </a>

However, this has the very unfortunate side-effect of rendering the top-level links unusable for mouse- or keyboard-based users. If you are targeting your site specifically at mobile users this might be an acceptable solution, but we can quite easily do better. Here's how.

Handling Touch Events

Touch-enabled browsers provide four basic events for managing touch interactions. These are touchstart, touchmove, touchend, and touchcancel. For our purposes we will only need to work with touchstart (which functions roughly like mousedown) and touchend (which is roughly equivalent to mouseup). The important thing to notice is that as with their mousey counterparts, the primitive touch events are fired before the logical interaction events (such as click). This gives us the opportunity to intercept touch interactions and modify our menu's behavior on the fly if we detect a touch event.

First we need to define our expected interactions, though. We need the following:

So here is our strategy. If we detect a touchstart event on one of our top-level menu items we add an event handler to block the subsequent click event, and then display the menu. Additionally we add touchend event handlers to the menu item and all its sub-items to handle the user selecting an item by releasing their touch. The code to implement this wordy explanation is fortunately pretty concise:

elt.addEvents(
{
  'touchstart': function()
  {
    menu.showMenu(elt);
    if (!elt.blockClick)
    {
      elt.blockClick = function(event) { new Event(event).stop(); return false; };
      elt.addEvent('click', elt.blockClick.bind(elt));
      elt.addEvent('touchend', function(event) { new Event(event).stop(); go(elt.href); });
							
      ul.getElements('a').each(function(child)
      {
        child.addEvent('touchend', function(event) { new Event(event).stop(); go(child.href); });
      });
    }							
  },
...
});
By Andy Green, posted on Sunday October 14, 2012
MooTools,menus,suckerfish,accessibility,ipad,touch

Comments

  • tchxazpv
    Posted by JamesRed at 2017-09-26 20:18:41
    payday loans online direct lenders only website more payday loans online
* indicates required field