접근성(a11y) — Svelte가 기본으로 챙기는 웹 접근성

<!-- 경고: img 요소에 alt 속성이 없음 -->
<img src="/photo.jpg" />

<!-- 올바른 사용 -->
<img src="/photo.jpg" alt="프로필 사진" />
<img src="/decoration.png" alt="" />  <!-- 장식용 이미지는 빈 alt -->

<!-- 경고: 클릭 이벤트가 있는 비대화형 요소에 키보드 이벤트 없음 -->
<div onclick={handleClick}>클릭하세요</div>

<!-- 올바른 사용 — button 사용 또는 role 추가 -->
<button onclick={handleClick}>클릭하세요</button>
<div role="button" tabindex="0" onclick={handleClick} onkeydown={handleKey}>클릭하세요</div>

<!-- 나쁜 예 — div로 모든 것을 만듦 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>

<!-- 좋은 예 — 시맨틱 태그 사용 -->
<header>...</header>
<nav aria-label="주 내비게이션">...</nav>
<main>...</main>
<footer>...</footer>

<script>
  let isOpen = $state(false);
  let isLoading = $state(false);
</script>

<!-- 드롭다운 메뉴 -->
<button
  aria-expanded={isOpen}
  aria-haspopup="true"
  aria-controls="dropdown-menu"
  onclick={() => isOpen = !isOpen}
>
  메뉴
</button>

{#if isOpen}
  <ul id="dropdown-menu" role="menu">
    <li role="menuitem"><a href="/settings">설정</a></li>
    <li role="menuitem"><a href="/profile">프로필</a></li>
  </ul>
{/if}

<!-- 로딩 상태 -->
<div aria-busy={isLoading} aria-live="polite">
  {#if isLoading}
    <p>데이터를 불러오는 중...</p>
  {:else}
    <p>데이터 로드 완료</p>
  {/if}
</div>

<script>
  import { tick } from 'svelte';

  let showModal = $state(false);
  let modalRef = $state(null);
  let triggerRef = $state(null);

  async function openModal() {
    showModal = true;
    await tick();
    modalRef?.focus();
  }

  function closeModal() {
    showModal = false;
    triggerRef?.focus(); // 트리거 요소로 포커스 복귀
  }

  function trapFocus(e) {
    if (e.key === 'Escape') closeModal();
    if (e.key !== 'Tab') return;

    const focusable = modalRef?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const first = focusable?.[0];
    const last = focusable?.[focusable.length - 1];

    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last?.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first?.focus();
    }
  }
</script>

<button bind:this={triggerRef} onclick={openModal}>모달 열기</button>

{#if showModal}
  <div class="backdrop" onclick={closeModal}>
    <div
      bind:this={modalRef}
      class="modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      tabindex="-1"
      onclick={(e) => e.stopPropagation()}
      onkeydown={trapFocus}
    >
      <h2 id="modal-title">모달 제목</h2>
      <p>모달 내용</p>
      <button onclick={closeModal}>닫기</button>
    </div>
  </div>
{/if}