웹 접근성을 고려한 콘텐츠 숨기기 (blind 처리)

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있습니다.

 

화면에는 보이지 않으며, 스크린 리더가 읽는 데에는 문제가 없는 clip 속성을 사용해 보자. clip 속성을 사용한다고 무조건 스크린 리더가 읽을 수 있는 것은 아닙니다.

 

스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용해야 합니다.

/* 접근성에 문제가 있음 */
.blind {
  display: none; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */
}

.blind {
  visibility: hidden; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */
}

/* 접근성에 문제 없음 */
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}