动态添加tabindex答案

【问题标题】：Adding tabindex dynamically动态添加tabindex
【发布时间】：2013-02-27 21:46:24
【问题描述】：

我想将tabindex 添加到所有表单元素。该表单是动态的，我无法将其添加到 HTML。我想把它作为一个函数运行。

如果有多个同名的单选按钮，每个按钮都必须有自己的tabindex 值。页面上的大多数表单元素都以<input> 开头，<select> 除外。我该如何解释？

我想我需要运行一个循环并添加属性，对吧？

var n = 1; 

$('input, select').each(function() {               
    $(this).attr('tabindex', n++);
});

【问题讨论】：

嘿@santa 有没有机会为此更新已接受的答案？我知道这个问题可能有点老了，但人们可能仍在考虑一些问题，但是应该使用的唯一值是 0 或 -1。请参阅下面的答案以获取推荐的解决方案！

标签： html jquery accessibility tabindex

【解决方案1】：

奇怪的问题，但这是基本的想法：

$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });

这使用:input 来获取包括按钮和文本区域在内的所有内容。 :not(:hidden) 只会排除隐藏的输入以避免不必要的选项卡。

【讨论】：

为什么奇怪？某些浏览器在通过同一组的单选按钮切换时存在问题...谢谢。
这很奇怪，因为您肯定会获得选项卡索引，但没有任何保证的顺序。因此，您可能会发现这会导致您随机选择单选按钮。
它不会通过我的 HTML 结构吗？我没有花哨的布局。
啊，看起来 jQuery 确实保证了文档顺序：stackoverflow.com/questions/1636201/…
$(":input:not(:hidden)").each(function (i) { $(this).attr('tabindex', i + 1); });甚至会更好，因为否则 taborder 也会让你通过隐藏的字段来切换！

【解决方案2】：

最好避免n++ 设置不同的tabindex 数字。

请尝试将tabindex 设置为0：

$(':input:visible').each(function() {               
    $(this).attr('tabindex', '0');
});

tabindex="0" 表示该元素在顺序键盘导航中应该是可聚焦的，但它的顺序由文档的源顺序定义。 ~ developer.mozilla.org

:input 选择器基本上选择所有表单控件。

:visible 选择器基本上选择所有可见的元素。

或者按照 cmets 中的建议，如果您没有其他更改可应用于每个可见输入，那么这就足够了：

$(':input:visible').attr('tabindex', '0');

【讨论】：

在这种情况下你甚至不需要循环，只需使用$(':input:visible').attr('tabindex', '0');。

【解决方案3】：

在这里，我描述了如何通过 jquery 动态添加 aria-selected 和 tabindex 值。我还想看看可访问性如何与 tablist、tab 和 tabpanel 角色一起工作，以及 aria 属性如何工作。希望对这段代码有帮助：

 var $tabs = $('.tabs');
 var $panels = $('.panel');

 $tabs.on('click', 'a', function (e) {
 e.preventDefault();
  var id = $(this).attr('href');

  // Find the currently visible tab and panel and hide them
$tabs.find('[aria-selected="true"]').attr({
            'aria-selected': false,
            'tabindex': -1
        });
   $(this).attr({
            'aria-selected': true,
            'tabindex': 0
        });
});

标签包装器：-

<ul class="tabs" role="tablist">
  <li role="presentation"><a href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a></li>
  <li role="presentation"><a href="#tab-2" role="tab" aria-controls="tab-2">Tab 2</a></li>
  <li role="presentation"><a href="#tab-3" role="tab" aria-controls="tab-3">Tab 3</a></li>
</ul>

<div class="tab-panels">
  <div class="panel" id="tab-1" role="tabpanel" aria-hidden="false">…</div>
  <div class="panel" id="tab-2" role="tabpanel" aria-hidden="true">…</div>
  <div class="panel" id="tab-3" role="tabpanel" aria-hidden="true">…</div>
</div>

【讨论】：

【解决方案4】：

一种方法是将元素在 DOM 中移到更高的位置。与较低的元素相比，DOM 树顶部的元素将首先使用 Tab 获得焦点。

【讨论】：