Add a Select Label to jQuery Menu for Accessibility

Question

I am trying to add a select label to a menu made of an unordered list of links generated dynamically.

I am stumped. The menu works, but is failing a 508 compliance test.

This code sits in the footer of my site:

// create the dropdown select   
(function(jQuery) { jQuery(function() {
var jQueryselect = jQuery('<select>')
        .appendTo('#exhibit-pages');


    jQuery('nav#exhibit-pages li').each(function() {
        var jQueryli    = jQuery(this),
            jQuerya     = jQueryli.find('> a'),
            jQueryp     = jQueryli.parents('li'),
            prefix = new Array(jQueryp.length + 1).join('-');

        var jQueryoption = jQuery('<option>')
            .text(prefix + ' ' + jQuerya.text())
            .val(jQuerya.attr('href'))
            .appendTo(jQueryselect);

        if (jQueryli.hasClass('current')) {
            jQueryoption.attr('selected', 'selected');
        }
    });


});})(jQuery);      


// Bind dropdown select to change the page
jQuery(function(){
  // bind change event to select
  jQuery('nav#exhibit-pages select').bind('change', function () {
      var url = jQuery(this).val(); // get selected value
      if (url) { // require a URL
          window.location = url; // redirect
      }
      return false;
  });
});

Answer 1

As pointed out by @steveax, your application must not change the context of the user unexpectedly http://www.w3.org/TR/WCAG20/#consistent-behavior

However, in your case, you may not be violating the success criteria if it is clear that the UI element is a navigational menu. You can make this clear by placing a <nav> element around the menu and related navigational items or by adding role="navigation" to an existing wrapping element if one exists.

Section 508 differs from WCAG in a couple of ways. Firstly, it is ancient and does not cover dynamic content well. In fact it specifies that you must supply alternatives to content that relies on scripting. It could be that your application is failing because you are not supplying an alternative to this menu. (if you supply a jsfiddle combining the HTML and the script, I can give more guidance on this).

If you are failing due to missing script alternative, you can provide an alternative by making your menu <li> elements simply contain an anchor tag with an href as a fallback (progressive enhancement). Be sure to apply any styles that hide elements using JavaScript and then you will be sure that all the elements are visible when JavaScript is disabled. One of the advantages of this is that your SEO and searchability will also improve.