한 달이 훌쩍 넘은 과제 요구사항으로 제시됐던 내용인데 업로드를 까먹고 있다가 임시저장 글에서 발견해서 뒤늦게나마 정리하는 글!!

과제에서 요구했던 내용은 텍스트는 스크린리더에서는 읽을 수 있지만 화면에는 보이지 않도록 구현해 주세요. 였다. 텍스트를 화면에서 숨길 수 있는 방법이 어떤 방법이 있을까? 알아보다가 clip-path을 이용한 방법을 알게 되었다.

따로 정리를 안 해놨어서 까먹고 있다가 최근 프로젝트를 하면서 clip-path를 사용했었는데 clip-path가 무엇인지에 대해서 잘 모르고 사용해서 그런지 기억도 안 남는 것 같고, 어떤 이유로 작동하는지도 감이 잘 안 와서 한 번 정리해보려고 한다.

clip-path

CSS 속성 중 하나로, 요소의 표시 영역을 자르는 데 사용된다. 원형, 타원형, 다각형 등의 형태로 요소를 자를 수 있게 된다.

간단한 사용 예시는 아래와 같다.

/* 사각형 요소의 클리핑 */
.element {
  clip-path: inset(10px); /* 요소의 모든 측면에서 10px만큼 자름 */
}

/* 원형 클리핑 */
.element {
  clip-path: circle(50% at 50% 50%); /* 요소를 원형으로 자름 */
}

/* 다각형 클리핑 */
.element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* 삼각형 형태로 자름 */
}

clip-path를 이용해 텍스트 숨기기

웹 접근성을 고려하면서 (스크린 리더와 같은 접근성 도구에는 읽히면서) 텍스트를 숨길 수 있습니다. clip-path를 사용하여 요소를 특정 형태로 자르면, 시각적으로 요소의 일부분을 숨길 수 있다.

.a11y-hidden {
  position: absolute; /* 레이아웃에 영향을 주지 않도록 설정*/
  width: 1px; /* 최소한의 크기로 조절 */
  height: 1px; /* 최소한의 크기로 조절 */
  margin: -1px; /* 화면에 나타나지 않도록 설정*/
  overflow: hidden; /* overflow된 콘텐츠 숨김 */
  clip-path: polygon(0 0, 0 0, 0 0); /* 클리핑 범위를 모두 0으로 지정해 요소를 숨김 */
}

이러한 방식은 a11y-hidden, off-screen, sr-only 등과 같은 클래스명을 사용한다.

네이버에서도 blind라는 클래스명으로 같은 방식으로 사용하고 있다.

display: none, visibility: hidden은?

가장 쉽게 텍스트를 숨길 수 있는 방법이 display와 visibility일 것 같다. 하지만 이 두 속성은 화면에서 안보일 뿐만 아니라 보조기기나 검색엔진이 접근하지 못하게 되어 스크린리더 사용자는 해당 요소의 텍스트를 들을 수 없다. 즉 웹 접근성이 전혀 고려되지 않은 방법이다. opacity를 0으로 하는 방법도 같은 이유로 불가능하다.

 width: 0; 
 height: 0;
 font-size: 0;
 line-height: 0;

다음과 같이 요소의 크기를 0으로 할 수는 있지만, width와 height를 갖고 있지 않는 요소들은 페이지에서 제거되어 대부분의 스크린리더가 읽지 않는다. 물론 font-size: 0px 또는 line-height:0의 경우, 스크린의 세로 공간을 갖기때문에 스크린리더가 읽을 수 있지만 악의적이라고 해석될 수 있기 때문에 검색 엔진에 좋지 않다고 한다.

text-indent: -9999px;

.offscreen {
    position: absolute;
    top: -9999px;
    overflow: hidden;
 }

text-indent와 absolute를 이용해 화면에서 밀어낼 수도 있다. 스크린 리더들은 해당 텍스트를 읽을 수 있게 된다. 하지만 form 또는 link와 같은 포커스할 수 있는 요소들에 이런 스타일을 적용한다면, 포커싱 되었을때 스크린 밖에 위치해 있기 때문에 정확한 위치를 표시 할 수 없어 혼란을 줄 수 있고 검색엔진 최적화에도 좋지 않은 영향을 미칠 수 있다고 한다.

참고 자료

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