Question

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

我很难过。该菜单有效，但未达到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元素显然是导航菜单，则可能不会违反成功标准。您可以通过在菜单和相关导航项目周围放置componentid元素或将<nav>添加到现有包装元素（如果存在）来明确这一点。

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

如果由于缺少脚本替代方法而失败，则可以通过使菜单role="navigation"元素仅包含带有<li>作为后备（渐进增强）的锚标记来提供替代方法。确保应用任何使用JavaScript隐藏元素的样式，然后您将确保在禁用JavaScript时所有元素都可见。这样做的一个优点是你的搜索引擎优化和搜索能力也会提高。

将选择标签添加到jQuery菜单以获取辅助功能

1 个答案: