접근 가능한 위젯: 펼침·탭·캐러셀

<details>
  <summary>배송은 얼마나 걸리나</summary>
  <p>결제 후 영업일 기준 2~3일 걸린다.</p>
</details>
 
<details open>  <!-- 처음부터 펼쳐 둔다 -->
  <summary>교환·환불</summary>
  …
</details>

<button type="button" aria-expanded="false" aria-controls="more">자세히</button>
<div id="more" hidden>…</div>
 
<script>
  const btn = document.querySelector('[aria-controls="more"]');
  const panel = document.getElementById('more');
  btn.addEventListener('click', () => {
    const open = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!open));
    panel.hidden = open;
  });
</script>

<button type="button" aria-expanded="false" aria-controls="faq-1">반품 기간은?</button>
<div id="faq-1" hidden="until-found">수령 후 7일 안에 신청한다.</div>
 
<script>
  const panel = document.getElementById('faq-1');
  const btn = document.querySelector('[aria-controls="faq-1"]');
  // 브라우저가 찾아서 열 때 버튼 상태도 맞춘다
  panel.addEventListener('beforematch', () => btn.setAttribute('aria-expanded', 'true'));
</script>

<details name="branch">
  <summary>입법부</summary>
  <p>법을 만든다.</p>
</details>
<details name="branch">
  <summary>행정부</summary>
  <p>법을 집행한다.</p>
</details>
<details name="branch">
  <summary>사법부</summary>
  <p>법을 해석한다.</p>
</details>

<h3>
  <button type="button" id="acc-1-btn" aria-expanded="true" aria-controls="acc-1">배송</button>
</h3>
<div id="acc-1" role="region" aria-labelledby="acc-1-btn">…</div>

<h2 id="lang-heading">예제 언어</h2>
<div role="tablist" aria-labelledby="lang-heading">
  <button role="tab" id="tab-js" aria-selected="true" aria-controls="panel-js">JavaScript</button>
  <button role="tab" id="tab-py" aria-selected="false" aria-controls="panel-py" tabindex="-1">Python</button>
  <button role="tab" id="tab-go" aria-selected="false" aria-controls="panel-go" tabindex="-1">Go</button>
</div>
<div role="tabpanel" id="panel-js" aria-labelledby="tab-js" tabindex="0">…</div>
<div role="tabpanel" id="panel-py" aria-labelledby="tab-py" tabindex="0" hidden>…</div>
<div role="tabpanel" id="panel-go" aria-labelledby="tab-go" tabindex="0" hidden>…</div>

const tablist = document.querySelector('[role="tablist"]');
const tabs = [...tablist.querySelectorAll('[role="tab"]')];
 
function select(tab) {
  for (const t of tabs) {
    const selected = t === tab;
    t.setAttribute('aria-selected', String(selected));
    t.tabIndex = selected ? 0 : -1;               // 로빙 tabindex
    document.getElementById(t.getAttribute('aria-controls')).hidden = !selected;
  }
  tab.focus();
}
 
tablist.addEventListener('click', (e) => {
  const tab = e.target.closest('[role="tab"]');
  if (tab) select(tab);
});
 
tablist.addEventListener('keydown', (e) => {
  const i = tabs.indexOf(document.activeElement);
  if (i < 0) return;
  const next = {
    ArrowRight: tabs[(i + 1) % tabs.length],
    ArrowLeft: tabs[(i - 1 + tabs.length) % tabs.length],
    Home: tabs[0],
    End: tabs[tabs.length - 1],
  }[e.key];
  if (!next) return;
  e.preventDefault();
  select(next);   // 수동 방식이면 여기서는 next.focus()만 하고, click(Enter·Space)에서 select한다
});

<section aria-roledescription="carousel" aria-label="이번 주 추천">
  <!-- 회전 제어가 캐러셀 안 Tab 순서의 맨 앞 -->
  <button type="button" class="rotate" aria-label="슬라이드 자동 재생 멈추기">⏸</button>
  <button type="button" aria-controls="slides" aria-label="이전 슬라이드">‹</button>
  <button type="button" aria-controls="slides" aria-label="다음 슬라이드">›</button>
 
  <div id="slides" aria-live="off" aria-atomic="false">
    <div role="group" aria-roledescription="slide" aria-label="3개 중 1">…</div>
    <div role="group" aria-roledescription="slide" aria-label="3개 중 2" hidden>…</div>
    <div role="group" aria-roledescription="slide" aria-label="3개 중 3" hidden>…</div>
  </div>
</section>

// 회전 시작/정지 때 라이브 영역 정책을 바꾼다
function setRotating(on) {
  slides.setAttribute('aria-live', on ? 'off' : 'polite');
  rotateBtn.setAttribute('aria-label', on ? '슬라이드 자동 재생 멈추기' : '슬라이드 자동 재생 시작');
}
carousel.addEventListener('focusin', () => stop());
carousel.addEventListener('mouseenter', () => stop());