在这里,我描述了如何通过 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>