자바스크립트 기반 콘텐츠 숨김의 접근성 처리
Source
Evernote/Technote scraps/A List Apart 이제 내가 보이나요.md
Summary
자바스크립트로 콘텐츠를 숨기거나 보일 때, CSS 속성 선택에 따라 스크린 리더 등 보조 기술의 접근성에 큰 영향을 미친다. display:none이나 visibility:hidden은 스크린 리더가 내용을 무시하게 하지만, position:absolute; left:-999em와 같이 화면 밖으로 밀어내는 방식은 시각적 숨김과 접근성 유지가 가능하다. jQuery 등 라이브러리를 사용할 경우, 애니메이션 완료 후 콜백 함수를 통해 접근성 유지 클래스(accessibly-hidden)를 적용/제거하는 패턴을 권장한다.
Key Points
- 자주 쓰이는
display:none과visibility:hidden은 스크린 리더가 내용을 인식하지 못하게 한다. - 화면에는 보이지 않지만 스크린 리더가 접근할 수 있게 하려면
position:absolute; left:-999em(또는 RTL 언어의 경우right)를 사용해야 한다. - jQuery 등 라이브러리의 기본 숨김 메서드(
slideUp등)는display:none을 사용하므로 접근성이 떨어진다. - 해결책: 애니메이션 종료 시 콜백 함수에서 접근성 유지 클래스를 추가하거나 제거하여 스크립트 외부에서 숨김 방식을 제어한다.
- 국내 스크린 리더(센스리더, 드림보이스)는
visibility:hidden을 읽어줄 수 있으나, 보편적인 접근성을 위해 화면 밖 밀어내기 방식이 더 안전하다.