Day 3) 스크린 리더 사용자만을 위한 컨텐츠 숨기기

🎄  A11y Advent Calendar (번역) 3일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)

 

오늘은 좀 더 기술적인 주제로 들어가서 보조 기술이 접근 가능하도록 콘텐츠를 숨기는 방법에 대해 알아보겠습니다.

 

대부분의 사람들은 링크와 버튼을 탭하거나 클릭하여 상호 작용하는 방식으로 웹을 탐색합니다. 이러한 방식은 시각적 입력을 사용하는 사용자에게는 효과적이지만, 스크린 리더를 사용하는 사용자들에게는 다릅니다. 스크린 리더는 페이지 내용을 음성으로 읽어주는 소프트웨어로, 시각적 정보 없이도 웹 콘텐츠를 탐색할 수 있게 돕습니다.

 

따라서 개발자는 스크린 리더 사용자를 고려한 접근성 높은 웹 콘텐츠를 제공해야 합니다. 예를 들어, 아이콘은 시각적으로 의미를 전달할 수 있지만, 이를 인식하지 못하는 사용자에게는 단순한 버튼조차 기능을 이해하기 어려울 수 있습니다. 이런 상황에서는 보조 텍스트가 필요하며, 이것은 시각적으로는 숨겨지더라도 스크린 리더에서는 인식 가능해야 합니다.

 

많은 개발자가 display: none 또는 hidden 속성을 사용해 콘텐츠를 숨기지만, 이 방식은 DOM 접근성 트리에서도 콘텐츠를 제거합니다. 결과적으로, 스크린 리더 역시 이 콘텐츠를 인식할 수 없습니다.

 

스크린 리더가 접근 가능하도록 하면서 요소를 시각적으로 숨기는 CSS의 조합은 오랜 시간 동안 개선되어 왔습니다. 아래는 널리 사용되는 접근 방식입니다

 

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

• 레이아웃에 영향을 주지 않도록 position: absolute를 사용하여 문서 흐름에서 요소를 제거합니다.
• 요소에 1px 너비를 지정합니다.
• overflow:hidden을 사용하여 콘텐츠가 요소 외부로 보이지 않도록 합니다.
• clip: rect(1px 1px 1px 1px)로 배경색을 숨깁니다. 같은 기능을 하는 clip-path: inset(50%)를 함께 사용할 수 있지만, Internet Explorer에서는 작동하지 않는 것에 유의해야 합니다.
• white-space: nowrap 으로 줄바꿈을 억제하여 스크린 리더의 가상 커서가 공백이 있는 요소를 가리킬 수 있도록 합니다 참고
 

콘텐츠를 숨길 때는 완전히 숨기는 경우와 시각적으로만 숨기는 경우를 명확히 구분하는 것이 중요합니다. 예를 들어, 아이콘에 추가 정보를 제공해야 할 때는 스크린 리더가 이를 읽을 수 있도록 처리해야 하므로 시각적으로만 숨기는 방법을 사용해야 합니다.

반면, 탭이나 콘텐츠 토글처럼 상호작용이 필요 없는 요소는 완전히 숨기는 방식으로 사용자 경험을 단순화할 수 있습니다.

 

이와 관련해 읽은 LogRocket Blog의 Design vs. accessibility and the CSS visually-hidden class 글에서는 스크린 리더 사용자가 혼란을 느끼지 않도록 콘텐츠의 문서 흐름을 신중히 고려해야 한다는 점을 강조하고 있습니다. 이를 통해 시각적 디자인과 접근성을 동시에 만족시키는 더 세심한 처리가 필요하다는 생각이 들었습니다.

 

앞으로 프로젝트에서 sr-only 스타일을 적극 활용하며 더 나은 접근성을 고민해야겠다는 생각이 들었습니다. 다음 시간엔 링크의 이름을 어떻게 구성하면 좋을지와 유용한 확장프로그램을 소개해드리겠습니다 :) 봐주셔서 감사합니다.

 

출처: Day 3) Hiding Contents