페이지의 관련 부분만 스크린 리더 및 기타 보조 기술에 노출되도록 합니다. 예를 들어 화면에 표시되지 않거나 단순히 표현하기 위한 콘텐츠는 보조 기술에 표시되지 않아야 합니다.
수동 테스트 방법
화면 밖 콘텐츠가 숨겨져 있는지 확인하려면 스크린 리더를 사용하여 콘텐츠를 수동으로 테스트해야 합니다. - Mac 사용자는 VoiceOver 사용에 관한 동영상을 확인하세요. - PC 사용자는 NVDA 사용에 관한 동영상을 확인하세요. - Chromebook 사용자의 경우 내장 스크린 리더인 ChromeVox를 확인하세요.
TAB 키를 사용하여 페이지를 이동합니다.
스크린 리더는 숨겨진 콘텐츠를 알려주지 않습니다.
해결 방법
화면 밖 콘텐츠를 숨기려면 display: none 또는 visibility: hidden로 설정하여 해당 콘텐츠가 포함된 요소를 탭 순서에서 삭제합니다.
예를 들면 다음과 같습니다.
.remove-me {
visibility: hidden;
}
<button class="remove-me">Can't reach me with the TAB key!</button>
화면 밖 콘텐츠의 공개 상태 올바르게 설정하기도 참고하세요.