접근성 기준

기준선

미검증 칸이 하나라도 있으면 출시하지 않는다.

네이티브 우선

ARIA는 네이티브로 할 수 없을 때만 쓴다.

• 이렇게 하지 않기선택은 메뉴가 아니다. 값을 고르는 목록(범위, 언어, 정렬)에 role=menu를 쓰지 않는다.
• 이렇게 하지 않기양수 tabindex 금지. 링크 안에 대화형 요소를 넣지 않는다(카드 전체가 링크면 안쪽 행동 0개).

키보드와 초점

초점은 사용자 행동이 있을 때만 움직인다. 예외는 아래 표뿐이다. 복합 위젯(Tabs, SegmentedControl, Menu, 달력 격자, ReorderList)은 Tab 정지점이 하나다(roving tabindex). 초점 순서 = 시각 순서.

:focus-visible {
  outline: var(--cb-focus-width) solid var(--cb-focus);
  outline-offset: var(--cb-focus-offset);
}
/* sticky chrome never hides focus (WCAG 2.4.11) */
.scroller { scroll-padding-top: calc(var(--topbar-h) + var(--cb-space-2)); }복사

44px · 320px · 확대

• 보이는 크기가 44보다 작으면 ::after로 조작 영역을 넓힌다. 넓힌 영역끼리 겹치지 않고 보이는 간격은 8 이상.
• 320px 폭, 브라우저 200·400% 확대에서 가로 넘침 0. 확대로 split이 push로 바뀌어도 초점은 같은 요소에 남는다.
• 글자 간격 주입(WCAG 1.4.12) 뒤에도 잘림 0. 버튼은 es에서 2줄까지 허용하고 말줄임하지 않는다.

forced-colors

• 이렇게채운 컨트롤·캡슐·카드·위젯에는 투명 1px border를 둬서 경계가 남게 한다.
• 이렇게선택·현재 상태는 배경색이 아닌 표식(체크, 밑줄, 테두리 굵기, aria-current)으로도 보인다.
• 이렇게시스템 색: 비활성 GrayText, 링크 LinkText, 선택 Highlight/HighlightText, 검색 일치 Mark/MarkText. 아이콘은 currentColor.
• 이렇게 하지 않기forced-color-adjust: none은 서비스 로고와 차트 표식에만, 텍스트 라벨이 있을 때만.

forced-colors는 페이지 안에서 흉내 낼 수 없어 카탈로그에 토글이 없다. e2e에서 forcedColors: "active" 에뮬레이션으로 검사한다.

라이브 리전 정책

1. 앱 셸에 리전 두 개를 첫 페인트부터 비워 둔다: polite(role=status)와 assertive(role=alert). 컴포넌트는 aria-live를 직접 만들지 않고 announce()를 호출한다. 예외는 Toast 영역뿐.
2. 상태 변화만 알린다. 내용은 알리지 않는다(행 추가, 스트리밍 결과, 타이핑 중 결과 수 변화).
3. 진행 알림은 10초에 최대 1회(가져오기: 시작 · 첫 결과 · 일부 실패 · 완료).
4. 검색 결과 수는 입력이 멈추고 500ms 뒤 한 번.
5. 같은 문장이 2초 안에 다시 오면 버린다. 초점 이동으로 이미 읽히는 것은 알리지 않는다.
6. assertive는 사용자 행동의 결과가 실패했을 때만. 백그라운드 실패는 polite.
7. 실행 취소가 가능한 결과는 그 가능성을 문장에 넣는다(“지금은 접어 둠. 실행 취소 가능”).

lang과 언어

• <html lang>은 서버가 centralby_locale 쿠키로 설정한다: ko · en · zh-Hans · es.
• 사용자 원문은 번역하지 않는다. 출처 메타데이터에 언어가 있으면 lang, 없으면 dir="auto"만. 언어를 추정하지 않는다.
• LanguageSwitcher의 각 항목은 자기 언어의 lang을 가진다.
• 날짜·숫자·상대 시간은 Intl.*에 UI 로캘을 넘겨 만든다. 문자열을 이어 붙이지 않는다.
• 이 가이드도 같은 규칙을 따른다: zh·es 화면에서 영어 본문으로 대체될 때는 그 요소에 lang="en"을 단다.

시험 게이트

현재 상태(2026-10-21): 실제 보조기기 검증 0건. 320px·400%·forced-colors·스크린리더·es 최장 라벨은 FINISH-PLAN E 단계에서 측정한다.