Accessibility

웹 접근성

이 위키 문서는 "한국형 웹 콘텐츠 접근성 지침 2.2"를 기반으로 Daleui 디자인 시스템을 설계하고 검토할 때 사용해야 하는 접근성 체크리스트입니다. 모든 UI 컴포넌트, 콘텐츠, 상호작용 요소가 장애인 및 비장애인 모두에게 동등한 접근성을 제공하도록 보장하는 것을 목표로 합니다.

1. 인식의 용이성 (Perceivable)

사용자가 콘텐츠를 인지할 수 있도록 시각, 청각, 촉각 등 다양한 감각을 고려한 설계.

1.1 텍스트 대체 제공

• 모든 비텍스트 콘텐츠(이미지, 아이콘 등)에 적절한 대체 텍스트(alt text)를 제공했는가? 1.1.1 Non-text Content (A)
• 대체 텍스트는 콘텐츠의 목적과 기능을 명확히 설명하는가?

1.2 적응 가능성

• 콘텐츠가 선형 구조로 제공되어 스크린 리더로 이해 가능하도록 설계되었는가? 1.3.1 Info and Relationships (A)
• 시각적 순서와 논리적 순서가 일치하는가? 1.3.2 Meaningful Sequence (A)
• 입력 필드에 레이블이 명확히 연결되어 있는가? 1.3.3 Sensory Characteristics (A)
• 반응형 디자인에서 콘텐츠가 손실 없이 모든 디바이스에서 표시되는가? 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA)

1.3 구별 가능성

• 텍스트와 배경 간 명도 대비가 최소 4.5:1(A) 또는 3:1(AA) 이상인가? 1.4.3 Contrast (Minimum) (AA)
• 텍스트 크기를 200%까지 확대해도 콘텐츠가 손실되지 않는가? 1.4.4 Resize Text (AA)
• 이미지로 된 텍스트 대신 실제 텍스트를 사용했는가? 1.4.5 Images of Text (AA)
• 색상만으로 정보를 전달하지 않았는가? 1.4.1 Use of Color (A)

2. 운용의 용이성 (Operable)

사용자가 인터페이스를 쉽게 조작할 수 있도록 설계.

2.1 키보드 접근성

• 모든 기능이 키보드로만 조작 가능하도록 설계되었는가? 2.1.1 Keyboard (A)
• 키보드 포커스가 갇히는 상황(Keyboard Trap)이 없는가? 2.1.2 No Keyboard Trap (A)
• 키보드 단축키가 사용자 맞춤형으로 조정 가능하거나 비활성화 가능하도록 했는가? 2.1.4 Character Key Shortcuts (A)

2.2 충분한 시간 제공

• 시간 제한이 있는 콘텐츠에 대해 사용자에게 충분한 시간을 제공했는가? 2.2.1 Timing Adjustable (A)
• 움직이는 콘텐츠를 일시 정지, 중지, 숨길 수 있는 수단을 제공했는가? 2.2.2 Pause, Stop, Hide (A)
• 중단(Interruptions)이 발생하지 않도록 했거나, 사용자 동의 없이 중단되지 않는가? 2.2.4 Interruptions (AAA) (WCAG 2.2)
• 타임아웃으로 데이터 손실이 발생하지 않도록 경고를 제공했는가? 2.2.6 Timeouts (AAA) (WCAG 2.2)

2.3 광과민성 발작 유발 방지

• 1초에 3회 이상 깜빡이는 콘텐츠가 없거나, 임계값 이하로 제한했는가? 2.3.1 Three Flashes or Below Threshold (A)
• 상호작용으로 발생하는 애니메이션을 사용자가 비활성화할 수 있는가? 2.3.3 Animation from Interactions (AAA) (WCAG 2.2)

2.4 탐색 가능성

• 반복 콘텐츠를 건너뛸 수 있는 "Skip Navigation" 링크를 제공했는가? 2.4.1 Bypass Blocks (A)
• 페이지 제목이 고유하고 설명적인가? 2.4.2 Page Titled (A)
• 포커스 순서가 논리적이고 직관적인가? 2.4.3 Focus Order (A)
• 링크의 목적이 문맥에서 명확한가? 2.4.4 Link Purpose (In Context) (A)
• 다중 탐색 방법(사이트맵, 검색 등)을 제공했는가? 2.4.5 Multiple Ways (AA)
• 제목과 레이블이 명확하고 일관적인가? 2.4.6 Headings and Labels (AA)
• 포커스가 시각적으로 보이는가? 2.4.7 Focus Visible (AA)

2.5 입력 방식

• 복잡한 제스처 대신 단일 포인터 동작으로 대체 가능하도록 했는가? 2.5.1 Pointer Gestures (A)
• 포인터 입력이 실수로 실행되지 않도록 취소 가능성을 제공했는가? 2.5.2 Pointer Cancellation (A)
• 레이블과 프로그래밍적 이름이 일치하는가? 2.5.3 Label in Name (A)
• 모션 기반 입력(예: 흔들기)이 필수가 아닌 선택 사항인가? 2.5.4 Motion Actuation (A)

3. 이해의 용이성 (Understandable)

사용자가 콘텐츠와 인터페이스를 쉽게 이해할 수 있도록 설계.

3.1 가독성

• 페이지의 기본 언어가 명시되어 있는가? 3.1.1 Language of Page (A)
• 특정 부분의 언어가 변경될 경우 이를 명시했는가? 3.1.2 Language of Parts (AA)

3.2 예측 가능성

• 포커스 시 예기치 않은 변화가 발생하지 않는가? 3.2.1 On Focus (A)
• 입력 시 문맥이 예기치 않게 변경되지 않는가? 3.2.2 On Input (A)
• 내비게이션이 모든 페이지에서 일관적인가? 3.2.3 Consistent Navigation (AA)
• 동일한 기능의 요소가 일관되게 식별되는가? 3.2.4 Consistent Identification (AA)

3.3 입력 도움

• 오류가 발생하면 이를 명확히 식별할 수 있는 메시지를 제공했는가? 3.3.1 Error Identification (A)
• 입력 필드에 레이블 또는 지시문을 제공했는가? 3.3.2 Labels or Instructions (A)
• 오류 발생 시 수정 제안을 제공했는가? 3.3.3 Error Suggestion (AA)
• 법적/금융/데이터 관련 오류를 방지할 수단(확인 단계 등)을 제공했는가? 3.3.4 Error Prevention (Legal, Financial, Data) (AA)

4. 견고성 (Robust)

다양한 기술과 보조 도구에서 안정적으로 작동하도록 설계.

4.1 호환성

• HTML/CSS가 파싱 오류 없이 올바르게 작성되었는가? 4.1.1 Parsing (A)
• 모든 요소에 이름(Name), 역할(Role), 값(Value)이 프로그래밍적으로 제공되었는가? 4.1.2 Name, Role, Value (A)
• 상태 메시지가 보조 기술로 전달되도록 설계되었는가? 4.1.3 Status Messages (AA)

5. 한국형 특화 요구사항

한국형 웹 콘텐츠 접근성 지침 2.2에서 강조된 한국 특화 요구사항들.

• 반복 입력 정보 최소화: 사용자가 반복적으로 입력해야 하는 정보를 줄였는가? (7.3.4)
• 점근 가능한 인증: 인증 과정에서 보조 기술 사용자가 접근 가능하도록 설계했는가? (7.3.3)
• 국내 법적 준수: 「장애인 차별금지법」 및 「국가정보화기본법」에 따른 의무 사항을 반영했는가?
• 모바일 환경 고려: PC뿐만 아니라 모바일 기기에서의 접근성을 검토했는가? (1 적용 범위)

사용 방법

• 각 컴포넌트(버튼, 입력 필드, 내비게이션 등)를 설계할 때 이 체크리스트를 참고
• 체크리스트 항목을 하나씩 검토하며 "예/아니오"로 확인하고, 미준수 항목은 개선 계획 수립
• 개발 및 QA 단계에서 스크린 리더(NVDA, VoiceOver 등)와 키보드 테스트 병행

참고 자료

• 한국형 웹 콘텐츠 접근성 지침 2.2
• KRDS(범정부UI/UX 디자인 시스템)
• WCAG 2.1
• WCAG 2.2