웹 접근성 체크리스트 2026 — WCAG 2.2 기준 프론트엔드 점검 38항목

axe-core로 시맨틱 HTML 자동 점검 (CI에 통합 가능)
npm install -D @axe-core/cli
npx axe http://localhost:3000 --tags wcag2a,wcag2aa --exit

포커스 표시 — outline:none 대신 커스텀 포커스 링 적용
/* 모든 인터랙티브 요소에 적용 */
:focus-visible {
  outline: 2px solid var(--focus-color, #2563EB);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 마우스 클릭 시에는 outline 숨김 */
:focus:not(:focus-visible) {
  outline: none;
}

prefers-reduced-motion 대응 CSS
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

토스트 알림을 스크린 리더에 전달하는 aria-live 패턴
<!-- HTML: 페이지에 항상 존재하는 라이브 영역 -->
<div id="toast-region" aria-live="polite" aria-atomic="true"></div>

<!-- JS: 토스트 메시지 삽입 -->
<script>
function showToast(message) {
  const region = document.getElementById('toast-region');
  region.textContent = message;
  // 시각적 토스트 UI도 별도 렌더링
}
</script>

접근성을 갖춘 폼 에러 처리 패턴 (React)
function EmailInput({ error }) {
  return (
    <div>
      <label htmlFor="email">이메일 주소</label>
      <input
        id="email"
        type="email"
        autoComplete="email"
        required
        aria-invalid={!!error}
        aria-describedby={error ? 'email-error' : undefined}
      />
      {error && (
        <p id="email-error" role="alert" style={{ color: 'var(--error-color, #DC2626)' }}>
          {error}
        </p>
      )}
    </div>
  );
}

Playwright + axe-core로 접근성 테스트를 E2E에 통합
// tests/a11y.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('메인 페이지 접근성 위반 없음', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

test('로그인 폼 접근성 위반 없음', async ({ page }) => {
  await page.goto('/login');
  const results = await new AxeBuilder({ page })
    .include('#login-form')
    .analyze();
  expect(results.violations).toEqual([]);
});