Accessible zurb foundation drop downs

I’ve been working with (and liking) the zurb foundation framework for a bit now. Some bits of it however don’t seem to be that accessible, such as keyboard navigation. This short post is about one way I found to make drop-downs keyboard navigable.

So, there’s not much to it really. The issue is that drop-downs, when they’re not hidden, are still accessible via the keyboard. However, when a link within one receives focus, its hidden, which may be confusing for keyboard only users.
Here’s a little work-around…

$('a', $('[data-dropdown-content]')).on('focus', function () {
  $(this).parents('[data-dropdown-content]').first().addClass('focused');
}).on('blur', function (e) {
  $(this).parents('[data-dropdown-content]').first().removeClass('focused');
});

This code basically adds a class of ‘focused’ to any link within a drop-down container when it receives focus. So, if its tabbed to via the keyboard, the drop-down can be revealed. When the first link receives focus, the drop-down is shown, and when the last link loses focus, the drop-down is hidden again. How you style it is up to you. All I did was set the left and top position’s to 0. So the drop-down may not be in the right place but at least its visible.
There you have it.

Leave a Reply