대화 상자 및 키보드: 집중 여정 테스트

이 가이드가 달성하는 목표

• 적절한 구성 요소 선택
• 이해하기 쉬운 포커스 배치
• 닫기 허용
• 컨텍스트 복원

빠른 확인

• 모달이 필요합니까?
• 열기 포커스는 어디에 위치하나요?
• 배경은 실제로 비활성인가요?
• 키보드로 대화 상자를 닫을 수 있나요?
• 트리거가 사라지면 포커스는 어디로 돌아가나요?

단계별 방법

1. 1

   중단 방식 선택

   정보가 모달이 필요한지 또는 페이지에 그대로 둘 수 있는지 결정합니다. 모달 대화 상자, 패널 및 메뉴를 구분합니다. 적절한 네이티브 요소를 선호하고 동작을 확인합니다. ARIA 역할은 상호 작용을 자동으로 생성하지 않습니다.

   결과물: 구성 요소 선택 및 근거.

2. 2

   이름 지정 및 열기

   접근성 있는 이름을 보이는 제목에 연결합니다. 작업에 따라 구조화된 콘텐츠 시작 부분, 유용한 필드 또는 안전한 작업 위치에 적절하게 포커스를 배치합니다. 열기 시 시작 부분이 화면에서 스크롤되어 사라지지 않도록 합니다.

   결과물: 테스트 완료된 열기.

3. 3

   키보드 탐색

   W3C 모달 대화 상자 패턴에 따라 Tab 및 Shift+Tab 키는 내부에 유지되고 외부 콘텐츠는 비활성화됩니다. 보이는 포커스, 논리적 순서 및 중첩 컨트롤에 함정이 없는지 확인합니다.

   결과물: 앞뒤 탐색.

4. 4

   닫기 및 복원

   보이는 닫기 및 예상되는 Escape 동작을 제공합니다. 트리거가 더 이상 존재하지 않으면 트리거 또는 논리적 단계로 포커스를 반환합니다. 제출 후 사용자는 변경 사항과 다음에 수행할 수 있는 작업을 확인할 수 있어야 합니다.

   결과물: 포커스 및 컨텍스트 복원.

5. 5

   오류 및 여백 테스트

   긴 메시지, 유효하지 않은 필드, 모바일 키보드 및 확대/축소 기능을 포함합니다. 스크롤 시 작업이나 제목이 영구적으로 가려져서는 안 됩니다. 오류는 입력된 값을 잃지 않고도 이해하기 쉽고 해결 가능해야 합니다.

   결과물: 좁은 화면 환경에서의 예외 처리

6. 6

   페이지 내 검사

   통합 구성 요소를 키보드 및 보조 기술을 사용하여 테스트합니다. 단순히 데모 환경에서만 테스트하지 마십시오. 반복적인 닫기 후 다시 열기 및 포커스 기능을 확인합니다. 로컬 환경에서의 승인만으로는 WCAG 인증을 획득할 수 없습니다.

   결과물: 승인 기록 및 알려진 한계

재사용 가능한 워크시트

승인된 의견을 기입하십시오. 이 항목들은 작업 템플릿이며, 관찰된 결과가 아닙니다.

메커니즘 구분

관리 지표

일반적인 실수

• 비활성 콘텐츠 없이 aria-modal 추가
• 닫기 후 포커스 해제
• 명확한 종료 없이 Esc 키 차단
• 마우스 열기만 테스트