접근성

기준#

접근성은 나중에 덧붙이는 기능이 아니라 모든 컴포넌트의 출하 조건입니다.

• WCAG 2.2 AA를 기준선으로 삼습니다.
• 모든 컴포넌트는 axe 위반 0, 라이트/다크 양 테마에서 통과해야 합니다.
• 키보드만으로 모든 기능에 도달할 수 있어야 합니다.
• 색·모션·소리 등 단일 감각에만 의존하는 정보 전달을 금지합니다.

색 대비#

본문·보조 텍스트, 상태 색, UI 경계는 모두 AA 대비를 충족합니다. 이는 토큰 레벨에서 보증됩니다 — *-text·text·text-muted 페어는 빌드 시 자동 검증되어, 미달 토큰은 빌드를 실패시킵니다. 다크 테마 규칙과 자동 검증의 정본은 다크 모드의 AA 자동 검증 절을 참고하세요.

surface-muted 위 보조 텍스트는 text-subtle이 아니라 text-muted를 사용합니다 — 약한 표면에서 대비가 무너지지 않게 하는 규약입니다.

전경·배경 토큰을 골라 현재 테마의 대비비를 직접 확인해 보세요. primary(blue.600)는 대비 ~3:1이라 대형 텍스트·비텍스트 UI 전용이고, 본문 텍스트에는 primary-strong(blue.700, ~7.3:1)을 씁니다 — 토큰이 라이트·다크 양 테마에서 AA를 보증한다는 뜻을 눈으로 증명합니다.

키보드 내비게이션#

• 포커스 순서는 시각 순서와 일치합니다(DOM 순서 = 읽기 순서).
• Tab / Shift+Tab으로 모든 상호작용 요소에 도달하고, :focus-visible 링이 항상 보입니다.
• Escape는 오버레이(모달·드로어·시트·팝오버)를 닫고 포커스를 트리거로 복원합니다.
• 오버레이는 열린 동안 포커스를 가두고(트랩), 닫히면 풉니다 — 그 외 어디에도 키보드 트랩을 만들지 않습니다.
• 메뉴·탭·라디오 등 합성 위젯은 화살표 키 로빙 탭인덱스를 따릅니다.

포커스 가시성#

포커스 링은 :focus-visible에서만 노출합니다 — 마우스 클릭에는 링을 띄우지 않고 키보드 이동에만 띄워, 시각 노이즈 없이 키보드 사용자를 돕습니다. 링 색은 focus-ring 토큰으로 고정해 모든 컴포넌트가 동일한 단서를 씁니다. 아래에서 Tab으로 이동해 보세요.

버튼

텍스트 링크

스크린리더#

• 모든 컨트롤은 접근 가능한 이름을 가집니다 — 가시 라벨, aria-label, 또는 aria-labelledby.
• 한국어 라벨을 기본으로 제공하고, 아이콘 단독 버튼에는 반드시 텍스트 대체를 둡니다.
• 페이지는 header·nav·main·footer 랜드마크로 구조화합니다.
• 동적 변화(오류·토스트·로딩)는 role="alert"·aria-live로 알립니다.
• 장식용 그래픽은 aria-hidden으로 보조기술에서 숨깁니다.

색에만 의존하지 않기#

상태는 색 + 아이콘 + 텍스트를 함께 써서, 색을 구분하지 못하는 사용자도 읽을 수 있게 합니다. 아래 Alert는 색이 아니라 아이콘과 제목으로도 종류가 구분됩니다.

정보

예약된 점검이 오늘 자정에 진행됩니다.

완료

변경 사항이 저장되었습니다.

주의

남은 저장 공간이 10% 미만입니다.

오류

파일을 업로드하지 못했습니다.

모션과 터치#

• 모션 — prefers-reduced-motion을 존중하고, 모션이 유일한 단서가 되지 않게 합니다. 대체 매트릭스는 모션 디자인에 있습니다.
• 터치 타깃 — 적응형 모바일 표면에서 최소 44–48px를 보장합니다(Apple 44pt · Material 48dp). 근거는 ADR-012 적응형 컴포넌트 정책을 따릅니다.

컴포넌트 axe 게이트#

접근성은 리뷰가 아니라 테스트로 강제합니다. 각 컴포넌트는 vitest-axe 기반의 구조/ARIA 게이트(*.a11y.test.tsx)를 가지며, 닫힘·열림·시트 등 상태별로 위반 0을 확인합니다. 색 대비는 jsdom 한계로 이 게이트에서 제외하고, 별도 contrast.test.ts + 브라우저 실측으로 보증합니다. 신규 컴포넌트·패턴은 이 게이트를 통과해야 출하됩니다.