7onicDESIGN SYSTEM

Accessibility

Radix Primitives와 Field 시스템을 통한 자동 접근성 지원 가이드라인입니다.

WCAG 2.2 AA
Radix Primitives
Field System

Focus Management

focus-visible:focus-ring으로 통일. Input / Textarea는 키보드 감지 기반 독자 제어 적용

일반 포커스--color-focus-ring
user@example.com
오류 시 포커스--color-focus-ring-error
invalid-email

:focus-visible은 키보드 포커스에서만 발동합니다. 마우스 클릭 시에는 포커스 링이 표시되지 않습니다. Input / Textarea는 추가로 키보드 포커스를 감지해 Tab 조작 시에만 링을 표시합니다.

Keyboard Navigation

Radix Primitives가 각 컴포넌트의 키보드 조작을 자동으로 관리합니다.

Button / Toggle
TabEnterSpace

Tab으로 이동, Enter/Space로 실행

Checkbox
TabSpace

Tab으로 이동, Space로 전환

Switch
TabSpace

Tab으로 이동, Space로 전환

RadioGroup
Tab↑↓←→

Tab으로 그룹 이동, 방향키로 선택 (roving focus)

ToggleGroup
Tab↑↓←→

Tab으로 그룹 이동, 방향키로 전환

Slider
Tab↑↓←→HomeEnd

방향키로 값 변경, Home/End로 최소/최대

Color Contrast

WCAG 2.2 AA는 텍스트와 UI 컴포넌트에 최소 명암 대비율을 요구합니다.

4.5:1AA

텍스트 (일반)

3:1AA

텍스트 (대형)

18px+ / 14px bold+

3:1AA

UI 요소

7:1AAA

텍스트 (강화)

좋은 예

제목 텍스트

text-foreground on bg-background-muted

액션 레이블

text-background on bg-foreground

나쁜 예

제목 텍스트

낮은 명암 대비 — opacity-30

제목 텍스트

더 낮은 명암 대비 — opacity-40

Touch Targets

WCAG 2.5.8은 최소 24px를 권장합니다. default(40px) 이상이면 충족됩니다. 데스크톱에서는 마우스 사용이므로 작은 크기도 실용적입니다.

xs
28px
sm
32px
default
40px
lg
48px
xl
56px

더 나은 조작성을 위한 팁:

  • • 요소 간 충분한 간격(8px 이상) 확보
  • • Checkbox / Switch / RadioGroup은 레이블 클릭으로 전환 가능 — 레이블 영역이 터치 타겟을 보완
  • • 모바일 화면에서는 lg 이상의 크기를 고려하세요

Screen Reader

각 컴포넌트가 자동으로 관리하는 ARIA 속성 목록입니다.

Button
aria-busyloading=true일 때 자동 부여
aria-pressedselected=true일 때 자동 부여
disabled네이티브 disabled 속성 (aria-disabled 아님)
IconButton
aria-label텍스트가 없으므로 필수수동
aria-hidden내부 SVG 아이콘에 자동 부여
Input (Field 연결)
aria-invaliderror=true일 때 자동 부여
aria-describedbyField 내에서 FieldError에 자동 연결
Checkbox / Switch / Radio
roleRadix가 자동 설정 (checkbox / switch / radiogroup)
aria-checked상태에 따라 자동 관리
FieldError
role="alert"스크린 리더에 오류 메시지를 즉시 알림
장식 SVG
aria-hidden="true"Button leftIcon/rightIcon에 자동 부여

Web Guidelines

컴포넌트에 국한되지 않고, 웹 전반에서 권장하는 접근성 모범 사례입니다.

시맨틱 HTML

  • • <button>, <nav>, <main> 등 적절한 요소 사용
  • • <div onClick> 대신 <button> 사용
  • • 목록은 <ul> / <ol>로 마크업

제목 계층

  • • h1 → h2 → h3 순서 준수 (레벨 건너뛰기 금지)
  • • 페이지에 h1은 하나만
  • • 제목은 스크린 리더의 내비게이션 포인트가 됩니다

랜드마크

  • • <header>, <footer>, <aside>로 페이지 구조 명시
  • • 메인 콘텐츠를 <main>으로 감싸기
  • • 스크린 리더가 페이지 내를 빠르게 이동할 수 있게 됩니다

대체 텍스트

  • • 의미 있는 모든 이미지에 alt 속성 설정
  • • 장식용 이미지는 alt=""로 숨기기
  • • alt 텍스트는 이미지 내용을 간결하게 설명

색상에만 의존하지 않기

  • • 오류 표시는 색상 + 아이콘 + 텍스트 병행
  • • 차트는 패턴이나 레이블로 구분
  • • 링크는 색상 외 밑줄이나 아이콘으로도 구분

동적 콘텐츠

  • • aria-live로 동적 업데이트를 스크린 리더에 알림
  • • 토스트, 알림에는 role="alert" 또는 role="status" 사용
  • • 페이지 전환 시 포커스를 적절히 관리