Accessibility

디자인 시스템 접근성 체크리스트

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

1. 인지 가능성 (Perceivable)

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

1.1 텍스트 대체 제공

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

1.2 적응 가능성

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

1.3 구별 가능성

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

2. 운영 가능성 (Operable)

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

2.1 키보드 접근성

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

2.2 충분한 시간 제공

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

2.3 발작 유발 방지

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

2.4 탐색 가능성

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

2.5 입력 방식

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

3. 이해 가능성 (Understandable)

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

3.1 가독성

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

3.2 예측 가능성

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

3.3 입력 도움

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

4. 견고성 (Robust)

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

4.1 호환성

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

5. 한국형 특화 요구사항

KS X OT0003:2022에서 강조된 한국 특화 요구사항을 반영.

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

사용 방법

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

참고 자료

• KS X OT0003:2022 문서
• WCAG 2.1
• WCAG 2.2