웹 접근성을 고려하여 콘텐츠 숨기기 - sr-only / off-screen / a11yHidden

728x90

sr-only

스크린리더에서는 읽을 수 있지만 화면에서는 보이지 않게 하는 방법이다. 주로 부트스트랩 클래스명으로 사용된다.

왜 사용할까?

sr-only는 screen reader-only라는 뜻으로 주로 부트스트랩 클래스명으로 사용된다

부트스트랩 공식문서에 따르면,

스크린 리더는 우리가 모든 input 요소에 label을 포함하지 않는다면 어려움을 겪을 것이다.
이러한 인라인 폼들을 위해 우리는 .sr-only 클래스를 사용함으로써 label을 감출 수 있다.

우리는 항상 스크린 리더를 고려하여 웹 접근성을 신경써야하기 때문에 label을 아예 지우는 것보다 이러한 클래스를 사용하여 label을 감추는 방법을 사용해야한다.

즉, 우리는 접근성을 위해 스크린리더가 읽을 수 있도록 콘텐츠를 숨겨야한다

어떻게 사용할까?

부트스트랩에서는 기본적으로 스타일링이 내장되어있다

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0); /* 구형 브라우저를 위해 사용 */
  clip-path: polygon(0 0, 0 0, 0 0); /* inset(50%) 와 동일한 표현 */
  border: 0;
}

🖐 clip-path에 대해 이해하기
https://bennettfeely.com/clippy/

🖐 음수 마진(Negative margin)이란?
https://min-kyung.tistory.com/82

또 다른 클래스명

네이버에서는 주로 blind라는 클래스명을 사용한다.

이 밖에도 off-screen, a11yHidden이라는 클래스명을 사용하기도 한다

내용을 숨기는 또 다른 방법

1. display: none, visibility: hidden

모든 사용자로부터 내용을 감추는 방법이다
페이지의 시각적인 부분에서 지워지고 스크린리더에게 무시된다
스크린리더가 읽게 하려면 사용하면 안된다
하지만 모든 사용자에게 안보이게 할 경우라면 사용해도 된다

2. hidden 속성

html hidden 속성은 상대적으로 최신 문법이여서 오래된 브라우저에서는 지원하지 않는다

원래는 IE 11에서 지원안했는데 이제 지원한다

지원하는 브라우저의 경우, display:none과 동일하게 기능한다
모든 사용자에게 보이지 않는다

3. width: 0px, height: 0px

width와 height를 갖고 있지 않는 요소들은 페이지에서 제거되어 대부분의 스크린리더가 읽지 않는다
- 스크린리더가 읽게 하려면 요소를 0픽셀로 사이즈를 조절하면 안된다
하지만 font-size: 0px 또는 line-height:0의 경우, 스크린의 세로 공간을 갖기때문에 스크린리더가 읽을 수 있다

위의 방법 모두 악의적이라고 해석될 수 있기 때문에 검색 엔진에 좋지 않습니다

4. text-indent: -10000px

컨텐츠를 왼쪽으로 10000픽셀 옮겨서 스크린에 보이게 하지 않는 방법이다
스크린 리더들은 해당 텍스트를 읽을 수 있다
하지만 링크, 폼 컨트롤, 포커스할 수 있는 요소들에 이런 스타일을 적용한다면, 요소에 포커스가 가지만 페이지에는 보이지 않아 키보드 사용자들이 혼란스러울 수 있다
top: -9999px을 이용해서 콘텐츠를 숨기는 방법도 이와 유사한데 스크린리더는 읽을 수 있지만 포커스가 가면 해당 top 좌표로 이동하려하기 때문에 스크롤을 맨 위로 올리게 된다
- top: -9999px 을 이용했을 때 스크롤이 위로 올라가는 현상을 보여주는 동영상 링크

5. sr-only

가장 추천하는 스타일 방식으로 스크린리더가 읽을 수 있으면서 시각적으로는 숨기는 방식이다.