将 Select 标签添加到 jQuery 辅助功能菜单

Question

我正在尝试将 select 标签添加到由动态生成的无序列表链接组成的菜单中。

我很难过。菜单有效，但未通过 508 合规性测试。

此代码位于我网站的页脚中：

// 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

正如@steveax 所指出的，您的应用程序不得意外更改用户的上下文http://www.w3.org/TR/WCAG20/#consistent-behavior

但是，在您的情况下，如果 UI 元素显然是一个导航菜单，则您可能没有违反成功标准。您可以通过在菜单和相关导航项周围放置 <nav> 元素或将 role="navigation" 添加到现有的包装元素（如果存在）来明确这一点。

第 508 节与 WCAG 在几个方面有所不同。首先，它很古老，不能很好地涵盖动态内容。事实上，它指定您必须为依赖脚本的内容提供替代方案。可能是您的应用程序失败了，因为您没有提供该菜单的替代选项。（如果您提供结合 HTML 和脚本的 jsfiddle，我可以提供更多指导）。

如果您因缺少替代脚本而失败，您可以通过使菜单 <li> 元素只包含一个带有 href 的锚标记作为后备（渐进式增强）来提供替代方案。请务必应用任何使用 JavaScript 隐藏元素的样式，然后您将确保在禁用 JavaScript 时所有元素都可见。这样做的好处之一是您的搜索引擎优化和可搜索性也会提高。

将 Select 标签添加到 jQuery 辅助功能菜单

Add a Select Label to jQuery Menu for Accessibility

jquery

accessibility

section508