숨긴 콘텐츠는 화면에는 보이지 않지만, 스크린 리더 사용자는 읽을 수 있도록 설계된 컴포넌트이다. 정안 사용자에게는 불필요한 설명을 제공하지 않으면서 스크린 리더 사용자에게는 시각적 콘텐츠, 상호작용 상태 등에 대한 추가적인 정보를 전달할 수 있다.
이 페이지의 구성
WAI-ARIA 속성을 사용하여 숨긴 콘텐츠를 구현할 수 있다. 예를 들어, aria-label, aria-describedby, aria-labelledby 등의 속성을 적절히 활용하여 스크린 리더 사용자가 정보를 충분히 인지할 수 있도록 해야 한다.
전용 스타일을 적용하여 콘텐츠를 시각적으로 숨길 수 있다. 다음과 같은 CSS를 사용하면 화면에는 시각적으로 표시되지 않지만 스크린 리더에는 노출할 수 있다.
모바일 등 특정 디바이스에서 대화형 요소를 시각적으로 숨길 때, 스크린 리더의 가상 커서 위치가 정확하게 표시되도록 하는 스타일이다. 아래 코드를 적용하더라도 부모 요소의 레이아웃 특성에 따라 가상 커서 위치가 달라질 수 있으므로, 반드시 스크린 리더로 테스트해야 한다.
숨긴 콘텐츠를 사용하는 대신 주변 정보를 활용하거나 시각으로 정보를 표시하는 방안을 우선 고려한다.
숨김 콘텐츠를 필요로 하는 사용자 중 다수는 스크린 리더가 낭독하는 음성 정보와 화면에 표시된 시각 정보를 함께 확인한다. 따라서 콘텐츠는 누구나 확인할 수 있도록 시각적으로 표시하는 것이 바람직하며, 부가적으로 설명이 필요한 경우나 텍스트가 아닌 콘텐츠에 대한 설명이 필요한 경우에만 숨긴 텍스트를 제공하는 것이 바람직하다.
시맨틱 마크업을 한다.
정보의 의미/역할에 적합한 태그를 사용하게 되면 별도의 설명을 제공하지 않아도 스크린 리더는 해당 요소가 전달하고자 하는 정보의 특성(예 - 표, 목록, 제목 등)을 사용자에게 전달할 수 있다. 또한 대부분의 스크린 리더는 주요 태그별로 탐색할 수 있는 단축키가 지정되어 있거나, 단위별 탐색 기능을 지원하므로 사용자는 보다 효과적으로 화면 내 정보를 탐색할 수 있게 된다.
숨긴 콘텐츠에 스크린 리더가 정보를 탐지하는 것을 방지하는 스타일을 사용하지 않는다.
CSS의 visibility:hidden, display:none 속성은 적용된 요소를 표시할 화면의 시각적 플로에서 제거하기 때문에 스크린 리더를 사용하지 않는 사용자도 해당 요소를 볼 수 없으며 스크린 리더는 이를 무시한다. 따라서 숨긴 텍스트는 코드 예제를 참조하여 적절한 시각적 숨김 스타일을 적용해야 하며, visibility:hidden 또는 display:none이 사용되어서는 안 된다.
숨긴 콘텐츠의 크기 지정에 유의한다.
width:0, height:0, font-size:0, line-height:0과 같은 스타일이 적용되었을 때, 정보가 어떤 태그로 마크업되었는지, 어떤 스크린 리더를 사용하는지에 따라 정보가 무시될 수 있으므로 사용하지 않아야 한다.
대화형 요소를 숨길 때 상대적 위치 지정에 유의한다.
<label>, <input>과 같은 대화형 요소에 text-indent, top, left 등의 스타일 속성을 사용하여, 대화형 요소가 본래 배치되어야 할 영역을 벗어난 곳으로 이동하게 되면 요소에 키보드가 접근하거나 스크린 리더의 가상 초점이 접근했을 때 포커스링을 확인할 수 없게 된다. 별도의 값을 지정하는 대신 top, left 스타일 속성값이 auto로 유지되도록 해야 한다.
대화형 요소를 숨길 때 크기 지정에 유의한다.
대화형 요소를 숨기기 위해 높이와 너비를 1px로 지정하게 되면 키보드가 접근하거나 스크린 리더의 가상 초점이 접근했을 때 포커스링을 확인할 수 없게 된다. 대화형 요소를 시각적으로 숨길 때는 시각적으로 표시할 대체 요소의 크기와 숨겨진 대화형 요소의 크기를 같게 유지하고 z-index, opacity 스타일 속성을 사용하여 숨겨야 한다. 또한 키보드 사용자가 포커스링을 확인할 수 있도록 별도의 outline 속성을 제공해야 한다.
서비스 제공 언어를 변경할 때 숨긴 콘텐츠에 포함된 텍스트의 언어도 변경되도록 한다.
숨긴 콘텐츠는 화면에 표시되지 않기 때문에 서비스 제공 언어를 번역하는 과정에서 놓치기 쉽고, 콘텐츠를 검토하는 과정에서도 문제가 있음을 발견하기 어렵다.
텍스트 편집기에 숨긴 콘텐츠를 제공할 수 있는 옵션을 제공한다.
서비스 내·외부 사용자가 콘텐츠를 작성할 때, 스크린 리더 사용자를 위한 부가 설명을 제공할 수 있도록 숨긴 콘텐츠를 작성할 수 있는 입력란을 제공하거나 관련 기능을 제공하는 텍스트 편집기를 채택하는 것이 좋다.
스크린 리더 테스트를 수행한다.
사용자 에이전트, 스크린 리더는 주기적으로 업데이트되기 때문에 숨긴 콘텐츠가 호환되지 않을 수 있다. 따라서 정기적인 스크린 리더 테스트를 거쳐 숨긴 콘텐츠가 제대로 작동하고 있는지 확인해야 한다. 다양한 스크린 리더(예 - SenseReader, VoiceOver, TalkBack)와 브라우저(예 - Chrome, Edge, Safari) 조합에서 테스트를 수행해 호환성을 보장해야 한다.