タブ切り替えUIでは、クリックしたタブにaria-selected=”true”を付与し、非アクティブにはfalseを設定する。対応するパネルはhiddenを切り替える。タブからパネルを特定するには( A )属性で関連付け、クリック時に( B )で対象要素を取得する。
解答
A: aria-controls
B: getElementById
解説
WAI-ARIAパターンでは、タブにaria-controlsでパネルIDを紐付ける。イベントでそのIDを取り出し、document.getElementByIdでパネルDOMを取得し可視状態を切り替える。
使用例（サンプルコード）
[ html ]
<div role="tablist">
<button role="tab" aria-controls="p1" aria-selected="true">Tab1</button>
<button role="tab" aria-controls="p2" aria-selected="false">Tab2</button>
</div>
<section id="p1">Panel 1</section>
<section id="p2" hidden>Panel 2</section>
<script>
document.querySelector('[role=tablist]').addEventListener('click', e=>{
if(e.target.role !== 'tab' && e.target.getAttribute('role') !== 'tab') return;
document.querySelectorAll('[role=tab]').forEach(t=>t.setAttribute('aria-selected','false'));
e.target.setAttribute('aria-selected','true');
document.querySelectorAll('section[id]').forEach(p=>p.hidden=true);
const id = e.target.getAttribute('aria-controls'); // (A)
document.getElementById(id).hidden = false; // (B)
});
</script>