접근성(a11y): WCAG 2.2 + ARIA

// ❌ div 남발
<div onClick={handleClick}>버튼</div>

// ✅ 시맨틱
<button onClick={handleClick}>버튼</button>


// ❌
<div className="header">
  <div className="logo">로고</div>
  <div className="nav">
    <div onClick={...}>메뉴1</div>
  </div>
</div>

// ✅
<header>
  <a href="/" aria-label="홈">로고</a>
  <nav aria-label="주요 메뉴">
    <ul>
      <li><a href="/about">메뉴1</a></li>
    </ul>
  </nav>
</header>

// 모달
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
>
  <h2 id="dialog-title">삭제 확인</h2>
  <p id="dialog-desc">정말 삭제하시겠습니까?</p>
  <button>취소</button>
  <button>확인</button>
</div>


// 토글 버튼
<button
  aria-pressed={isPressed}
  aria-label={isPressed ? '음소거 해제' : '음소거'}
  onClick={() => setIsPressed(!isPressed)}
>
  {isPressed ? '🔇' : '🔊'}
</button>


// 진행 상태
<div
  role="progressbar"
  aria-valuenow={progress}
  aria-valuemin={0}
  aria-valuemax={100}
  aria-label="업로드 진행률"
>
  <div style={{ width: `${progress}%` }} />
</div>

import { useEffect, useRef } from 'react';

function Modal({ isOpen, onClose }: Props) {
  const closeBtnRef = useRef<HTMLButtonElement>(null);
  const previousFocus = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement as HTMLElement;
      closeBtnRef.current?.focus();
    } else {
      previousFocus.current?.focus();  // 모달 닫고 원래 위치로
    }
  }, [isOpen]);

  // ESC로 닫기
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    if (isOpen) document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <FocusTrap>
      <div role="dialog" aria-modal="true">
        <button ref={closeBtnRef} onClick={onClose} aria-label="닫기">×</button>
        {/* ... */}
      </div>
    </FocusTrap>
  );
}

// Tab 첫 번째 — 본문 바로가기
<a
  href="#main-content"
  className="
    sr-only focus:not-sr-only
    focus:absolute focus:top-4 focus:left-4
    focus:z-50 focus:bg-white focus:px-4 focus:py-2
  "
>
  본문 바로가기
</a>


<main id="main-content">
  {children}
</main>

// 드롭다운 메뉴
function Menu() {
  const [activeIndex, setActiveIndex] = useState(0);
  const items = ['프로필', '설정', '로그아웃'];

  const handleKey = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        setActiveIndex(i => Math.min(i + 1, items.length - 1));
        break;
      case 'ArrowUp':
        e.preventDefault();
        setActiveIndex(i => Math.max(i - 1, 0));
        break;
      case 'Home': setActiveIndex(0); break;
      case 'End': setActiveIndex(items.length - 1); break;
      case 'Enter': handleSelect(items[activeIndex]); break;
    }
  };

  return (
    <ul role="menu" onKeyDown={handleKey}>
      {items.map((item, i) => (
        <li
          key={item}
          role="menuitem"
          tabIndex={i === activeIndex ? 0 : -1}
          aria-current={i === activeIndex}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}

일반 텍스트: 4.5:1
큰 텍스트(18pt+): 3:1
UI 컴포넌트: 3:1


// 검증
import { getContrast } from 'polished';
const ratio = getContrast('#6366f1', '#ffffff');  // 4.71 ✅


// Tailwind 안전 조합
text-gray-900 + bg-white  → 통과
text-gray-500 + bg-white  → 5.85 통과
text-gray-400 + bg-white  → 3.94 ❌ (4.5 미만)