[Web Accessibility] 콘텐츠 숨기기(blind)

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

스크린 리더는 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;
}