접근성¶

테스트 기준¶

접근성을 염두에 두고 UI를 설계하세요. 그러면 테스트는 최종 점검으로만 진행하면 됩니다. 더 복잡한 인터페이스의 경우, 다른 기여자와 상의하여 테스트 대상을 결정하세요. 지원을 받거나 테스트를 조율하려면 `Accessibility team`_에 문의하세요.

사용자 인터페이스 변경 사항은 항상 다음 기준에 따라 테스트해야 합니다.

• 키보드만으로 탐색할 수 있어야 합니다. 일반적인 문제로는 다음이 있습니다.

  • 대화형 요소에 Tab 키 또는 화살표 키로 접근할 수 없습니다.

  • 대화형 요소에 입력 포커스가 갇혀 다른 곳으로 이동할 수 없습니다.

  • 대화형 요소에 입력 포커스가 있을 때 시각적으로 표시되지 않습니다.

  • 포커스 순서가 화면에 보이는 논리적 순서와 일치하지 않습니다.

• Accessibility Insights 브라우저 확장 프로그램의 자동 검사 기능 또는 Axe 검사기를 사용하는 유사한 도구

UI 변경 사항이 이러한 입력 방식에 영향을 미칠 수 있다면, 다음 항목도 테스트해야 합니다.

• 터치만으로 탐색. 일반적인 문제로는 다음이 있습니다.

  • 터치 대상(대화형 요소)이 너무 작습니다.

  • 터치 방식에서는 사용할 수 없는 마우스 오버 기반 상호작용(예: 마우스를 올렸을 때만 표시되는 툴팁)

• 브라우저 확대 400%. 일반적인 문제로는 다음이 있습니다.

  • 확대 시 콘텐츠가 잘리거나 사라집니다.

  • 본질적으로 2차원 레이아웃이 필요하지 않은 콘텐츠에서 양방향(수직과 수평)으로 스크롤이 발생합니다. 이미지, 지도, 동영상, 데이터 테이블처럼 두 차원을 모두 활용해야 하는 콘텐츠에는 2차원 스크롤이 허용됩니다.

• Forced-colors 모드(예: Windows 대비 테마). 이는 screenshot tests <screenshot-tests>`의 `”high_contrast”`` 모드를 통해 테스트할 수 있습니다. 일반적인 문제로는 다음이 있습니다.

  • 의미를 전달할 때 색상에만 지나치게 의존하면, forced-colors 모드에서 그 의미가 제대로 전달되지 않습니다.

  • !important 또는 인라인 스타일을 사용하면 forced-colors 모드가 제대로 동작하지 않을 수 있습니다.

권장되는 보조 기술¶

UI 변경 사항이 보조 기술에 영향을 미칠 수 있다면, 널리 사용되는 무료 옵션을 활용해 테스트해 볼 것을 권장합니다.

Windows의 경우

• NVDA: Firefox ESR 사용을 권장합니다.

• Narrator: Microsoft Edge 사용을 권장합니다.

• Windows 돋보기

• Windows 음성 인식

• 대비 테마

macOS의 경우

• VoiceOver: Safari 사용을 권장합니다.

• macOS 화면 확대

• macOS 음성 명령

Linux의 경우

• Orca: Firefox ESR 사용을 권장합니다.

모바일 또는 태블릿의 경우

• iOS의 VoiceOver 또는 Android의 TalkBack 기능

다음은 널리 사용되는 유료 옵션입니다. 이러한 도구를 사용하고 있거나 라이선스를 보유한 사용자와 협업할 수 있다면 아래 항목에 대해서도 테스트하세요.

• Windows 환경의 JAWS

• Windows 환경의 Dragon