웹 접근성을 위한 텍스트 숨김 처리

.a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  clip-path: polygon(0 0, 0 0, 0 0);
}

 

포토샵으로 따지면 마스크를 씌우면서 숨김 처리를 합니다. text-ident: -9999px; 적용하면 스크린 리더가 글을 잃다가 포커스를 잃을 수 있지만 위와 같은 clip 처리는 포커스를 잃지 않습니다.